Color con nombre · #CCD4EC
Garden Fairy
Garden Fairy es #CCD4EC: rgb(204 212 236), hsl(225 46% 86%), oklch(0.871 0.034 271). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Garden Fairy color name →
#CCD4EC
oklch(0.871 0.034 271)
Conversiones de color
- HEX
- #ccd4ec
- RGB
- rgb(204 212 236)
- HSL
- hsl(225 46% 86%)
- HWB
- hwb(225 80% 7%)
- OKLCH
- oklch(0.871 0.034 271)
- OKLab
- oklab(0.871 0.001 -0.034)
- CIE Lab
- lab(84.85 0.73 -12.83)
- LCH
- lch(84.85 12.85 273.2)
- CMYK
- cmyk(14% 10% 0% 7%)
Tintes · Sombras · Tonos
Tintes
- D1D8EE
- D6DDF0
- DBE1F2
- E0E5F4
- E5E9F6
- EAEEF8
- EFF2F9
- F5F6FB
- FAFBFD
Sombras
- B1B8CD
- 979DAF
- 7E8392
- 656976
- 4E515B
- 373A42
- 222429
- 0F1013
- 020203
Tonos
- C4CBE1
- BCC3D6
- B5BACA
- ADB2BF
- A5A9B5
- 9EA1AA
- 96989F
- 8F9095
- 87888A
Armonías de color
Complementario +180°
- CCD4EC
Garden Fairy
- DDD4BC
≈ Gunny Sack
Análogo -30° +30°
- CCD4EC
Garden Fairy
- C1D8EA
≈ Light Featherbed
- D8D0E8
≈ Air Castle
Triádico +120° +240°
- CCD4EC
Garden Fairy
- EACDC7
≈ Honeysweet
- C5DBC9
≈ Clearly Aqua
Complementario dividido +150° +210°
- CCD4EC
Garden Fairy
- E6D0BE
≈ Autumn Blush
- D1D8C0
≈ Celery Satin
Tetrádico +90° +180° +270°
- CCD4EC
Garden Fairy
- E9CCD3
≈ Pink Pail
- DDD4BC
≈ Gunny Sack
- BDDCD6
≈ Picnic Bay
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.47:1 · APCA Lc 23
Ag
AAASobre negro
WCAG 14.19:1 · APCA Lc 81
Mejor color de texto: #000000
WCAG 14.19:1 (AAA) · APCA Lc 81
Contrast pairs
Fragmentos de código
CSS
:root {
--garden-fairy: #ccd4ec;
--garden-fairy-rgb: 204 212 236;
--garden-fairy-oklch: oklch(0.871 0.034 271);
}
.element {
color: var(--garden-fairy);
background-color: hsl(225 46% 86%);
border-color: oklch(0.871 0.034 271);
}Tailwind CSS v4
@theme {
--color-garden-fairy: #ccd4ec;
--color-garden-fairy-50: #f2f5ff;
--color-garden-fairy-100: #e4e7f4;
--color-garden-fairy-200: #cfd4e3;
--color-garden-fairy-300: #b1b7ca;
--color-garden-fairy-400: #979eb3;
--color-garden-fairy-500: #7d859e;
--color-garden-fairy-600: #6a7185;
--color-garden-fairy-700: #555a6b;
--color-garden-fairy-800: #3d424f;
--color-garden-fairy-900: #2a2e37;
--color-garden-fairy-950: #181a22;
}SCSS
$garden-fairy: #ccd4ec;
$garden-fairy-rgb: 204, 212, 236;
$garden-fairy-light: mix(#fff, $garden-fairy, 20%);
$garden-fairy-dark: mix(#000, $garden-fairy, 20%);
.element {
color: $garden-fairy;
box-shadow: 0 0 0 2px rgba($garden-fairy, 0.35);
}