Nearest named color · #CCBCD6
#CCBCD6
Nearest named color: Girl Crush
#CCBCD6 (rgb(204 188 214), hsl(277 24% 79%), oklch(0.817 0.04 312.6)) is closest to the named color Girl Crush. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#CCBCD6
oklch(0.817 0.04 312.6)
Color conversions
- HEX
- #ccbcd6
- RGB
- rgb(204 188 214)
- HSL
- hsl(277 24% 79%)
- HWB
- hwb(277 74% 16%)
- OKLCH
- oklch(0.817 0.04 312.6)
- OKLab
- oklab(0.817 0.027 -0.029)
- CIE Lab
- lab(78.21 9.4 -10.94)
- LCH
- lch(78.21 14.43 310.7)
- CMYK
- cmyk(5% 12% 0% 16%)
Tints · Shades · Tones
Tints
- D1C3DA
- D6C9DE
- DBD0E2
- E0D6E6
- E5DDEA
- EAE4EF
- F0EBF3
- F5F1F7
- FAF8FB
Shades
- B1A3BA
- 978B9E
- 7E7384
- 655D6A
- 4E4752
- 37323B
- 221F25
- 0F0D10
- 020202
Tones
- C4B6CD
- BCB0C4
- B5AABB
- ADA4B3
- A59EAA
- 9E98A2
- 969299
- 8F8C91
- 878688
Color harmonies
Complementary +180°
- CCBCD6
Girl Crush
- B9C9AF
≈ Topiary Tint
Analogous -30° +30°
- CCBCD6
Girl Crush
- BFC0DD
≈ Rhapsody Lilac
- D6B9CA
≈ Spring Boutique
Triadic +120° +240°
- CCBCD6
Girl Crush
- D3C0A7
≈ Baja
- A6CCCA
≈ Mystery
Split-complementary +150° +210°
- CCBCD6
Girl Crush
- C7C5A7
≈ Cargo Green
- ADCCBB
≈ Greywacke
Tetradic +90° +180° +270°
- CCBCD6
Girl Crush
- DBBBAF
≈ One to Remember
- B9C9AF
≈ Topiary Tint
- A8C9D6
≈ Vast Sky
Contrast & accessibility
Ag
FailOn white
WCAG 1.79:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.73:1 · APCA Lc 70
Best text color: #000000
WCAG 11.73:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--girl-crush: #ccbcd6;
--girl-crush-rgb: 204 188 214;
--girl-crush-oklch: oklch(0.817 0.04 312.6);
}
.element {
color: var(--girl-crush);
background-color: hsl(277 24% 79%);
border-color: oklch(0.817 0.04 312.6);
}Tailwind CSS v4
@theme {
--color-girl-crush: #ccbcd6;
--color-girl-crush-50: #f9f2fd;
--color-girl-crush-100: #ede4f1;
--color-girl-crush-200: #dbcfe0;
--color-girl-crush-300: #bfb2c6;
--color-girl-crush-400: #a798b0;
--color-girl-crush-500: #8f7f9a;
--color-girl-crush-600: #796b82;
--color-girl-crush-700: #615668;
--color-girl-crush-800: #473f4d;
--color-girl-crush-900: #312b35;
--color-girl-crush-950: #1d1821;
}SCSS
$girl-crush: #ccbcd6;
$girl-crush-rgb: 204, 188, 214;
$girl-crush-light: mix(#fff, $girl-crush, 20%);
$girl-crush-dark: mix(#000, $girl-crush, 20%);
.element {
color: $girl-crush;
box-shadow: 0 0 0 2px rgba($girl-crush, 0.35);
}