Couleur nommée · #338DAE
Carol
Carol correspond à #338DAE : rgb(51 141 174), hsl(196 55% 44%), oklch(0.604 0.097 226.4). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Cyan mean? → · Carol color name →
#338DAE
oklch(0.604 0.097 226.4)
Conversions de couleur
- HEX
- #338dae
- RGB
- rgb(51 141 174)
- HSL
- hsl(196 55% 44%)
- HWB
- hwb(196 20% 32%)
- OKLCH
- oklch(0.604 0.097 226.4)
- OKLab
- oklab(0.604 -0.067 -0.07)
- CIE Lab
- lab(54.45 -19.18 -25.68)
- LCH
- lch(54.45 32.05 233.3)
- CMYK
- cmyk(71% 19% 0% 32%)
Teintes · Ombres · Tons
Teintes
- 4C98B6
- 62A4BE
- 77AFC7
- 8BBACF
- 9EC6D7
- B1D1DF
- C5DCE7
- D8E8EF
- ECF3F7
Ombres
- 2B7A97
- 236780
- 1C556A
- 144455
- 0D3341
- 07232E
- 03141C
- 01070B
- 000101
Tons
- 3F8CAA
- 4A8BA5
- 528AA0
- 5A899C
- 628797
- 688693
- 6F858E
- 758389
- 7B8285
Harmonies de couleurs
Complémentaire +180°
- 338DAE
Carol
- B16E4E
≈ Santa Fe
Analogue -30° +30°
- 338DAE
Carol
- 1D9395
≈ Atrovirens
- 5A83BB
≈ Granada Sky
Triadique +120° +240°
- 338DAE
Carol
- AB698D
≈ Cure All
- 89853A
≈ Apeland
Complémentaire divisée +150° +210°
Tétradique +90° +180° +270°
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.77:1 · APCA Lc 65
Ag
AASur noir
WCAG 5.56:1 · APCA Lc 37
Meilleure couleur de texte: #000000
WCAG 5.56:1 (AA) · APCA Lc 37
Contrast pairs
Extraits de code
CSS
:root {
--carol: #338dae;
--carol-rgb: 51 141 174;
--carol-oklch: oklch(0.604 0.097 226.4);
}
.element {
color: var(--carol);
background-color: hsl(196 55% 44%);
border-color: oklch(0.604 0.097 226.4);
}Tailwind CSS v4
@theme {
--color-carol: #338dae;
--color-carol-50: #dafbff;
--color-carol-100: #c7efff;
--color-carol-200: #a9ddf5;
--color-carol-300: #81c2df;
--color-carol-400: #59aaca;
--color-carol-500: #2993b7;
--color-carol-600: #267c9b;
--color-carol-700: #1e637c;
--color-carol-800: #12495b;
--color-carol-900: #0c3340;
--color-carol-950: #001e29;
}SCSS
$carol: #338dae;
$carol-rgb: 51, 141, 174;
$carol-light: mix(#fff, $carol, 20%);
$carol-dark: mix(#000, $carol, 20%);
.element {
color: $carol;
box-shadow: 0 0 0 2px rgba($carol, 0.35);
}