Couleur nommée · #CCD7DF
Poppy’s Whiskers
Poppy’s Whiskers correspond à #CCD7DF : rgb(204 215 223), hsl(205 23% 84%), oklch(0.873 0.016 239.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Poppy’s Whiskers color name →
#CCD7DF
oklch(0.873 0.016 239.1)
Conversions de couleur
- HEX
- #ccd7df
- RGB
- rgb(204 215 223)
- HSL
- hsl(205 23% 84%)
- HWB
- hwb(205 80% 13%)
- OKLCH
- oklch(0.873 0.016 239.1)
- OKLab
- oklab(0.873 -0.008 -0.014)
- CIE Lab
- lab(85.31 -2.7 -5.3)
- LCH
- lch(85.31 5.95 243)
- CMYK
- cmyk(9% 4% 0% 13%)
Teintes · Ombres · Tons
Teintes
- D1DBE2
- D6DFE5
- DBE3E9
- E0E7EC
- E5EBEF
- EAEFF2
- F0F3F5
- F5F7F9
- FAFBFC
Ombres
- B1BBC2
- 979FA5
- 7E858A
- 656B6F
- 4E5256
- 373B3D
- 222527
- 0F1112
- 020202
Tons
- C4CED5
- BCC5CB
- B5BCC2
- ADB3B8
- A5AAAE
- 9EA2A5
- 96999B
- 8F9192
- 878889
Harmonies de couleurs
Complémentaire +180°
- CCD7DF
Poppy’s Whiskers
- DED3CB
≈ Warm Fog
Analogue -30° +30°
- CCD7DF
Poppy’s Whiskers
- CAD8DB
≈ Wan Blue
- D1D5E0
≈ Hint of Violet
Triadique +120° +240°
- CCD7DF
Poppy’s Whiskers
- DFD1D5
≈ Secret Blush
- D4D7CB
≈ Luna
Complémentaire divisée +150° +210°
- CCD7DF
Poppy’s Whiskers
- E0D2CF
≈ Light Lavender Blush
- D9D5C9
≈ Gilded Linen
Tétradique +90° +180° +270°
- CCD7DF
Poppy’s Whiskers
- DCD2DB
≈ Timid Violet
- DED3CB
≈ Warm Fog
- CED8D0
≈ Serene Journey
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.46:1 · APCA Lc 22
Ag
AAASur noir
WCAG 14.35:1 · APCA Lc 81
Meilleure couleur de texte: #000000
WCAG 14.35:1 (AAA) · APCA Lc 81
Contrast pairs
Extraits de code
CSS
:root {
--poppy-s-whiskers: #ccd7df;
--poppy-s-whiskers-rgb: 204 215 223;
--poppy-s-whiskers-oklch: oklch(0.873 0.016 239.1);
}
.element {
color: var(--poppy-s-whiskers);
background-color: hsl(205 23% 84%);
border-color: oklch(0.873 0.016 239.1);
}Tailwind CSS v4
@theme {
--color-poppy-s-whiskers: #ccd7df;
--color-poppy-s-whiskers-50: #f1f6f9;
--color-poppy-s-whiskers-100: #e3e9ed;
--color-poppy-s-whiskers-200: #ced5db;
--color-poppy-s-whiskers-300: #b0b9bf;
--color-poppy-s-whiskers-400: #96a0a7;
--color-poppy-s-whiskers-500: #7d8890;
--color-poppy-s-whiskers-600: #6a737a;
--color-poppy-s-whiskers-700: #545c61;
--color-poppy-s-whiskers-800: #3d4347;
--color-poppy-s-whiskers-900: #2a2e31;
--color-poppy-s-whiskers-950: #181b1d;
}SCSS
$poppy-s-whiskers: #ccd7df;
$poppy-s-whiskers-rgb: 204, 215, 223;
$poppy-s-whiskers-light: mix(#fff, $poppy-s-whiskers, 20%);
$poppy-s-whiskers-dark: mix(#000, $poppy-s-whiskers, 20%);
.element {
color: $poppy-s-whiskers;
box-shadow: 0 0 0 2px rgba($poppy-s-whiskers, 0.35);
}