Coral in OKLCH

Coral is the warm orange-pink CSS named color #FF7F50. Here it is in OKLCH, RGB and as a full tonal palette you can copy or tweak below. 100% in your browser - copy the values or a Tailwind v4 export.

OKLCHoklch(73.5% 0.168 40.2)

HEX#FF7F50

RGBrgb(255 127 80)

sRGB: in gamutDisplay-P3: in gamut

#FF7F50

oklch(73.5% 0.168 40.2)

Lightness73.5%

Chroma0.168

Hue40.2°

sRGB: in gamutDisplay-P3: in gamut

Values

OKLCH

oklch(73.5% 0.168 40.2)

HEX

#FF7F50

RGB

rgb(255 127 80)

Set from hex

Contrast (this color as text)

Aa on whiteWCAG 2.50:1

AA ✗AAA ✗

APCA Lc 48

Aa on blackWCAG 8.40:1

AA ✓AAA ✓

APCA Lc 53

Tonal palette

Tailwind steps · same hue

Export

Name

@theme {
  --color-brand-50: oklch(97.0% 0.115 40.2);
  --color-brand-100: oklch(94.0% 0.120 40.2);
  --color-brand-200: oklch(88.0% 0.129 40.2);
  --color-brand-300: oklch(80.0% 0.141 40.2);
  --color-brand-400: oklch(70.0% 0.156 40.2);
  --color-brand-500: oklch(62.0% 0.168 40.2);
  --color-brand-600: oklch(54.0% 0.156 40.2);
  --color-brand-700: oklch(46.0% 0.144 40.2);
  --color-brand-800: oklch(38.0% 0.132 40.2);
  --color-brand-900: oklch(30.0% 0.120 40.2);
  --color-brand-950: oklch(22.0% 0.108 40.2);
}

About coral

Coral is a warm, friendly orange-pink that reads as approachable, which is why it turns up so often in lifestyle, food and wellness branding. Because it is a bright, saturated warm hue, watch the gamut badge: some lighter or more chromatic steps can push outside sRGB into Display-P3. Keep the hue steady and adjust lightness to build a soft coral scale, then copy the OKLCH, HEX or RGB value you need.

Coral in CSS: oklch(73.5% 0.168 40.2) · #ff7f50 · rgb(255 127 80)

Frequently Asked Questions

Coral is the CSS named color #FF7F50 (rgb(255, 127, 80)). Its OKLCH equivalent is shown in the readout above and can be copied in one click.

Coral pairs naturally with teal and navy for contrast, or with soft cream and blush tones for a warmer palette. Use the tonal scale above to pull lighter and darker corals for a cohesive set.

Other colors in OKLCH

Rebecca Purple Crimson Teal Hot Pink Gold Navy

Back to the full OKLCH Color Picker

From the blog

accessibility

Coral in OKLCH

Values

Contrast (this color as text)

Tonal palette

Export

About coral

Frequently Asked Questions

Other colors in OKLCH

From the blog

APCA vs. WCAG: Navigating Color Contrast and Accessibility in 2026

Migrating to Tailwind v4: How to Configure Custom OKLCH Color Themes

The Science of Wide-Gamut Web Colors and Gamut Mapping

Values

Contrast (this color as text)

Tonal palette

Export