Nearest named color · #F56C9E
#F56C9E
Nearest named color: Embarrassed
#F56C9E (rgb(245 108 158), hsl(338 87% 69%), oklch(0.711 0.175 359.6)) is closest to the named color Embarrassed. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F56C9E
oklch(0.711 0.175 359.6)
Color conversions
- HEX
- #f56c9e
- RGB
- rgb(245 108 158)
- HSL
- hsl(338 87% 69%)
- HWB
- hwb(338 42% 4%)
- OKLCH
- oklch(0.711 0.175 359.6)
- OKLab
- oklab(0.711 0.175 -0.001)
- CIE Lab
- lab(64.27 56.98 0.34)
- LCH
- lch(64.27 56.98 0.3)
- CMYK
- cmyk(0% 56% 36% 4%)
Tints · Shades · Tones
Tints
- F87CA7
- FB8CB1
- FD9BBA
- FFAAC4
- FFB8CD
- FFC6D7
- FFD5E1
- FFE3EB
- FFF1F5
Shades
- D55D89
- B64E74
- 984060
- 7B324D
- 5F253A
- 441929
- 2B0D18
- 150409
- 030001
Tones
- EA709B
- DF7398
- D47695
- C87892
- BD7A8F
- B17C8C
- A67D89
- 997E86
- 8D7F83
Color harmonies
Complementary +180°
- F56C9E
Embarrassed
- 00BCA4
≈ Capture
Analogous -30° +30°
- F56C9E
Embarrassed
- DC75D5
≈ Hibiscus Pop
- FC705E
≈ Grapefruit Pulp
Triadic +120° +240°
- F56C9E
Embarrassed
- 96B000
≈ Sickly Green
- 00ADFB
≈ Krishna Blue
Split-complementary +150° +210°
- F56C9E
Embarrassed
- 38BF63
≈ Algal Fuel
- 00B6CB
≈ Lago Blue
Tetradic +90° +180° +270°
- F56C9E
Embarrassed
- C59C00
≈ Molten Bronze
- 00BCA4
≈ Capture
- 7D9BFF
≈ Periwinkle Blue
Contrast & accessibility
Ag
FailOn white
WCAG 2.79:1 · APCA Lc 53
Ag
AAAOn black
WCAG 7.52:1 · APCA Lc 49
Best text color: #000000
WCAG 7.52:1 (AAA) · APCA Lc 49
Contrast pairs
Code snippets
CSS
:root {
--embarrassed: #f56c9e;
--embarrassed-rgb: 245 108 158;
--embarrassed-oklch: oklch(0.711 0.175 359.6);
}
.element {
color: var(--embarrassed);
background-color: hsl(338 87% 69%);
border-color: oklch(0.711 0.175 359.6);
}Tailwind CSS v4
@theme {
--color-embarrassed: #f56c9e;
--color-embarrassed-50: #ffe1f1;
--color-embarrassed-100: #ffd0e4;
--color-embarrassed-200: #ffb5cf;
--color-embarrassed-300: #ff8fb1;
--color-embarrassed-400: #ee6c9b;
--color-embarrassed-500: #db4682;
--color-embarrassed-600: #b93c6e;
--color-embarrassed-700: #953058;
--color-embarrassed-800: #6f2242;
--color-embarrassed-900: #4e162e;
--color-embarrassed-950: #33071b;
}SCSS
$embarrassed: #f56c9e;
$embarrassed-rgb: 245, 108, 158;
$embarrassed-light: mix(#fff, $embarrassed, 20%);
$embarrassed-dark: mix(#000, $embarrassed, 20%);
.element {
color: $embarrassed;
box-shadow: 0 0 0 2px rgba($embarrassed, 0.35);
}