En yakın adlandırılmış renk · #CCBCD6
#CCBCD6
En yakın adlandırılmış renk: Girl Crush
#CCBCD6 (rgb(204 188 214), hsl(277 24% 79%), oklch(0.817 0.04 312.6)) en çok Girl Crush adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#CCBCD6
oklch(0.817 0.04 312.6)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D1C3DA
- D6C9DE
- DBD0E2
- E0D6E6
- E5DDEA
- EAE4EF
- F0EBF3
- F5F1F7
- FAF8FB
Koyu tonlar
- B1A3BA
- 978B9E
- 7E7384
- 655D6A
- 4E4752
- 37323B
- 221F25
- 0F0D10
- 020202
Gri tonlar
- C4B6CD
- BCB0C4
- B5AABB
- ADA4B3
- A59EAA
- 9E98A2
- 969299
- 8F8C91
- 878688
Renk uyumları
Tamamlayıcı +180°
- CCBCD6
Girl Crush
- B9C9AF
≈ Topiary Tint
Analog -30° +30°
- CCBCD6
Girl Crush
- BFC0DD
≈ Rhapsody Lilac
- D6B9CA
≈ Spring Boutique
Üçlü +120° +240°
- CCBCD6
Girl Crush
- D3C0A7
≈ Baja
- A6CCCA
≈ Mystery
Bölünmüş tamamlayıcı +150° +210°
- CCBCD6
Girl Crush
- C7C5A7
≈ Cargo Green
- ADCCBB
≈ Greywacke
Dörtlü +90° +180° +270°
- CCBCD6
Girl Crush
- DBBBAF
≈ One to Remember
- B9C9AF
≈ Topiary Tint
- A8C9D6
≈ Vast Sky
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.79:1 · APCA Lc 33
Ag
AAASiyah üzerinde
WCAG 11.73:1 · APCA Lc 70
En iyi metin rengi: #000000
WCAG 11.73:1 (AAA) · APCA Lc 70
Contrast pairs
Kod parçacıkları
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);
}