Benoemde kleur · #CCBBE3
Drifting Dream
Drifting Dream is #CCBBE3: rgb(204 187 227), hsl(266 42% 81%), oklch(0.819 0.058 304.4). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Purple mean? → · Drifting Dream color name →
#CCBBE3
oklch(0.819 0.058 304.4)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- D1C2E6
- D6C8E9
- DBCFEC
- E0D6EE
- E5DDF1
- EAE4F4
- EFEAF7
- F5F1FA
- FAF8FC
Schaduwen
- B1A2C5
- 978AA8
- 7E738C
- 655C71
- 4E4657
- 37323F
- 221F27
- 0F0D12
- 020203
Tonen
- C4B5D9
- BCAFCF
- B5A9C4
- ADA3BA
- A59DB0
- 9E97A7
- 96919D
- 8F8C93
- 87868A
Kleurharmonieën
Complementair +180°
- CCBBE3
Drifting Dream
- BBCBA2
≈ Gleam
Analoog -30° +30°
- CCBBE3
Drifting Dream
- B8C2EA
≈ Larkspur Bud
- DCB6D3
≈ French Lilac
Triadisch +120° +240°
- CCBBE3
Drifting Dream
- DFBD9D
≈ Only Natural
- 99D1C8
≈ Opal Turquoise
Gesplitst complementair +150° +210°
- CCBBE3
Drifting Dream
- D0C499
≈ Winter Mood
- A7CFB3
≈ Feather Green
Tetradisch +90° +180° +270°
- CCBBE3
Drifting Dream
- E7B7AB
≈ Pink Cocoa
- BBCBA2
≈ Gleam
- 99CEDB
≈ Blue Stream
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.78:1 · APCA Lc 33
Ag
AAAOp zwart
WCAG 11.78:1 · APCA Lc 70
Beste tekstkleur: #000000
WCAG 11.78:1 (AAA) · APCA Lc 70
Contrast pairs
Codefragmenten
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);
}