Adlandırılmış renk · #A76372
Heather Rose
Heather Rose, #A76372: rgb(167 99 114), hsl(347 28% 52%), oklch(0.58 0.09 6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Heather Rose color name →
#A76372
oklch(0.58 0.09 6)
Renk dönüşümleri
- HEX
- #a76372
- RGB
- rgb(167 99 114)
- HSL
- hsl(347 28% 52%)
- HWB
- hwb(347 39% 35%)
- OKLCH
- oklch(0.58 0.09 6)
- OKLab
- oklab(0.58 0.089 0.009)
- CIE Lab
- lab(50.17 29.57 3.99)
- LCH
- lch(50.17 29.84 7.7)
- CMYK
- cmyk(0% 41% 32% 35%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- B1727F
- BA818C
- C3909A
- CCA0A8
- D5AFB6
- DEBFC4
- E6CFD3
- EFDFE1
- F7EFF0
Koyu tonlar
- 915562
- 7B4753
- 663A44
- 522E36
- 3E2128
- 2C161B
- 1A0B0E
- 0A0304
- 010001
Gri tonlar
- A46673
- A06975
- 9D6D76
- 997078
- 957279
- 91757A
- 8D787C
- 897B7D
- 857D7F
Renk uyumları
Tamamlayıcı +180°
- A76372
Heather Rose
- 298B82
≈ Copper Turquoise
Analog -30° +30°
- A76372
Heather Rose
- 9C658E
≈ Berry Pretty
- A86655
≈ Rust Coloured
Üçlü +120° +240°
- A76372
Heather Rose
- 6D8447
≈ Happy Camper
- 4B7FAC
≈ Neapolitan Blue
Bölünmüş tamamlayıcı +150° +210°
- A76372
Heather Rose
- 4A8A64
≈ Mallard Green
- 2A879C
≈ Precious Stone
Dörtlü +90° +180° +270°
- A76372
Heather Rose
- 8A7A37
≈ Baikō Brown
- 298B82
≈ Copper Turquoise
- 6C75AF
≈ Regal Azure
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.49:1 · APCA Lc 71
Ag
AASiyah üzerinde
WCAG 4.67:1 · APCA Lc 31
En iyi metin rengi: #000000
WCAG 4.67:1 (AA) · APCA Lc 31
Contrast pairs
Kod parçacıkları
CSS
:root {
--heather-rose: #a76372;
--heather-rose-rgb: 167 99 114;
--heather-rose-oklch: oklch(0.58 0.09 6);
}
.element {
color: var(--heather-rose);
background-color: hsl(347 28% 52%);
border-color: oklch(0.58 0.09 6);
}Tailwind CSS v4
@theme {
--color-heather-rose: #a76372;
--color-heather-rose-50: #ffebf0;
--color-heather-rose-100: #ffdce2;
--color-heather-rose-200: #f7c5cd;
--color-heather-rose-300: #e1a5af;
--color-heather-rose-400: #cc8896;
--color-heather-rose-500: #b86c7d;
--color-heather-rose-600: #9c5c6a;
--color-heather-rose-700: #7d4955;
--color-heather-rose-800: #5c353f;
--color-heather-rose-900: #41242b;
--color-heather-rose-950: #291318;
}SCSS
$heather-rose: #a76372;
$heather-rose-rgb: 167, 99, 114;
$heather-rose-light: mix(#fff, $heather-rose, 20%);
$heather-rose-dark: mix(#000, $heather-rose, 20%);
.element {
color: $heather-rose;
box-shadow: 0 0 0 2px rgba($heather-rose, 0.35);
}