Named color · #C2DDE6
Breezy
Breezy is #C2DDE6: rgb(194 221 230), hsl(195 42% 83%), oklch(0.88 0.031 219.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Breezy color name →
#C2DDE6
oklch(0.88 0.031 219.8)
Color conversions
- HEX
- #c2dde6
- RGB
- rgb(194 221 230)
- HSL
- hsl(195 42% 83%)
- HWB
- hwb(195 76% 10%)
- OKLCH
- oklch(0.88 0.031 219.8)
- OKLab
- oklab(0.88 -0.024 -0.02)
- CIE Lab
- lab(86.32 -7.89 -7.61)
- LCH
- lch(86.32 10.96 224)
- CMYK
- cmyk(16% 4% 0% 10%)
Tints · Shades · Tones
Tints
- C8E0E9
- CEE4EB
- D4E7EE
- DAEBF0
- E0EEF3
- E7F1F5
- EDF5F8
- F3F8FA
- F9FCFD
Shades
- A8C0C8
- 8FA4AB
- 77888E
- 606E73
- 495559
- 343D40
- 202628
- 0E1113
- 020203
Tones
- BBD3DB
- B5CAD1
- AEC0C6
- A7B7BC
- A1ADB2
- 9AA4A8
- 939B9D
- 8D9294
- 86898A
Color harmonies
Complementary +180°
- C2DDE6
Breezy
- EBD1C9
≈ Sugarcane
Analogous -30° +30°
- C2DDE6
Breezy
- C1DFDC
≈ Aqua Whisper
- C9DAEC
≈ Arctic Rain
Triadic +120° +240°
- C2DDE6
Breezy
- E7D0DE
≈ Pale Flamingo
- DCD9C1
≈ Loafer
Split-complementary +150° +210°
- C2DDE6
Breezy
- EBD0D3
≈ Short and Sweet
- E6D5C2
≈ Figurine
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.77:1 · APCA Lc 83
Best text color: #000000
WCAG 14.77:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--breezy: #c2dde6;
--breezy-rgb: 194 221 230;
--breezy-oklch: oklch(0.88 0.031 219.8);
}
.element {
color: var(--breezy);
background-color: hsl(195 42% 83%);
border-color: oklch(0.88 0.031 219.8);
}Tailwind CSS v4
@theme {
--color-breezy: #c2dde6;
--color-breezy-50: #ecf7fc;
--color-breezy-100: #ddeaef;
--color-breezy-200: #c7d8de;
--color-breezy-300: #a7bbc3;
--color-breezy-400: #8ba3ab;
--color-breezy-500: #708b95;
--color-breezy-600: #5f767e;
--color-breezy-700: #4c5e65;
--color-breezy-800: #36454a;
--color-breezy-900: #253033;
--color-breezy-950: #141c1f;
}SCSS
$breezy: #c2dde6;
$breezy-rgb: 194, 221, 230;
$breezy-light: mix(#fff, $breezy, 20%);
$breezy-dark: mix(#000, $breezy, 20%);
.element {
color: $breezy;
box-shadow: 0 0 0 2px rgba($breezy, 0.35);
}