이름 색상 · #CCBBE3
Drifting Dream
Drifting Dream은(는) #CCBBE3: rgb(204 187 227), hsl(266 42% 81%), oklch(0.819 0.058 304.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Purple mean? → · Drifting Dream color name →
#CCBBE3
oklch(0.819 0.058 304.4)
색상 변환
- HEX
- #ccbbe3
- RGB
- rgb(204 187 227)
- HSL
- hsl(266 42% 81%)
- HWB
- hwb(266 73% 11%)
- OKLCH
- oklch(0.819 0.058 304.4)
- OKLab
- oklab(0.819 0.033 -0.048)
- CIE Lab
- lab(78.3 11.85 -17.79)
- LCH
- lch(78.3 21.37 303.7)
- CMYK
- cmyk(10% 18% 0% 11%)
틴트 · 셰이드 · 톤
틴트
- D1C2E6
- D6C8E9
- DBCFEC
- E0D6EE
- E5DDF1
- EAE4F4
- EFEAF7
- F5F1FA
- FAF8FC
셰이드
- B1A2C5
- 978AA8
- 7E738C
- 655C71
- 4E4657
- 37323F
- 221F27
- 0F0D12
- 020203
톤
- C4B5D9
- BCAFCF
- B5A9C4
- ADA3BA
- A59DB0
- 9E97A7
- 96919D
- 8F8C93
- 87868A
색 조화
보색 +180°
- CCBBE3
Drifting Dream
- BBCBA2
≈ Gleam
유사색 -30° +30°
- CCBBE3
Drifting Dream
- B8C2EA
≈ Larkspur Bud
- DCB6D3
≈ French Lilac
삼각 배색 +120° +240°
- CCBBE3
Drifting Dream
- DFBD9D
≈ Only Natural
- 99D1C8
≈ Opal Turquoise
분열 보색 +150° +210°
- CCBBE3
Drifting Dream
- D0C499
≈ Winter Mood
- A7CFB3
≈ Feather Green
사각 배색 +90° +180° +270°
- CCBBE3
Drifting Dream
- E7B7AB
≈ Pink Cocoa
- BBCBA2
≈ Gleam
- 99CEDB
≈ Blue Stream
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.78:1 · APCA Lc 33
Ag
AAA검은색 위
WCAG 11.78:1 · APCA Lc 70
가장 좋은 글자색: #000000
WCAG 11.78:1 (AAA) · APCA Lc 70
Contrast pairs
코드 스니펫
CSS
:root {
--drifting-dream: #ccbbe3;
--drifting-dream-rgb: 204 187 227;
--drifting-dream-oklch: oklch(0.819 0.058 304.4);
}
.element {
color: var(--drifting-dream);
background-color: hsl(266 42% 81%);
border-color: oklch(0.819 0.058 304.4);
}Tailwind CSS v4
@theme {
--color-drifting-dream: #ccbbe3;
--color-drifting-dream-50: #f9f1ff;
--color-drifting-dream-100: #ede3f8;
--color-drifting-dream-200: #dacee8;
--color-drifting-dream-300: #bfb0cf;
--color-drifting-dream-400: #a696bb;
--color-drifting-dream-500: #8f7da6;
--color-drifting-dream-600: #796a8c;
--color-drifting-dream-700: #615470;
--color-drifting-dream-800: #463e53;
--color-drifting-dream-900: #312a3a;
--color-drifting-dream-950: #1d1824;
}SCSS
$drifting-dream: #ccbbe3;
$drifting-dream-rgb: 204, 187, 227;
$drifting-dream-light: mix(#fff, $drifting-dream, 20%);
$drifting-dream-dark: mix(#000, $drifting-dream, 20%);
.element {
color: $drifting-dream;
box-shadow: 0 0 0 2px rgba($drifting-dream, 0.35);
}