이름 색상 · #CCD4EC
Garden Fairy
Garden Fairy은(는) #CCD4EC: rgb(204 212 236), hsl(225 46% 86%), oklch(0.871 0.034 271). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Garden Fairy color name →
#CCD4EC
oklch(0.871 0.034 271)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- D1D8EE
- D6DDF0
- DBE1F2
- E0E5F4
- E5E9F6
- EAEEF8
- EFF2F9
- F5F6FB
- FAFBFD
셰이드
- B1B8CD
- 979DAF
- 7E8392
- 656976
- 4E515B
- 373A42
- 222429
- 0F1013
- 020203
톤
- C4CBE1
- BCC3D6
- B5BACA
- ADB2BF
- A5A9B5
- 9EA1AA
- 96989F
- 8F9095
- 87888A
색 조화
보색 +180°
- CCD4EC
Garden Fairy
- DDD4BC
≈ Gunny Sack
유사색 -30° +30°
- CCD4EC
Garden Fairy
- C1D8EA
≈ Light Featherbed
- D8D0E8
≈ Air Castle
삼각 배색 +120° +240°
- CCD4EC
Garden Fairy
- EACDC7
≈ Honeysweet
- C5DBC9
≈ Clearly Aqua
분열 보색 +150° +210°
- CCD4EC
Garden Fairy
- E6D0BE
≈ Autumn Blush
- D1D8C0
≈ Celery Satin
사각 배색 +90° +180° +270°
- CCD4EC
Garden Fairy
- E9CCD3
≈ Pink Pail
- DDD4BC
≈ Gunny Sack
- BDDCD6
≈ Picnic Bay
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.47:1 · APCA Lc 23
Ag
AAA검은색 위
WCAG 14.19:1 · APCA Lc 81
가장 좋은 글자색: #000000
WCAG 14.19:1 (AAA) · APCA Lc 81
Contrast pairs
코드 스니펫
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);
}