#DF676E#DF676E

#DF676E is a light, vivid red. Relative luminance 0.265; OKLCH L 66.1% C 0.150 H 18.5°. Best body text is #000000 at 6.30:1 contrast (WCAG AA passes).

Color values

HEX	#DF676E
RGB	rgb(223, 103, 110)
HSL	hsl(357, 65%, 64%)
HSV	hsv(357, 54%, 87%)
CMYK	cmyk(0%, 53.8%, 50.7%, 12.5%)
CIE-LAB	lab(58.53, 47.43, 19.01)
CIE-LCH	lch(58.53, 51.10, 21.84°)
OKLab	oklab(66.07% 0.1423 0.0477)
OKLCH	oklch(66.07% 0.15 18.5)
XYZ	xyz(38.0990, 26.5186, 17.8611)
Luminance	0.2651 (WCAG relative)
Temperature	warm
Family	red

Closest named colors

Perceptual scales

Shades

Tints

Tones

OKLCH scale

Color harmonies

complementary

#DF676E #67DFD8

analogous

#DF67AA #DF676E #DF9C67

triadic

#DF676E #6EDF67 #676EDF

tetradic

#DF676E #AADF67 #67DFD8 #9C67DF

square

#DF676E #AADF67 #67DFD8 #9C67DF

split-complementary

#DF676E #67DF9C #67AADF

monochromatic

#A8232B #D4343E #DF676E #EA9A9E #F4CCCE

Accessibility & contrast

On white

3.33

#DF676E on #FFFFFF

AA ✗AA large ✓AAA ✗

On black

6.30

#DF676E on #000000

AA ✓AA large ✓AAA ✗

Best text color

#000000 on #DF676E

6.30:1 — WCAG AA (normal text) passes

Contrast matrix

fg \ bg	##DF676E	#FFFFFF	#000000	##000000
##DF676E	1.00	3.33	6.30	6.30
#FFFFFF	3.33	1.00	21.00	21.00
#000000	6.30	21.00	1.00	1.00
##000000	6.30	21.00	1.00	1.00

Color blindness preview

Protanopia (red-blind)

#827D6E

Deuteranopia (green-blind)

#A0966B

Tritanopia (blue-blind)

#F2556A

Achromatopsia (no color)

#8D8D8D

Design tokens & code

CSS

--color: #df676e;
/* rgb */ color: rgb(223, 103, 110);
/* oklch */ color: oklch(66.1% 0.150 18.5);

Tailwind

colors: {
  custom: {
    50: '#ee9697',
    500: '#df676e',
    950: '#000000',
  },
}

SCSS

$custom: #df676e;
$custom-light: #ee9697;
$custom-dark: #000000;

JSON

{
  "hex": "#df676e",
  "rgb": {
    "r": 223,
    "g": 103,
    "b": 110
  },
  "hsl": {
    "h": 356.5,
    "s": 65.217,
    "l": 63.922
  },
  "oklch": {
    "l": 0.66074,
    "c": 0.15011,
    "h": 18.5
  },
  "luminance": 0.26514
}

Semantic roles & 50–950 ramp

primary

#DF676E

secondary

#BCE6E3

accent

#CDC318

background

#FFF9F9

surface

#FFF2F2

border

#D7CCCC

text

#170E0D

muted

#857E7E

Preview Lab

Preview with #DF676E

Body copy rendered with the generated semantic roles for this colour.

Preview Lab → · Contrast checker → · Palette generator →