#F2DB96 Pale Amber

Q: What color is #F2DB96?

Pale Amber is #F2DB96, or #F2DB96 in uppercase notation. In RGB it is rgb(242,219,150), in HSL about hsl(45 78% 77%), and in OKLCH oklch(0.895 0.091 91.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.37 against white and 13.80 against black.

Q: Is Pale Amber accessible?

Contrast is 1.37 against white (FAIL) and 13.80 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	#F2DB96
RGB	rgb(242,219,150)
HSL	hsl(45 78% 77%)
HSV	hsv(45, 38%, 95%)
OKLCH	oklch(0.895 0.091 91.8)
LAB	lab(87.85 -1.61 36.83)
XYZ	67,72,39
CMYK	cmyk(0.0% 9.5% 38.0% 5.1%)
RAL	#E6D2B5 · Light ivory · RAL 1015

About this color

Pale AmberYellowdigital color

Optimism under a spotlight

Pale Amber is #F2DB96, 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 (#F2DB96) 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

#C7D9FFeditorial layouts that need one warm focal point #B8A15Einterfaces where an accent has to stay legible #91EDFFpackaging 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% #F2DB96 10% #DAC587 20% #C2AF78 30% #A99969 40% #91835A 50% #796E4B 60% #61583C 70% #49422D 80% #302C1E 90% #18160F 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #F2DB96 10% #F3DFA1 20% #F5E2AB 30% #F6E6B6 40% #F7E9C0 50% #F9EDCB 60% #FAF1D5 70% #FBF4E0 80% #FCF8EA 90% #FEFBF5 100% #FFFFFF

Design scale 50–950

50#FCF5E3 100#F7EDCE 200#E7D9AC 300#D4C28A 400#BDA869 500#9F8946 600#867130 700#6D5A1D 800#55450E 900#3D3005 950#281F03

Dark-mode value (AA): #917B38 · 4.57: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.071

天青 CN ΔE 0.073

Putih ID ΔE 0.080

Show all (6)

Vàng VN ΔE 0.086

पीला IN ΔE 0.087

桜色 JP ΔE 0.089

駵黃 KR ΔE 0.101

白云 TB ΔE 0.101

Цагаан MN ΔE 0.102

Design systems

Lime 5 Radix ΔE 0.005

Orange 3 Ant Design ΔE 0.007

Orange 200 Chakra ΔE 0.012

Show all (11)

Orange 7 Polaris ΔE 0.013

Green 200 Open Color ΔE 0.014

Emerald 200 UnoCSS ΔE 0.015

Emerald 200 Panda ΔE 0.015

Orange 200 Tailwind ΔE 0.016

Brand (alternate) vanilla-extract ΔE 0.034

Teams V2.1 150 Fluent ΔE 0.047

Tertiary 90 Material ΔE 0.052

Border default Primer ΔE 0.080

Gray 400 Bootstrap ΔE 0.086

Background StyleX ΔE 0.139

RAL Classic

Light ivory · RAL 1015 RAL ΔE 0.051

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.

#F2DB96 #C7D9FF

Best use: Calls to action and single-feature highlights

Split-complementary

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

#F2DB96 #A6E4FF #E7CFFF

Best use: Balanced marketing layouts with two accents

Triadic

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

#F2DB96 #91EDFF #FFC7F8

Best use: Event identities and playful editorial spreads

Analogous

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

#FFCF9E #F2DB96 #D2E6A3

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#AE9E6C #F2DB96 #F6E5B3

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#F2DB96 #AFEEBF #C7D9FF #FFC7F8

Best use: Complex dashboards and multi-service brands

Export the scale

CSS

