Named color · #BB2200
Ravishing Rouge
Ravishing Rouge is #BB2200: rgb(187 34 0), hsl(11 100% 37%), oklch(0.512 0.191 32.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Ravishing Rouge color name →
#BB2200
oklch(0.512 0.191 32.5)
Color conversions
- HEX
- #bb2200
- RGB
- rgb(187 34 0)
- HSL
- hsl(11 100% 37%)
- HWB
- hwb(11 0% 27%)
- OKLCH
- oklch(0.512 0.191 32.5)
- OKLab
- oklab(0.512 0.161 0.103)
- CIE Lab
- lab(41.54 58.83 55.73)
- LCH
- lch(41.54 81.04 43.4)
- CMYK
- cmyk(0% 82% 100% 27%)
Tints · Shades · Tones
Tints
- C54129
- CE5943
- D7705B
- DF8572
- E69989
- ECAEA0
- F2C2B7
- F7D6CF
- FBEBE7
Shades
- A21C00
- 8A1600
- 731100
- 5C0B00
- 460700
- 320300
- 1F0100
- 0D0000
- 020000
Tones
- B7331C
- B3402B
- AE4B38
- A95444
- A35D4F
- 9E6559
- 976C63
- 90736D
- 897A76
Color harmonies
Complementary +180°
- BB2200
Ravishing Rouge
- 007385
≈ Glamour Green
Analogous -30° +30°
- BB2200
Ravishing Rouge
- B61B5D
≈ Murderous Magenta
- 955400
≈ Mochaccino
Triadic +120° +240°
- BB2200
Ravishing Rouge
- 007B3E
≈ Jordan Jazz
- 4655D2
≈ Gorgonzola Blue
Split-complementary +150° +210°
- BB2200
Ravishing Rouge
- 00776B
≈ Hawk Turquoise
- 006DA6
≈ Bowen Blue
Tetradic +90° +180° +270°
- BB2200
Ravishing Rouge
- 5A7100
≈ Over the Hills
- 007385
≈ Glamour Green
- 7D3FBF
≈ Purple Rain
Contrast & accessibility
Ag
AAOn white
WCAG 6.28:1 · APCA Lc 79
Ag
FailOn black
WCAG 3.34:1 · APCA Lc 22
Best text color: #FFFFFF
WCAG 6.28:1 (AA) · APCA Lc 79
Contrast pairs
Code snippets
CSS
:root {
--ravishing-rouge: #bb2200;
--ravishing-rouge-rgb: 187 34 0;
--ravishing-rouge-oklch: oklch(0.512 0.191 32.5);
}
.element {
color: var(--ravishing-rouge);
background-color: hsl(11 100% 37%);
border-color: oklch(0.512 0.191 32.5);
}Tailwind CSS v4
@theme {
--color-ravishing-rouge: #bb2200;
--color-ravishing-rouge-50: #ffe2d1;
--color-ravishing-rouge-100: #ffd1bd;
--color-ravishing-rouge-200: #ffb69d;
--color-ravishing-rouge-300: #ff9073;
--color-ravishing-rouge-400: #fa6b50;
--color-ravishing-rouge-500: #e94021;
--color-ravishing-rouge-600: #c5381f;
--color-ravishing-rouge-700: #9e2d18;
--color-ravishing-rouge-800: #771e13;
--color-ravishing-rouge-900: #54140c;
--color-ravishing-rouge-950: #380402;
}SCSS
$ravishing-rouge: #bb2200;
$ravishing-rouge-rgb: 187, 34, 0;
$ravishing-rouge-light: mix(#fff, $ravishing-rouge, 20%);
$ravishing-rouge-dark: mix(#000, $ravishing-rouge, 20%);
.element {
color: $ravishing-rouge;
box-shadow: 0 0 0 2px rgba($ravishing-rouge, 0.35);
}