#E5C8CF Pale Red

Q: What color is #E5C8CF?

Pale Red is #E5C8CF, or #E5C8CF in uppercase notation. In RGB it is rgb(229,200,207), in HSL about hsl(346 36% 84%), and in OKLCH oklch(0.859 0.034 1.5).

Q: What does Pale Red symbolize?

It usually stands for energy, warmth and confidence, with a ceremonial edge. Local culture can shift that reading, so check the context.

Q: Where is Pale Red used?

You will see it in Campaign landing pages, Editorial cover systems, Product packaging labels, Dashboard status accents, Retail wayfinding signs. It also appears across food, sport, retail, entertainment.

Q: Which colors go well with Pale Red?

Muted neutrals, deeper steps of the same hue and one metallic accent work well. editorial layouts that need one warm focal point; packaging that should feel appetizing without shouting; interfaces where an accent has to stay legible

Q: How does Pale Red affect mood?

It raises perceived energy and draws the eye quickly. Large fields feel intense, so accent use is safer.

Q: Which industries use Pale Red?

It is common in food, sport, retail, entertainment, particularly where brands want to feel urgent, passionate, bold, appetizing, warm.

Q: What is the history of Pale Red?

The pigment story is concrete: Red reaches the eye before almost any other hue, which is why it carries both appetite and alarm. It gains weight in deep, earthy steps and softens in dusty pinks.

Q: How should I use Pale Red in design?

Give it one focal element, keep body copy neutral and confirm contrast at 1.56 against white and 12.13 against black.

Q: Is Pale Red accessible?

Contrast is 1.56 against white (FAIL) and 12.13 against black (AAA). Use it for large text when the level reaches AA.

Color conversion

CMYK profile: Coated FOGRA39 · Formats follow CSS Color 4 naming and WCAG 2.2 contrast rules.

At a glance

Name	Pale Red
Romanization	Pale Red
Tradition	digital color
Family	Red
HEX	#E5C8CF
RGB	rgb(229,200,207)
HSL	hsl(346 36% 84%)
HSV	hsv(346, 13%, 90%)
OKLCH	oklch(0.859 0.034 1.5)
LAB	lab(83.16 11.33 0.28)
XYZ	64,62,68
CMYK	cmyk(0.0% 12.7% 9.6% 10.2%)
RAL	#E6D2B5 · Light ivory · RAL 1015

About this color

Pale RedReddigital color

Urgency with a pulse

Pale Red is #E5C8CF, a Red tone with a clear cultural lineage. Read on its own it belongs to the Red family; read through its digital color roots, it carries a second layer of meaning.

Design tip

