Nazwany kolor · #BAB8D3
Purple Heather
Purple Heather to #BAB8D3: rgb(186 184 211), hsl(244 23% 77%), oklch(0.793 0.038 288.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Purple mean? → · Purple Heather color name →
#BAB8D3
oklch(0.793 0.038 288.9)
Konwersje koloru
- HEX
- #bab8d3
- RGB
- rgb(186 184 211)
- HSL
- hsl(244 23% 77%)
- HWB
- hwb(244 72% 17%)
- OKLCH
- oklch(0.793 0.038 288.9)
- OKLab
- oklab(0.793 0.012 -0.036)
- CIE Lab
- lab(75.6 4.7 -13.38)
- LCH
- lch(75.6 14.19 289.3)
- CMYK
- cmyk(12% 13% 0% 17%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C1BFD7
- C7C6DC
- CECDE0
- D5D4E5
- DCDBE9
- E3E2ED
- EAE9F2
- F1F1F6
- F8F8FB
Odcienie ciemniejsze
- A1A0B7
- 89889C
- 727182
- 5C5B69
- 464551
- 32313A
- 1E1E24
- 0D0C10
- 020202
Tony
- B4B2CA
- AEADC2
- A8A7B9
- A2A1B1
- 9C9CA9
- 9796A0
- 919098
- 8B8B90
- 868588
Harmonie kolorów
Komplementarna +180°
- BAB8D3
Purple Heather
- BDBEA2
≈ Quiet Waters
Analogowa -30° +30°
- BAB8D3
Purple Heather
- ADBDD4
≈ Supremely Cool
- C6B4CB
≈ Lavender Fog
Triada +120° +240°
- BAB8D3
Purple Heather
- D1B5A7
≈ Sashay Sand
- A5C4B7
≈ Kind Green
Komplementarna rozszczepiona +150° +210°
- BAB8D3
Purple Heather
- C9B9A1
≈ Grain Brown
- B0C2AA
≈ Desolace Dew
Tetrada +90° +180° +270°
- BAB8D3
Purple Heather
- D3B2B2
≈ Mary Rose
- BDBEA2
≈ Quiet Waters
- A0C3C5
≈ Ocean Kiss
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.92:1 · APCA Lc 37
Ag
AAANa czerni
WCAG 10.88:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.88:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--purple-heather: #bab8d3;
--purple-heather-rgb: 186 184 211;
--purple-heather-oklch: oklch(0.793 0.038 288.9);
}
.element {
color: var(--purple-heather);
background-color: hsl(244 23% 77%);
border-color: oklch(0.793 0.038 288.9);
}Tailwind CSS v4
@theme {
--color-purple-heather: #bab8d3;
--color-purple-heather-50: #f5f3ff;
--color-purple-heather-100: #e7e6f4;
--color-purple-heather-200: #d4d2e4;
--color-purple-heather-300: #b7b4ca;
--color-purple-heather-400: #9d9bb4;
--color-purple-heather-500: #85829e;
--color-purple-heather-600: #706e86;
--color-purple-heather-700: #5a586b;
--color-purple-heather-800: #41414f;
--color-purple-heather-900: #2d2d37;
--color-purple-heather-950: #1a1a22;
}SCSS
$purple-heather: #bab8d3;
$purple-heather-rgb: 186, 184, 211;
$purple-heather-light: mix(#fff, $purple-heather, 20%);
$purple-heather-dark: mix(#000, $purple-heather, 20%);
.element {
color: $purple-heather;
box-shadow: 0 0 0 2px rgba($purple-heather, 0.35);
}