Named color · #FF7777
Embarrassment
Embarrassment is #FF7777: rgb(255 119 119), hsl(0 100% 73%), oklch(0.73 0.166 22.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Embarrassment color name →
#FF7777
oklch(0.73 0.166 22.1)
Color conversions
- HEX
- #ff7777
- RGB
- rgb(255 119 119)
- HSL
- hsl(0 100% 73%)
- HWB
- hwb(0 47% 0%)
- OKLCH
- oklch(0.73 0.166 22.1)
- OKLab
- oklab(0.73 0.154 0.062)
- CIE Lab
- lab(66.97 52.84 26.44)
- LCH
- lch(66.97 59.08 26.6)
- CMYK
- cmyk(0% 53% 53% 0%)
Tints · Shades · Tones
Tints
- FF8684
- FF9492
- FFA29F
- FFB0AC
- FFBDBA
- FFCBC8
- FFD8D5
- FFE5E3
- FFF2F1
Shades
- DE6767
- BE5757
- 9E4747
- 803838
- 632A2A
- 481C1C
- 2E1010
- 160505
- 030101
Tones
- F37978
- E77B79
- DA7D7B
- CE7E7C
- C27F7D
- B5807D
- A8807E
- 9B807F
- 8E807F
Color harmonies
Complementary +180°
- FF7777
Embarrassment
- 00BEC9
≈ Panorama Blue
Analogous -30° +30°
- FF7777
Embarrassment
- F476B2
≈ Pop That Gum
- F78532
≈ Peach Fury
Triadic +120° +240°
- FF7777
Embarrassment
- 63C15A
≈ Range Land
- 77A6FF
≈ Fennel Flower
Split-complementary +150° +210°
- FF7777
Embarrassment
- 00C49D
≈ Jadeite
- 00B6F4
≈ Zima Blue
Tetradic +90° +180° +270°
- FF7777
Embarrassment
- ABB100
≈ Mustard Green
- 00BEC9
≈ Panorama Blue
- AB94FF
≈ Cobalite
Contrast & accessibility
Ag
FailOn white
WCAG 2.57:1 · APCA Lc 50
Ag
AAAOn black
WCAG 8.15:1 · APCA Lc 52
Best text color: #000000
WCAG 8.15:1 (AAA) · APCA Lc 52
Contrast pairs
Code snippets
CSS
:root {
--embarrassment: #ff7777;
--embarrassment-rgb: 255 119 119;
--embarrassment-oklch: oklch(0.73 0.166 22.1);
}
.element {
color: var(--embarrassment);
background-color: hsl(0 100% 73%);
border-color: oklch(0.73 0.166 22.1);
}Tailwind CSS v4
@theme {
--color-embarrassment: #ff7777;
--color-embarrassment-50: #ffe3de;
--color-embarrassment-100: #ffd3cd;
--color-embarrassment-200: #ffb8b2;
--color-embarrassment-300: #ff948d;
--color-embarrassment-400: #f17171;
--color-embarrassment-500: #df4c51;
--color-embarrassment-600: #bc4145;
--color-embarrassment-700: #973437;
--color-embarrassment-800: #712429;
--color-embarrassment-900: #50181c;
--color-embarrassment-950: #35080c;
}SCSS
$embarrassment: #ff7777;
$embarrassment-rgb: 255, 119, 119;
$embarrassment-light: mix(#fff, $embarrassment, 20%);
$embarrassment-dark: mix(#000, $embarrassment, 20%);
.element {
color: $embarrassment;
box-shadow: 0 0 0 2px rgba($embarrassment, 0.35);
}