Test Pale Red (#E5C8CF) on a neutral surface first; a Red accent then looks intentional rather than decorative.

Best use

Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.

urgentpassionateboldappetizingwarm

Psychology

How it is perceived

urgentpassionateboldappetizingwarm

Psychological effect

Pale Red raises the perceived energy of a Red composition and pulls the eye toward action.

Emotional impact

It feels immediate and warm, so it can lift a restrained layout without making it loud.

Symbolism

What it stands for

energyappetite and celebration

Cultural significance

In digital color settings the shade carries local references, so verify its symbolism before a campaign.

Positive associations

Positive associations lean toward energy, appetite and celebration, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as danger and aggression when overused, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.
Editorial cover systems: Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.
Product packaging labels: Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.
Dashboard status accents: Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.
Retail wayfinding signs: Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.

Design guidance

How to make it work

Keep saturated fills below about twenty percent of the layout.
Use it for the primary call to action and nothing else.
Check the pairing at small sizes on a neutral background.

Avoid

Do not place it beside clashing neon greens or electric blues.
Never use it for long body text on white.
Avoid gradients that shift its hue into another family.

Brand fit

food, sport, retail, entertainment

Brands built on The Hero, The Lover use it to signal character before they say a word.

Trend signal

Urgency with a pulse

Red reaches the eye before almost any other hue, which is why it carries both appetite and alarm. It gains weight in deep, earthy steps and softens in dusty pinks.

Pairing

Colors that complete it

#BAD8D2editorial layouts that need one warm focal point #AB9096interfaces where an accent has to stay legible #CDD5BCpackaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Pale Red was matched with mineral and plant pigments, and the Red family depended on sources such as ochre, madder and indigo. Screens now reproduce it more consistently than any single pigment ever could.

Variations

Shades darken and tints lighten while the hue angle stays fixed.

Pro tip: Shades darken and tints lighten while the hue angle stays fixed.

Shades

Darker steps built from the same hue.

0% #E5C8CF 10% #CEB4BA 20% #B7A0A6 30% #A08C91 40% #89787C 50% #736468 60% #5C5053 70% #453C3E 80% #2E2829 90% #171415 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #E5C8CF 10% #E8CED4 20% #EAD3D9 30% #EDD9DD 40% #EFDEE2 50% #F2E4E7 60% #F5E9EC 70% #F7EFF1 80% #FAF4F5 90% #FCFAFA 100% #FFFFFF

Design scale 50–950

50#FBF3F5 100#F6E9EC 200#E7D3D8 300#D3BBC1 400#BCA1A8 500#9D8289 600#846B72 700#6C555B 800#534045 900#3C2D31 950#281D20

Dark-mode value (AA): #92787F · 4.68:1

Use cases

Shades → hover, shadows, depth
Tints → highlights, surfaces
Balance → consistent color systems

Design tip

Keep one dominant tone, one supporter and one accent.

Across color systems

The closest named color in each tradition and design system, measured in OKLCH ΔE. Lower means closer.

Asian color traditions

天青 CN ΔE 0.027

Мөнгө MN ΔE 0.048

Putih ID ΔE 0.080

Show all (6)

สีฟ้า TH ΔE 0.082

桜色 JP ΔE 0.092

白云 TB ΔE 0.101

백 KR ΔE 0.119

Trắng VN ΔE 0.119

हल्दी IN ΔE 0.130

Design systems

Brown 6 Radix ΔE 0.006

Slate 300 Tailwind ΔE 0.016

Slate 300 UnoCSS ΔE 0.017

Show all (11)

Slate 300 Panda ΔE 0.017

Gray 300 Chakra ΔE 0.018

Gray 400 Bootstrap ΔE 0.025

Gray 400 Open Color ΔE 0.025

Web 140 Fluent ΔE 0.029

Secondary 80 Material ΔE 0.029

Border default Primer ΔE 0.030

Blue 8 Polaris ΔE 0.033

Red 2 Ant Design ΔE 0.038

Brand (alternate) vanilla-extract ΔE 0.041

Background StyleX ΔE 0.145

RAL Classic

Light ivory · RAL 1015 RAL ΔE 0.017

Try any color

Color combinations

Rotate the hue wheel while holding lightness steady.

How to use it

Three moves keep the color readable and deliberate.

Why it works

The perceptual reasoning behind the palette.

Complementary

Opposite the hue wheel; it sharpens the focal color by contrast.

#E5C8CF #BAD8D2

Best use: Calls to action and single-feature highlights

Split-complementary

Two neighbors of the opposite hue; softer than a direct complement.

#E5C8CF #C1D7C6 #B8D7DE

Best use: Balanced marketing layouts with two accents

Triadic

Three hues spaced evenly; lively but needs one dominant voice.

#E5C8CF #CDD5BC #BED4E5

Best use: Event identities and playful editorial spreads

Analogous

Neighbors on the wheel; quiet, cohesive and easy to scan.

#DFC9DB #E5C8CF #E6C9C3

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#A59095 #E5C8CF #ECD7DC

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#E5C8CF #E2CCBB #BAD8D2 #BED4E5

Best use: Complex dashboards and multi-service brands

Export the scale

CSS

:root {
  --brand-50: #FBF3F5;
  --brand-100: #F6E9EC;
  --brand-200: #E7D3D8;
  --brand-300: #D3BBC1;
  --brand-400: #BCA1A8;
  --brand-500: #9D8289;
  --brand-600: #846B72;
  --brand-700: #6C555B;
  --brand-800: #534045;
  --brand-900: #3C2D31;
  --brand-950: #281D20;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FBF3F5',
        100: '#F6E9EC',
        200: '#E7D3D8',
        300: '#D3BBC1',
        400: '#BCA1A8',
        500: '#9D8289',
        600: '#846B72',
        700: '#6C555B',
        800: '#534045',
        900: '#3C2D31',
        950: '#281D20',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FBF3F5"
    },
    "100": {
      "$type": "color",
      "$value": "#F6E9EC"
    },
    "200": {
      "$type": "color",
      "$value": "#E7D3D8"
    },
    "300": {
      "$type": "color",
      "$value": "#D3BBC1"
    },
    "400": {
      "$type": "color",
      "$value": "#BCA1A8"
    },
    "500": {
      "$type": "color",
      "$value": "#9D8289"
    },
    "600": {
      "$type": "color",
      "$value": "#846B72"
    },
    "700": {
      "$type": "color",
      "$value": "#6C555B"
    },
    "800": {
      "$type": "color",
      "$value": "#534045"
    },
    "900": {
      "$type": "color",
      "$value": "#3C2D31"
    },
    "950": {
      "$type": "color",
      "$value": "#281D20"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FBF3F5"/>
  <rect x="100" y="0" width="100" height="90" fill="#F6E9EC"/>
  <rect x="200" y="0" width="100" height="90" fill="#E7D3D8"/>
  <rect x="300" y="0" width="100" height="90" fill="#D3BBC1"/>
  <rect x="400" y="0" width="100" height="90" fill="#BCA1A8"/>
  <rect x="500" y="0" width="100" height="90" fill="#9D8289"/>
  <rect x="600" y="0" width="100" height="90" fill="#846B72"/>
  <rect x="700" y="0" width="100" height="90" fill="#6C555B"/>
  <rect x="800" y="0" width="100" height="90" fill="#534045"/>
  <rect x="900" y="0" width="100" height="90" fill="#3C2D31"/>
  <rect x="1000" y="0" width="100" height="90" fill="#281D20"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.984, green: 0.953, blue: 0.961, alpha: 1.0)
  static let brand100 = UIColor(red: 0.965, green: 0.914, blue: 0.925, alpha: 1.0)
  static let brand200 = UIColor(red: 0.906, green: 0.827, blue: 0.847, alpha: 1.0)
  static let brand300 = UIColor(red: 0.827, green: 0.733, blue: 0.757, alpha: 1.0)
  static let brand400 = UIColor(red: 0.737, green: 0.631, blue: 0.659, alpha: 1.0)
  static let brand500 = UIColor(red: 0.616, green: 0.510, blue: 0.537, alpha: 1.0)
  static let brand600 = UIColor(red: 0.518, green: 0.420, blue: 0.447, alpha: 1.0)
  static let brand700 = UIColor(red: 0.424, green: 0.333, blue: 0.357, alpha: 1.0)
  static let brand800 = UIColor(red: 0.325, green: 0.251, blue: 0.271, alpha: 1.0)
  static let brand900 = UIColor(red: 0.235, green: 0.176, blue: 0.192, alpha: 1.0)
  static let brand950 = UIColor(red: 0.157, green: 0.114, blue: 0.125, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FBF3F5</color>
  <color name="brand_100">#F6E9EC</color>
  <color name="brand_200">#E7D3D8</color>
  <color name="brand_300">#D3BBC1</color>
  <color name="brand_400">#BCA1A8</color>
  <color name="brand_500">#9D8289</color>
  <color name="brand_600">#846B72</color>
  <color name="brand_700">#6C555B</color>
  <color name="brand_800">#534045</color>
  <color name="brand_900">#3C2D31</color>
  <color name="brand_950">#281D20</color>
</resources>

Principles

Balance

Keep one dominant tone, one supporter and one accent.

Contrast

Test body text against both white and black before shipping.

Harmony

Rotate the hue wheel while holding lightness steady.

Color contrast checker

Test body text against both white and black before shipping.

Text color

Background

1.56 :1

FAIL

Quote

Give Pale Red the single element that must be noticed first, and let the rest of the Red palette support it.

WCAG contrast

Preview

Aa / Bb

#E5C8CF · Pale Red

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #E5C8CF measures 1.56:1 against white (FAIL) and 12.13:1 against black (AAA). Use the table below to choose the right threshold for the text size.

Level	Normal text	Large text (18pt+ / 14pt bold)	Icons & UI parts
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Fails	< 4.5 : 1	< 3 : 1	< 3 : 1

Large text means 18pt regular or 14pt bold. UI parts need 3:1 against adjacent colors. AA is the common compliance baseline; AAA is enhanced.

Technical formats

Notation across color spaces

HEX

#E5C8CF

CSS Color 4

RGB

229,200,207

sRGB / D65

HSL

346,36,84

HSL

OKLCH

oklch(0.859 0.034 1.5)

perceptual

LAB

83,11,0

CIE Lab

LCH

83,11,1

CIE LCH

XYZ

64,62,68

CIE XYZ

LUV

83,17,-2

CIE LUV

HWB

346,78,10

CSS HWB

CMYK

0,13,10,10

Practical formats

Ready-to-use values

CSS

color: #E5C8CF;

custom properties

Tailwind

bg-[#E5C8CF] text-[#FFF]

arbitrary value

Android

#FFE5C8CF

ARGB

Flutter

Color(0xFFE5C8CF)

dart:ui

Photoshop

R 229 G 200 B 207 · C 0 M 13 Y 10 K 10

RGB / CMYK

CMYK 0,13,10,10

FOGRA39

Color analysis

Measured color properties

Lightness

0.625

relative luminance · warm

Contrast

1.56 : 1

vs white · FAIL · warm

Contrast

12.13 : 1

vs black · AAA · warm

Hue

346°

saturation 36% · warm

LCH

83,11,1

lightness 84% · warm

Delta E

12.2

曙色 #D5A8B4 · warm

Similar colors

Nearest colors from the full Irodori library, ranked by ΔE.

Pale Red #FFE4E1ΔE 10.8 Silver #CCCCCCΔE 11.4 Silver #D3D3D3ΔE 11.4 桜色 #FCE9EEΔE 11.5 曙色 #D5A8B4ΔE 12.2 Silver #DCDCDCΔE 12.2

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 12.2