:root {
  --brand-50: #FCF5E3;
  --brand-100: #F7EDCE;
  --brand-200: #E7D9AC;
  --brand-300: #D4C28A;
  --brand-400: #BDA869;
  --brand-500: #9F8946;
  --brand-600: #867130;
  --brand-700: #6D5A1D;
  --brand-800: #55450E;
  --brand-900: #3D3005;
  --brand-950: #281F03;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FCF5E3',
        100: '#F7EDCE',
        200: '#E7D9AC',
        300: '#D4C28A',
        400: '#BDA869',
        500: '#9F8946',
        600: '#867130',
        700: '#6D5A1D',
        800: '#55450E',
        900: '#3D3005',
        950: '#281F03',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FCF5E3"
    },
    "100": {
      "$type": "color",
      "$value": "#F7EDCE"
    },
    "200": {
      "$type": "color",
      "$value": "#E7D9AC"
    },
    "300": {
      "$type": "color",
      "$value": "#D4C28A"
    },
    "400": {
      "$type": "color",
      "$value": "#BDA869"
    },
    "500": {
      "$type": "color",
      "$value": "#9F8946"
    },
    "600": {
      "$type": "color",
      "$value": "#867130"
    },
    "700": {
      "$type": "color",
      "$value": "#6D5A1D"
    },
    "800": {
      "$type": "color",
      "$value": "#55450E"
    },
    "900": {
      "$type": "color",
      "$value": "#3D3005"
    },
    "950": {
      "$type": "color",
      "$value": "#281F03"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FCF5E3"/>
  <rect x="100" y="0" width="100" height="90" fill="#F7EDCE"/>
  <rect x="200" y="0" width="100" height="90" fill="#E7D9AC"/>
  <rect x="300" y="0" width="100" height="90" fill="#D4C28A"/>
  <rect x="400" y="0" width="100" height="90" fill="#BDA869"/>
  <rect x="500" y="0" width="100" height="90" fill="#9F8946"/>
  <rect x="600" y="0" width="100" height="90" fill="#867130"/>
  <rect x="700" y="0" width="100" height="90" fill="#6D5A1D"/>
  <rect x="800" y="0" width="100" height="90" fill="#55450E"/>
  <rect x="900" y="0" width="100" height="90" fill="#3D3005"/>
  <rect x="1000" y="0" width="100" height="90" fill="#281F03"/>
  <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.961, blue: 0.890, alpha: 1.0)
  static let brand100 = UIColor(red: 0.969, green: 0.929, blue: 0.808, alpha: 1.0)
  static let brand200 = UIColor(red: 0.906, green: 0.851, blue: 0.675, alpha: 1.0)
  static let brand300 = UIColor(red: 0.831, green: 0.761, blue: 0.541, alpha: 1.0)
  static let brand400 = UIColor(red: 0.741, green: 0.659, blue: 0.412, alpha: 1.0)
  static let brand500 = UIColor(red: 0.624, green: 0.537, blue: 0.275, alpha: 1.0)
  static let brand600 = UIColor(red: 0.525, green: 0.443, blue: 0.188, alpha: 1.0)
  static let brand700 = UIColor(red: 0.427, green: 0.353, blue: 0.114, alpha: 1.0)
  static let brand800 = UIColor(red: 0.333, green: 0.271, blue: 0.055, alpha: 1.0)
  static let brand900 = UIColor(red: 0.239, green: 0.188, blue: 0.020, alpha: 1.0)
  static let brand950 = UIColor(red: 0.157, green: 0.122, blue: 0.012, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FCF5E3</color>
  <color name="brand_100">#F7EDCE</color>
  <color name="brand_200">#E7D9AC</color>
  <color name="brand_300">#D4C28A</color>
  <color name="brand_400">#BDA869</color>
  <color name="brand_500">#9F8946</color>
  <color name="brand_600">#867130</color>
  <color name="brand_700">#6D5A1D</color>
  <color name="brand_800">#55450E</color>
  <color name="brand_900">#3D3005</color>
  <color name="brand_950">#281F03</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.37 :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

#F2DB96 · Pale Amber

WCAG contrast standards

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

#F2DB96

CSS Color 4

RGB

242,219,150

sRGB / D65

HSL

45,78,77

HSL

OKLCH

oklch(0.895 0.091 91.8)

perceptual

LAB

88,-2,37

CIE Lab

LCH

88,37,93

CIE LCH

XYZ

67,72,39

CIE XYZ

LUV

88,18,50

CIE LUV

HWB

45,59,5

CSS HWB

CMYK

0,10,38,5

Practical formats

Ready-to-use values

CSS

color: #F2DB96;

custom properties

Tailwind

bg-[#F2DB96] text-[#FFF]

arbitrary value

Android

#FFF2DB96

ARGB

Flutter

Color(0xFFF2DB96)

dart:ui

Photoshop

R 242 G 219 B 150 · C 0 M 10 Y 38 K 5

RGB / CMYK

CMYK 0,10,38,5

FOGRA39

Color analysis

Measured color properties

Lightness

0.717

relative luminance · warm

Contrast

1.37 : 1

vs white · FAIL · warm

Contrast

13.80 : 1

vs black · AAA · warm

Hue

45°

saturation 78% · warm

LCH

88,37,93

lightness 77% · warm

Delta E

17.5

秋香 #C8AD78 · warm

Similar colors

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

Pale Yellow #EEE8AAΔE 8.8 Pale Orange #FFDEADΔE 10.8 Pale Yellow #F0E68CΔE 11.3 Light Orange #DEB887ΔE 15.5 Light Yellow #BDB76BΔE 16.3 秋香 #C8AD78ΔE 17.5

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 17.5