#E5CD7A Pale Amber

Q: What color is #E5CD7A?

Pale Amber is #E5CD7A, or #E5CD7A in uppercase notation. In RGB it is rgb(229,205,122), in HSL about hsl(47 67% 69%), and in OKLCH oklch(0.851 0.107 93.8).

Q: What does Pale Amber 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 Amber 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 logistics, food, leisure, safety.

Q: Which colors go well with Pale Amber?

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 Amber 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 Amber?

It is common in logistics, food, leisure, safety, particularly where brands want to feel optimistic, bright, alert, youthful, cautious.

Q: What is the history of Pale Amber?

The pigment story is concrete: Yellow is the brightest hue the eye can resolve, so it attracts attention before form is read. Pale versions feel sunny; saturated ones behave like a warning sign.

Q: How should I use Pale Amber in design?

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

Q: Is Pale Amber accessible?

Contrast is 1.57 against white (FAIL) and 12.00 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 Amber
Romanization	Pale Amber
Tradition	digital color
Family	Yellow
HEX	#E5CD7A
RGB	rgb(229,205,122)
HSL	hsl(47 67% 69%)
HSV	hsv(47, 47%, 90%)
OKLCH	oklch(0.851 0.107 93.8)
LAB	lab(82.77 -2.46 44.20)
XYZ	58,62,27
CMYK	cmyk(0.0% 10.5% 46.7% 10.2%)
RAL	#B7D9B1 · Pastel green · RAL 6019

About this color

Pale AmberYellowdigital color

Optimism under a spotlight

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

Design tip

