Named color · #AA1829
Haute Red
Haute Red is #AA1829: rgb(170 24 41), hsl(353 75% 38%), oklch(0.476 0.178 22.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Haute Red color name →
#AA1829
oklch(0.476 0.178 22.5)
Color conversions
- HEX
- #aa1829
- RGB
- rgb(170 24 41)
- HSL
- hsl(353 75% 38%)
- HWB
- hwb(353 9% 33%)
- OKLCH
- oklch(0.476 0.178 22.5)
- OKLab
- oklab(0.476 0.164 0.068)
- CIE Lab
- lab(37.36 56.8 31.96)
- LCH
- lch(37.36 65.18 29.4)
- CMYK
- cmyk(0% 86% 76% 33%)
Tints · Shades · Tones
Tints
- B6393E
- C05252
- CB6967
- D47F7B
- DD9490
- E5A9A6
- EDBEBC
- F3D4D2
- FAE9E8
Shades
- 931322
- 7D0F1C
- 680A15
- 53070F
- 3F0409
- 2D0205
- 1B0102
- 0B0001
- 010000
Tones
- A82C33
- A5393C
- A24545
- 9F4F4D
- 9B5856
- 97615E
- 926967
- 8D716F
- 877978
Color harmonies
Complementary +180°
- AA1829
Haute Red
- 006A70
≈ Deep Lake
Analogous -30° +30°
- AA1829
Haute Red
- A01B66
≈ Morbid Princess
- 904500
≈ Korichnewyi Brown
Triadic +120° +240°
- AA1829
Haute Red
- 007100
≈ Spreadsheet Green
- 2053BE
≈ Cerulean Blue
Split-complementary +150° +210°
- AA1829
Haute Red
- 006D57
≈ Teal Dark Green
- 00658A
≈ Reservoir
Tetradic +90° +180° +270°
- AA1829
Haute Red
- 5E6200
≈ Kirchner Green
- 006A70
≈ Deep Lake
- 633FB5
≈ Swiss Plum
Contrast & accessibility
Ag
AAAOn white
WCAG 7.31:1 · APCA Lc 84
Ag
FailOn black
WCAG 2.87:1 · APCA Lc 18
Best text color: #FFFFFF
WCAG 7.31:1 (AAA) · APCA Lc 84
Contrast pairs
Code snippets
CSS
:root {
--haute-red: #aa1829;
--haute-red-rgb: 170 24 41;
--haute-red-oklch: oklch(0.476 0.178 22.5);
}
.element {
color: var(--haute-red);
background-color: hsl(353 75% 38%);
border-color: oklch(0.476 0.178 22.5);
}Tailwind CSS v4
@theme {
--color-haute-red: #aa1829;
--color-haute-red-50: #ffe2dc;
--color-haute-red-100: #ffd1cb;
--color-haute-red-200: #ffb6ae;
--color-haute-red-300: #ff9189;
--color-haute-red-400: #f56c6c;
--color-haute-red-500: #e4444c;
--color-haute-red-600: #c03c41;
--color-haute-red-700: #9b3034;
--color-haute-red-800: #742127;
--color-haute-red-900: #52161a;
--color-haute-red-950: #36060b;
}SCSS
$haute-red: #aa1829;
$haute-red-rgb: 170, 24, 41;
$haute-red-light: mix(#fff, $haute-red, 20%);
$haute-red-dark: mix(#000, $haute-red, 20%);
.element {
color: $haute-red;
box-shadow: 0 0 0 2px rgba($haute-red, 0.35);
}