Benannte Farbe · #A76372
Heather Rose
Heather Rose ist #A76372: rgb(167 99 114), hsl(347 28% 52%), oklch(0.58 0.09 6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Red mean? → · Heather Rose color name →
#A76372
oklch(0.58 0.09 6)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- B1727F
- BA818C
- C3909A
- CCA0A8
- D5AFB6
- DEBFC4
- E6CFD3
- EFDFE1
- F7EFF0
Shades
- 915562
- 7B4753
- 663A44
- 522E36
- 3E2128
- 2C161B
- 1A0B0E
- 0A0304
- 010001
Tones
- A46673
- A06975
- 9D6D76
- 997078
- 957279
- 91757A
- 8D787C
- 897B7D
- 857D7F
Farbharmonien
Komplementär +180°
- A76372
Heather Rose
- 298B82
≈ Copper Turquoise
Analog -30° +30°
- A76372
Heather Rose
- 9C658E
≈ Berry Pretty
- A86655
≈ Rust Coloured
Triadisch +120° +240°
- A76372
Heather Rose
- 6D8447
≈ Happy Camper
- 4B7FAC
≈ Neapolitan Blue
Geteilt komplementär +150° +210°
- A76372
Heather Rose
- 4A8A64
≈ Mallard Green
- 2A879C
≈ Precious Stone
Tetradisch +90° +180° +270°
- A76372
Heather Rose
- 8A7A37
≈ Baikō Brown
- 298B82
≈ Copper Turquoise
- 6C75AF
≈ Regal Azure
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.49:1 · APCA Lc 71
Ag
AAAuf Schwarz
WCAG 4.67:1 · APCA Lc 31
Beste Textfarbe: #000000
WCAG 4.67:1 (AA) · APCA Lc 31
Contrast pairs
Code-Snippets
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);
}