Couleur nommée · #C8DAE3
Sweet Breeze
Sweet Breeze correspond à #C8DAE3 : rgb(200 218 227), hsl(200 33% 84%), oklch(0.878 0.023 229.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Sweet Breeze color name →
#C8DAE3
oklch(0.878 0.023 229.1)
Conversions de couleur
- HEX
- #c8dae3
- RGB
- rgb(200 218 227)
- HSL
- hsl(200 33% 84%)
- HWB
- hwb(200 78% 11%)
- OKLCH
- oklch(0.878 0.023 229.1)
- OKLab
- oklab(0.878 -0.015 -0.017)
- CIE Lab
- lab(85.89 -4.91 -6.61)
- LCH
- lch(85.89 8.23 233.4)
- CMYK
- cmyk(12% 4% 0% 11%)
Teintes · Ombres · Tons
Teintes
- CDDEE6
- D3E1E9
- D8E5EB
- DEE9EE
- E3ECF1
- E9F0F4
- EEF4F7
- F4F8F9
- F9FBFC
Ombres
- AEBDC5
- 94A2A8
- 7B878C
- 636C71
- 4C5457
- 363C3F
- 212527
- 0F1112
- 020203
Tons
- C1D1D9
- B9C7CE
- B2BEC4
- ABB5BA
- A3ACB0
- 9CA3A6
- 959A9D
- 8E9193
- 878989
Harmonies de couleurs
Complémentaire +180°
- C8DAE3
Sweet Breeze
- E4D3CA
≈ Blossom Time
Analogue -30° +30°
- C8DAE3
Sweet Breeze
- C6DCDC
≈ Whispering Blue
- CED7E6
≈ Monet Lily
Triadique +120° +240°
- C8DAE3
Sweet Breeze
- E3D1D9
≈ Mauve Aquarelle
- D7D8C7
≈ Silver Green
Complémentaire divisée +150° +210°
- C8DAE3
Sweet Breeze
- E6D1D1
≈ Mauve Chalk
- DFD5C6
≈ Shōji
Tétradique +90° +180° +270°
- C8DAE3
Sweet Breeze
- DED2E1
≈ Ametrine Quartz
- E4D3CA
≈ Blossom Time
- CFDBCC
≈ Leek White
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.43:1 · APCA Lc 21
Ag
AAASur noir
WCAG 14.59:1 · APCA Lc 82
Meilleure couleur de texte: #000000
WCAG 14.59:1 (AAA) · APCA Lc 82
Contrast pairs
Extraits de code
CSS
:root {
--sweet-breeze: #c8dae3;
--sweet-breeze-rgb: 200 218 227;
--sweet-breeze-oklch: oklch(0.878 0.023 229.1);
}
.element {
color: var(--sweet-breeze);
background-color: hsl(200 33% 84%);
border-color: oklch(0.878 0.023 229.1);
}Tailwind CSS v4
@theme {
--color-sweet-breeze: #c8dae3;
--color-sweet-breeze-50: #eff6fb;
--color-sweet-breeze-100: #e1e9ee;
--color-sweet-breeze-200: #cbd6dc;
--color-sweet-breeze-300: #acbac1;
--color-sweet-breeze-400: #91a1a9;
--color-sweet-breeze-500: #778993;
--color-sweet-breeze-600: #65747c;
--color-sweet-breeze-700: #515d63;
--color-sweet-breeze-800: #3a4449;
--color-sweet-breeze-900: #282f32;
--color-sweet-breeze-950: #161c1e;
}SCSS
$sweet-breeze: #c8dae3;
$sweet-breeze-rgb: 200, 218, 227;
$sweet-breeze-light: mix(#fff, $sweet-breeze, 20%);
$sweet-breeze-dark: mix(#000, $sweet-breeze, 20%);
.element {
color: $sweet-breeze;
box-shadow: 0 0 0 2px rgba($sweet-breeze, 0.35);
}