Benoemde kleur · #CCE9E4
Frosty White Blue
Frosty White Blue is #CCE9E4: rgb(204 233 228), hsl(170 40% 86%), oklch(0.912 0.031 184.1). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Gray mean? → · Frosty White Blue color name →
#CCE9E4
oklch(0.912 0.031 184.1)
Kleurconversies
- HEX
- #cce9e4
- RGB
- rgb(204 233 228)
- HSL
- hsl(170 40% 86%)
- HWB
- hwb(170 80% 9%)
- OKLCH
- oklch(0.912 0.031 184.1)
- OKLab
- oklab(0.912 -0.031 -0.002)
- CIE Lab
- lab(90.12 -10.58 -0.95)
- LCH
- lch(90.12 10.62 185.1)
- CMYK
- cmyk(12% 0% 2% 9%)
Tinten · Schaduwen · Tonen
Tinten
- D1EBE7
- D6EDE9
- DBF0EC
- E0F2EF
- E6F4F1
- EBF6F4
- F0F8F7
- F5FBFA
- FAFDFC
Schaduwen
- B1CBC6
- 97ADA9
- 7E908D
- 657472
- 4E5A58
- 37413F
- 222928
- 0F1312
- 020303
Tonen
- C4DEDA
- BCD3CF
- B5C8C5
- ADBEBB
- A5B3B1
- 9EA9A7
- 969E9D
- 8F9493
- 878A8A
Kleurharmonieën
Complementair +180°
- CCE9E4
Frosty White Blue
- F5DADF
≈ Fancy Pants
Analoog -30° +30°
- CCE9E4
Frosty White Blue
- D3E8D9
≈ Splashdown
- CBE8EF
≈ Ethereal Mood
Triadisch +120° +240°
- CCE9E4
Frosty White Blue
- E6DDF3
≈ Lingering Lilac
- F1DECD
≈ Corallite
Gesplitst complementair +150° +210°
- CCE9E4
Frosty White Blue
- F0DAEA
≈ Maiden of the Mist
- F6DBD4
≈ Pink Sangria
Tetradisch +90° +180° +270°
- CCE9E4
Frosty White Blue
- DBE1F7
≈ Aquarelle Purple
- F5DADF
≈ Fancy Pants
- E8E2CB
≈ Restoration Ivory
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.28:1 · APCA Lc 14
Ag
AAAOp zwart
WCAG 16.34:1 · APCA Lc 90
Beste tekstkleur: #000000
WCAG 16.34:1 (AAA) · APCA Lc 90
Contrast pairs
Codefragmenten
CSS
:root {
--frosty-white-blue: #cce9e4;
--frosty-white-blue-rgb: 204 233 228;
--frosty-white-blue-oklch: oklch(0.912 0.031 184.1);
}
.element {
color: var(--frosty-white-blue);
background-color: hsl(170 40% 86%);
border-color: oklch(0.912 0.031 184.1);
}Tailwind CSS v4
@theme {
--color-frosty-white-blue: #cce9e4;
--color-frosty-white-blue-50: #ecf8f6;
--color-frosty-white-blue-100: #ddebe9;
--color-frosty-white-blue-200: #c6d9d6;
--color-frosty-white-blue-300: #a6bdba;
--color-frosty-white-blue-400: #8ba5a0;
--color-frosty-white-blue-500: #708d88;
--color-frosty-white-blue-600: #5f7873;
--color-frosty-white-blue-700: #4c605c;
--color-frosty-white-blue-800: #374643;
--color-frosty-white-blue-900: #25302e;
--color-frosty-white-blue-950: #141d1b;
}SCSS
$frosty-white-blue: #cce9e4;
$frosty-white-blue-rgb: 204, 233, 228;
$frosty-white-blue-light: mix(#fff, $frosty-white-blue, 20%);
$frosty-white-blue-dark: mix(#000, $frosty-white-blue, 20%);
.element {
color: $frosty-white-blue;
box-shadow: 0 0 0 2px rgba($frosty-white-blue, 0.35);
}