Nazwany kolor · #D1C0DC
Girl Crush
Girl Crush to #D1C0DC: rgb(209 192 220), hsl(276 29% 81%), oklch(0.831 0.043 312.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Girl Crush color name →
#D1C0DC
oklch(0.831 0.043 312.3)
Konwersje koloru
- HEX
- #d1c0dc
- RGB
- rgb(209 192 220)
- HSL
- hsl(276 29% 81%)
- HWB
- hwb(276 75% 14%)
- OKLCH
- oklch(0.831 0.043 312.3)
- OKLab
- oklab(0.831 0.029 -0.032)
- CIE Lab
- lab(79.79 10 -11.76)
- LCH
- lch(79.79 15.44 310.4)
- CMYK
- cmyk(5% 13% 0% 14%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D6C6E0
- DACCE3
- DFD3E7
- E3D9EA
- E8DFEE
- ECE6F1
- F1ECF5
- F6F2F8
- FAF9FC
Odcienie ciemniejsze
- B5A7BF
- 9B8EA3
- 817688
- 685F6E
- 504954
- 39343C
- 232026
- 100E11
- 020202
Tony
- C9B9D2
- C0B3C9
- B8ACC0
- B0A6B6
- A89FAD
- A099A4
- 98939B
- 908C92
- 888689
Harmonie kolorów
Komplementarna +180°
- D1C0DC
Girl Crush
- BDCEB2
≈ Kiss of Mint
Analogowa -30° +30°
- D1C0DC
Girl Crush
- C3C5E3
≈ Powdered Granite
- DCBDCF
≈ Creamy Berry
Triada +120° +240°
- D1C0DC
Girl Crush
- D9C4AA
≈ Elafonisi Beach
- A8D1CF
≈ Blue Angora
Komplementarna rozszczepiona +150° +210°
- D1C0DC
Girl Crush
- CCC9AA
≈ Thistle Green
- B0D1BF
≈ Gossamer Green
Tetrada +90° +180° +270°
- D1C0DC
Girl Crush
- E1BFB2
≈ Adorable
- BDCEB2
≈ Kiss of Mint
- AACEDC
≈ Early September
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.70:1 · APCA Lc 31
Ag
AAANa czerni
WCAG 12.28:1 · APCA Lc 72
Najlepszy kolor tekstu: #000000
WCAG 12.28:1 (AAA) · APCA Lc 72
Contrast pairs
Fragmenty kodu
CSS
:root {
--girl-crush: #d1c0dc;
--girl-crush-rgb: 209 192 220;
--girl-crush-oklch: oklch(0.831 0.043 312.3);
}
.element {
color: var(--girl-crush);
background-color: hsl(276 29% 81%);
border-color: oklch(0.831 0.043 312.3);
}Tailwind CSS v4
@theme {
--color-girl-crush: #d1c0dc;
--color-girl-crush-50: #faf2fe;
--color-girl-crush-100: #ede4f2;
--color-girl-crush-200: #dbcfe1;
--color-girl-crush-300: #c0b1c7;
--color-girl-crush-400: #a798b1;
--color-girl-crush-500: #907e9b;
--color-girl-crush-600: #7a6b83;
--color-girl-crush-700: #615669;
--color-girl-crush-800: #473e4e;
--color-girl-crush-900: #312b36;
--color-girl-crush-950: #1d1821;
}SCSS
$girl-crush: #d1c0dc;
$girl-crush-rgb: 209, 192, 220;
$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);
}