Named color · #FE86A4
Rosa
Rosa is #FE86A4: rgb(254 134 164), hsl(345 98% 76%), oklch(0.761 0.148 5.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Rosa color name →
#FE86A4
oklch(0.761 0.148 5.3)
Color conversions
- HEX
- #fe86a4
- RGB
- rgb(254 134 164)
- HSL
- hsl(345 98% 76%)
- HWB
- hwb(345 53% 0%)
- OKLCH
- oklch(0.761 0.148 5.3)
- OKLab
- oklab(0.761 0.147 0.014)
- CIE Lab
- lab(70.45 48.73 5.98)
- LCH
- lch(70.45 49.1 7)
- CMYK
- cmyk(0% 47% 35% 0%)
Tints · Shades · Tones
Tints
- FF93AD
- FF9FB6
- FFACBF
- FFB8C8
- FFC4D1
- FFD0DA
- FFDCE3
- FFE7EC
- FFF3F6
Shades
- DD748E
- BD6279
- 9E5164
- 804050
- 63303D
- 47212B
- 2D131A
- 16060A
- 030101
Tones
- F286A0
- E5869D
- D98699
- CD8695
- C08592
- B4858E
- A7848B
- 9A8387
- 8D8184
Color harmonies
Complementary +180°
- FE86A4
Rosa
- 00CCBD
≈ Pristine Oceanic
Analogous -30° +30°
Triadic +120° +240°
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.29:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.16:1 · APCA Lc 57
Best text color: #000000
WCAG 9.16:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--rosa: #fe86a4;
--rosa-rgb: 254 134 164;
--rosa-oklch: oklch(0.761 0.148 5.3);
}
.element {
color: var(--rosa);
background-color: hsl(345 98% 76%);
border-color: oklch(0.761 0.148 5.3);
}Tailwind CSS v4
@theme {
--color-rosa: #fe86a4;
--color-rosa-50: #ffe4ed;
--color-rosa-100: #ffd4df;
--color-rosa-200: #ffbac9;
--color-rosa-300: #f896aa;
--color-rosa-400: #e57692;
--color-rosa-500: #d35478;
--color-rosa-600: #b24866;
--color-rosa-700: #8f3951;
--color-rosa-800: #6a283d;
--color-rosa-900: #4b1b2a;
--color-rosa-950: #310b18;
}SCSS
$rosa: #fe86a4;
$rosa-rgb: 254, 134, 164;
$rosa-light: mix(#fff, $rosa, 20%);
$rosa-dark: mix(#000, $rosa, 20%);
.element {
color: $rosa;
box-shadow: 0 0 0 2px rgba($rosa, 0.35);
}