#EA6A97

Accessibility

AAA

7.01:1

Vs white / black

3:1 · 7.01:1

Sources

Library color

Codes

Formats

HEX

#ea6a97

RGB

rgb(234, 106, 151)

RGBA

rgba(234, 106, 151, 1)

HSL

hsl(339, 75%, 67%)

HSLA

hsla(339, 75%, 67%, 1)

HSV

hsv(339, 55%, 92%)

LAB

lab(61.69% 53.89 -0.01)

LCH

lch(61.69% 53.89 359.99)

OKLAB

oklab(0.691 0.1641 0.0006)

OKLCH

oklch(0.691 0.1641 0.21)

XYZ

xyz(44.67, 30.04, 32.72)

CMYK

cmyk(0%, 55%, 35%, 8%)

CSS

color: #ea6a97;

CSS variable

--color-ea6a97: #ea6a97;

SCSS

$color-ea6a97: #ea6a97;

JavaScript

const color = "#ea6a97";

TypeScript

const color: string = "#ea6a97";

React

style={{ backgroundColor: "#ea6a97" }}

JSON

{ "hex": "#ea6a97", "rgb": { "r": 234, "g": 106, "b": 151 }, "oklch": "oklch(0.691 0.1641 0.21)" }

Export

Developer code

css

:root {
  --#ea6a97-1: #ea6a97;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

pink-400

Very different · ΔE 6.31 · #F472B6

Nearest CSS named color

PaleVioletRed

Noticeably different · ΔE 2.77 · #DB7093

Nearest Material color

pink-300

Similar · ΔE 1.79 · #F06292

Nearest Bootstrap color

danger

Very different · ΔE 18.46 · #DC3545

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffdaf2 100ffcae5 200ffb0d0 300ff93b9 400f1709d 500d15482 600b1446c 7008f3456 800702541 90051162d 950360319

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fdf3f6 fce6ee fadae5 f8cddc f6c1d4 f5b5cb f3a8c2 f19cba ef8fb1 ee83a8 ec76a0 ea6a97 d7618a c3587e b05071 9c4765 883e58 75354c 612c3f 4e2332 3b1b26 271219 14090d

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fdf3f6 fce6ee fadae5 f8cddc f6c1d4 f5b5cb f3a8c2 f19cba ef8fb1 ee83a8 ec76a0

Palette

Shades

Mixed toward black — depth, text, and emphasis

d7618a c3587e b05071 9c4765 883e58 75354c 612c3f 4e2332 3b1b26 271219 14090d

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

e16c95 d86e93 d07091 c7718f be738d b5758c ac778a a37988 9b7b86 927c84 897e82

Harmony

Complementary

Opposite on the color wheel for contrast

#EA6A97Stop 1 #6CEABEStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#EA6CD7Stop 1 #EA6A97Stop 2 #EA7F6CStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#EA6A97Stop 1 #98EA6CStop 2 #6C98EAStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#EA6A97Stop 1 #6CEA7FStop 2 #6CD7EAStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#590D28Stop 1 #9C1645Stop 2 #DF2063Stop 3 #E96392Stop 4 #F2A6C1Stop 5

Using this color

Where #ea6a97 works

#EA6A97 (#ea6a97) sits in the red family at about 339° hue, 75% saturation, and 67% lightness. Contrast is 3:1 on white and 7.01:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: pink-400 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #ea6a97 as small body text on white — 3:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Material Pink 300#F06292 PaleVioletRed#DB7093 Web Safe #FF6699#FF6699 Chakra pink 500#ED64A6 Pico-8 Pink#FD79A8 HotPink#FF69B4 Tailwind pink 400#F472B6 Tailwind pink 500#EC4899 Web Safe #CC6699#CC6699 Chakra pink 400#F687B3 Prunus Avium#E84393 Web Safe #FF3399#FF3399

Where #ea6a97 works

Sensible jobs for this swatch

supporting UI accents

large titles on light backgrounds (WCAG AA Large)

text or icons on charcoal / dark mode

Do not use #ea6a97 as small body text on white — 3:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.