Color con nombre · #CCE9E4
Frosty White Blue
Frosty White Blue es #CCE9E4: rgb(204 233 228), hsl(170 40% 86%), oklch(0.912 0.031 184.1). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Frosty White Blue color name →
#CCE9E4
oklch(0.912 0.031 184.1)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- D1EBE7
- D6EDE9
- DBF0EC
- E0F2EF
- E6F4F1
- EBF6F4
- F0F8F7
- F5FBFA
- FAFDFC
Sombras
- B1CBC6
- 97ADA9
- 7E908D
- 657472
- 4E5A58
- 37413F
- 222928
- 0F1312
- 020303
Tonos
- C4DEDA
- BCD3CF
- B5C8C5
- ADBEBB
- A5B3B1
- 9EA9A7
- 969E9D
- 8F9493
- 878A8A
Armonías de color
Complementario +180°
- CCE9E4
Frosty White Blue
- F5DADF
≈ Fancy Pants
Análogo -30° +30°
- CCE9E4
Frosty White Blue
- D3E8D9
≈ Splashdown
- CBE8EF
≈ Ethereal Mood
Triádico +120° +240°
- CCE9E4
Frosty White Blue
- E6DDF3
≈ Lingering Lilac
- F1DECD
≈ Corallite
Complementario dividido +150° +210°
- CCE9E4
Frosty White Blue
- F0DAEA
≈ Maiden of the Mist
- F6DBD4
≈ Pink Sangria
Tetrádico +90° +180° +270°
- CCE9E4
Frosty White Blue
- DBE1F7
≈ Aquarelle Purple
- F5DADF
≈ Fancy Pants
- E8E2CB
≈ Restoration Ivory
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.28:1 · APCA Lc 14
Ag
AAASobre negro
WCAG 16.34:1 · APCA Lc 90
Mejor color de texto: #000000
WCAG 16.34:1 (AAA) · APCA Lc 90
Contrast pairs
Fragmentos de código
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);
}