Color con nombre · #C3D4E7
Cry Baby Blue
Cry Baby Blue es #C3D4E7: rgb(195 212 231), hsl(212 43% 84%), oklch(0.863 0.032 251.2). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Cry Baby Blue color name →
#C3D4E7
oklch(0.863 0.032 251.2)
Conversiones de color
- HEX
- #c3d4e7
- RGB
- rgb(195 212 231)
- HSL
- hsl(212 43% 84%)
- HWB
- hwb(212 76% 9%)
- OKLCH
- oklch(0.863 0.032 251.2)
- OKLab
- oklab(0.863 -0.01 -0.03)
- CIE Lab
- lab(84.06 -3.05 -11.45)
- LCH
- lch(84.06 11.85 255.1)
- CMYK
- cmyk(16% 8% 0% 9%)
Tintes · Sombras · Tonos
Tintes
- C9D8E9
- CFDDEC
- D5E1EE
- DBE5F1
- E1E9F3
- E7EEF5
- EDF2F8
- F3F6FA
- F9FBFD
Sombras
- A9B8C9
- 909DAB
- 78838F
- 606973
- 4A5159
- 343A40
- 202428
- 0E1013
- 020203
Tonos
- BCCBDC
- B5C3D2
- AEBAC7
- A8B2BD
- A1A9B2
- 9AA1A8
- 94989E
- 8D9094
- 86888A
Armonías de color
Complementario +180°
- C3D4E7
Cry Baby Blue
- E0CFBC
≈ Dainty Lace
Análogo -30° +30°
- C3D4E7
Cry Baby Blue
- BCD7E1
≈ Bridgewater Bay
- CED0E7
≈ Artistic Violet
Triádico +120° +240°
- C3D4E7
Cry Baby Blue
- E6CACD
≈ Pink Spinel
- CBD7C1
≈ Hawthorne
Complementario dividido +150° +210°
- C3D4E7
Cry Baby Blue
- E6CCC2
≈ Pout
- D6D3BB
≈ Pistachio Tang
Tetrádico +90° +180° +270°
- C3D4E7
Cry Baby Blue
- E2CAD8
≈ Diva Girl
- E0CFBC
≈ Dainty Lace
- C0D9CB
≈ Snow Goose
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.51:1 · APCA Lc 24
Ag
AAASobre negro
WCAG 13.89:1 · APCA Lc 79
Mejor color de texto: #000000
WCAG 13.89:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmentos de código
CSS
:root {
--cry-baby-blue: #c3d4e7;
--cry-baby-blue-rgb: 195 212 231;
--cry-baby-blue-oklch: oklch(0.863 0.032 251.2);
}
.element {
color: var(--cry-baby-blue);
background-color: hsl(212 43% 84%);
border-color: oklch(0.863 0.032 251.2);
}Tailwind CSS v4
@theme {
--color-cry-baby-blue: #c3d4e7;
--color-cry-baby-blue-50: #eff6fe;
--color-cry-baby-blue-100: #e1e9f3;
--color-cry-baby-blue-200: #cbd5e2;
--color-cry-baby-blue-300: #acb9c8;
--color-cry-baby-blue-400: #91a0b1;
--color-cry-baby-blue-500: #77889b;
--color-cry-baby-blue-600: #657383;
--color-cry-baby-blue-700: #505c69;
--color-cry-baby-blue-800: #3a434d;
--color-cry-baby-blue-900: #282f36;
--color-cry-baby-blue-950: #161b21;
}SCSS
$cry-baby-blue: #c3d4e7;
$cry-baby-blue-rgb: 195, 212, 231;
$cry-baby-blue-light: mix(#fff, $cry-baby-blue, 20%);
$cry-baby-blue-dark: mix(#000, $cry-baby-blue, 20%);
.element {
color: $cry-baby-blue;
box-shadow: 0 0 0 2px rgba($cry-baby-blue, 0.35);
}