Test Pale Amber (#E5CD7A) on a neutral surface first; a Yellow accent then looks intentional rather than decorative.

Best use

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

optimisticbrightalertyouthfulcautious

Psychology

How it is perceived

optimisticbrightalertyouthfulcautious

Psychological effect

Pale Amber raises the perceived energy of a Yellow 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

hopeclarity and playful confidence

Cultural significance

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

Positive associations

Positive associations lean toward hope, clarity and playful confidence, which is why it appears in invitations and seasonal work.

Use with care

Too much surface area can read as anxiety or hazard when too loud, so keep it to accents and small fields.

Where it appears

Common design applications

Campaign landing pages: Give Pale Amber the single element that must be noticed first, and let the rest of the Yellow palette support it.
Editorial cover systems: Give Pale Amber the single element that must be noticed first, and let the rest of the Yellow palette support it.
Product packaging labels: Give Pale Amber the single element that must be noticed first, and let the rest of the Yellow palette support it.
Dashboard status accents: Give Pale Amber the single element that must be noticed first, and let the rest of the Yellow palette support it.
Retail wayfinding signs: Give Pale Amber the single element that must be noticed first, and let the rest of the Yellow 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

logistics, food, leisure, safety

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

Trend signal

Optimism under a spotlight

Yellow is the brightest hue the eye can resolve, so it attracts attention before form is read. Pale versions feel sunny; saturated ones behave like a warning sign.

Pairing

Colors that complete it

#B8C9FFeditorial layouts that need one warm focal point #AB9440interfaces where an accent has to stay legible #71E0F8packaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Pale Amber was matched with mineral and plant pigments, and the Yellow 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% #E5CD7A 10% #CEB96E 20% #B7A462 30% #A09055 40% #897B49 50% #73673D 60% #5C5231 70% #453E25 80% #2E2918 90% #17140C 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #E5CD7A 10% #E8D287 20% #EAD795 30% #EDDCA2 40% #EFE1AF 50% #F2E6BD 60% #F5EBCA 70% #F7F0D7 80% #FAF5E4 90% #FCFAF2 100% #FFFFFF

Design scale 50–950

50#FCF6DF 100#F7EDC9 200#E8D9A4 300#D5C27F 400#BEA85C 500#A08935 600#87711C 700#6E5A04 800#564500 900#3D3000 950#291F00

Dark-mode value (AA): #927B24 · 4.56: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

สีเหลือง TH ΔE 0.040

豆绿 CN ΔE 0.049

石黄 TB ΔE 0.062

Show all (6)

駵黃 KR ΔE 0.063

पीला IN ΔE 0.065

Шар MN ΔE 0.067

山吹 JP ΔE 0.070

Vàng VN ΔE 0.077

Kuning ID ΔE 0.101

Design systems

Orange 6 Radix ΔE 0.004

Orange 300 Open Color ΔE 0.009

Volcano 3 Ant Design ΔE 0.015

Show all (11)

Green 200 Chakra ΔE 0.016

Orange 8 Polaris ΔE 0.017

Orange 300 UnoCSS ΔE 0.017

Orange 300 Panda ΔE 0.017

Office 140 Fluent ΔE 0.021

Orange 300 Tailwind ΔE 0.026

Brand (alternate) vanilla-extract ΔE 0.040

Primary 80 Material ΔE 0.043

Warning Bootstrap ΔE 0.066

Border default Primer ΔE 0.100

Background StyleX ΔE 0.184

RAL Classic

Pastel green · RAL 6019 RAL ΔE 0.042

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.

#E5CD7A #B8C9FF

Best use: Calls to action and single-feature highlights

Split-complementary

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

#E5CD7A #90D6FF #DDBDFF

Best use: Balanced marketing layouts with two accents

Triadic

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

#E5CD7A #71E0F8 #F9B4EB

Best use: Event identities and playful editorial spreads

Analogous

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

#FFBF83 #E5CD7A #C0DA8B

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#A59458 #E5CD7A #ECDB9F

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#E5CD7A #95E3AE #B8C9FF #F9B4EB

Best use: Complex dashboards and multi-service brands

Export the scale

CSS

:root {
  --brand-50: #FCF6DF;
  --brand-100: #F7EDC9;
  --brand-200: #E8D9A4;
  --brand-300: #D5C27F;
  --brand-400: #BEA85C;
  --brand-500: #A08935;
  --brand-600: #87711C;
  --brand-700: #6E5A04;
  --brand-800: #564500;
  --brand-900: #3D3000;
  --brand-950: #291F00;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FCF6DF',
        100: '#F7EDC9',
        200: '#E8D9A4',
        300: '#D5C27F',
        400: '#BEA85C',
        500: '#A08935',
        600: '#87711C',
        700: '#6E5A04',
        800: '#564500',
        900: '#3D3000',
        950: '#291F00',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FCF6DF"
    },
    "100": {
      "$type": "color",
      "$value": "#F7EDC9"
    },
    "200": {
      "$type": "color",
      "$value": "#E8D9A4"
    },
    "300": {
      "$type": "color",
      "$value": "#D5C27F"
    },
    "400": {
      "$type": "color",
      "$value": "#BEA85C"
    },
    "500": {
      "$type": "color",
      "$value": "#A08935"
    },
    "600": {
      "$type": "color",
      "$value": "#87711C"
    },
    "700": {
      "$type": "color",
      "$value": "#6E5A04"
    },
    "800": {
      "$type": "color",
      "$value": "#564500"
    },
    "900": {
      "$type": "color",
      "$value": "#3D3000"
    },
    "950": {
      "$type": "color",
      "$value": "#291F00"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FCF6DF"/>
  <rect x="100" y="0" width="100" height="90" fill="#F7EDC9"/>
  <rect x="200" y="0" width="100" height="90" fill="#E8D9A4"/>
  <rect x="300" y="0" width="100" height="90" fill="#D5C27F"/>
  <rect x="400" y="0" width="100" height="90" fill="#BEA85C"/>
  <rect x="500" y="0" width="100" height="90" fill="#A08935"/>
  <rect x="600" y="0" width="100" height="90" fill="#87711C"/>
  <rect x="700" y="0" width="100" height="90" fill="#6E5A04"/>
  <rect x="800" y="0" width="100" height="90" fill="#564500"/>
  <rect x="900" y="0" width="100" height="90" fill="#3D3000"/>
  <rect x="1000" y="0" width="100" height="90" fill="#291F00"/>
  <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.988, green: 0.965, blue: 0.875, alpha: 1.0)
  static let brand100 = UIColor(red: 0.969, green: 0.929, blue: 0.788, alpha: 1.0)
  static let brand200 = UIColor(red: 0.910, green: 0.851, blue: 0.643, alpha: 1.0)
  static let brand300 = UIColor(red: 0.835, green: 0.761, blue: 0.498, alpha: 1.0)
  static let brand400 = UIColor(red: 0.745, green: 0.659, blue: 0.361, alpha: 1.0)
  static let brand500 = UIColor(red: 0.627, green: 0.537, blue: 0.208, alpha: 1.0)
  static let brand600 = UIColor(red: 0.529, green: 0.443, blue: 0.110, alpha: 1.0)
  static let brand700 = UIColor(red: 0.431, green: 0.353, blue: 0.016, alpha: 1.0)
  static let brand800 = UIColor(red: 0.337, green: 0.271, blue: 0.000, alpha: 1.0)
  static let brand900 = UIColor(red: 0.239, green: 0.188, blue: 0.000, alpha: 1.0)
  static let brand950 = UIColor(red: 0.161, green: 0.122, blue: 0.000, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FCF6DF</color>
  <color name="brand_100">#F7EDC9</color>
  <color name="brand_200">#E8D9A4</color>
  <color name="brand_300">#D5C27F</color>
  <color name="brand_400">#BEA85C</color>
  <color name="brand_500">#A08935</color>
  <color name="brand_600">#87711C</color>
  <color name="brand_700">#6E5A04</color>
  <color name="brand_800">#564500</color>
  <color name="brand_900">#3D3000</color>
  <color name="brand_950">#291F00</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.57 :1

FAIL

Quote

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

WCAG contrast

Preview

Aa / Bb

#E5CD7A · Pale Amber

WCAG contrast standards

WCAG 2.2 sets minimum contrast for text and interface parts. #E5CD7A measures 1.57:1 against white (FAIL) and 12.00: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

#E5CD7A

CSS Color 4

RGB

229,205,122

sRGB / D65

HSL

47,67,69

HSL

OKLCH

oklch(0.851 0.107 93.8)

perceptual

LAB

83,-2,44

CIE Lab

LCH

83,44,93

CIE LCH

XYZ

58,62,27

CIE XYZ

LUV

83,20,57

CIE LUV

HWB

47,48,10

CSS HWB

CMYK

0,10,47,10

Practical formats

Ready-to-use values

CSS

color: #E5CD7A;

custom properties

Tailwind

bg-[#E5CD7A] text-[#FFF]

arbitrary value

Android

#FFE5CD7A

ARGB

Flutter

Color(0xFFE5CD7A)

dart:ui

Photoshop

R 229 G 205 B 122 · C 0 M 10 Y 47 K 10

RGB / CMYK

CMYK 0,10,47,10

FOGRA39

Color analysis

Measured color properties

Lightness

0.617

relative luminance · warm

Contrast

1.57 : 1

vs white · FAIL · warm

Contrast

12.00 : 1

vs black · AAA · warm

Hue

47°

saturation 67% · warm

LCH

83,44,93

lightness 69% · warm

Delta E

17.9

秋香 #C8AD78 · warm

Similar colors

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

Pale Yellow #F0E68CΔE 10.0 Light Yellow #BDB76BΔE 12.3 Pale Yellow #EEE8AAΔE 16.4 秋香 #C8AD78ΔE 17.9 Light Orange #DEB887ΔE 18.0 石黄 #E4B44AΔE 18.5

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 17.9