#FEFBE5 Pale Yellow

Q: What color is #FEFBE5?

Pale Yellow is #FEFBE5, or #FEFBE5 in uppercase notation. In RGB it is rgb(254,251,229), in HSL about hsl(53 93% 95%), and in OKLCH oklch(0.985 0.029 100.6).

Q: What does Pale Yellow 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 Yellow 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 Yellow?

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

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

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 Yellow in design?

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

Q: Is Pale Yellow accessible?

Contrast is 1.04 against white (FAIL) and 18.11 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 Yellow
Romanization	Pale Yellow
Tradition	digital color
Family	Yellow
HEX	#FEFBE5
RGB	rgb(254,251,229)
HSL	hsl(53 93% 95%)
HSV	hsv(53, 10%, 100%)
OKLCH	oklch(0.985 0.029 100.6)
LAB	lab(98.32 -2.67 10.90)
XYZ	90,96,88
CMYK	cmyk(0.0% 1.2% 9.8% 0.4%)
RAL	#FFFDE6 · Clean room white[11] · RAL 9012

About this color

Pale YellowYellowdigital color

Optimism under a spotlight

Pale Yellow is #FEFBE5, 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 Yellow (#FEFBE5) on a neutral surface first; a Yellow accent then looks intentional rather than decorative.

Best use

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

#F6F8FFeditorial layouts that need one warm focal point #C3C0ABinterfaces where an accent has to stay legible #E6FFFFpackaging that should feel appetizing without shouting

History

Pigments and provenance

Before synthetic dyes, Pale Yellow 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% #FEFBE5 10% #E5E2CE 20% #CBC9B7 30% #B2B0A0 40% #989789 50% #7F7E73 60% #66645C 70% #4C4B45 80% #33322E 90% #191917 100% #000000

Tints

Lighter steps for surfaces and backgrounds.

0% #FEFBE5 10% #FEFBE8 20% #FEFCEA 30% #FEFCED 40% #FEFDEF 50% #FFFDF2 60% #FFFDF5 70% #FFFEF7 80% #FFFEFA 90% #FFFFFC 100% #FFFFFF

Design scale 50–950

50#F6F6F0 100#EEEDE3 200#DCDACC 300#C6C3B2 400#ADAA97 500#8E8B78 600#767461 700#5F5D4C 800#494739 900#343227 950#222119

Dark-mode value (AA): #817E6A · 4.60: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

白 JP ΔE 0.024

백 KR ΔE 0.024

Trắng VN ΔE 0.024

Show all (6)

Цагаан MN ΔE 0.028

白云 TB ΔE 0.031

雪白 CN ΔE 0.034

Putih ID ΔE 0.046

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

पीला IN ΔE 0.189

Design systems

Gold 1 Ant Design ΔE 0.002

Lime 50 Tailwind ΔE 0.002

Lime 50 UnoCSS ΔE 0.002

Show all (11)

Lime 50 Panda ΔE 0.002

Teal 50 Chakra ΔE 0.005

Yellow 2 Radix ΔE 0.005

Lime 50 Open Color ΔE 0.008

Teal 2 Polaris ΔE 0.012

Neutral 98 Material ΔE 0.016

Canvas inset Primer ΔE 0.026

Light Bootstrap ΔE 0.027

Web 160 Fluent ΔE 0.028

Background StyleX ΔE 0.033

Brand (alternate) vanilla-extract ΔE 0.125

RAL Classic

Clean room white[11] · RAL 9012 RAL ΔE 0.005

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.

#FEFBE5 #F6F8FF

Best use: Calls to action and single-feature highlights

Split-complementary

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

#FEFBE5 #ECFCFF #FFF5FF

Best use: Balanced marketing layouts with two accents

Triadic

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

#FEFBE5 #E6FFFF #FFF3FF

Best use: Event identities and playful editorial spreads

Analogous

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

#FFF7E5 #FEFBE5 #F3FEEA

Best use: Backgrounds, charts and calm product pages

Monochromatic

One hue across lightness steps; disciplined and premium.

#B7B5A5 #FEFBE5 #FEFCEC

Best use: Design systems, packaging and typographic hierarchy

Tetradic

Two complementary pairs; rich, but requires strict proportion.

#FEFBE5 #EAFFF4 #F6F8FF #FFF3FF

Best use: Complex dashboards and multi-service brands

Export the scale

CSS

:root {
  --brand-50: #F6F6F0;
  --brand-100: #EEEDE3;
  --brand-200: #DCDACC;
  --brand-300: #C6C3B2;
  --brand-400: #ADAA97;
  --brand-500: #8E8B78;
  --brand-600: #767461;
  --brand-700: #5F5D4C;
  --brand-800: #494739;
  --brand-900: #343227;
  --brand-950: #222119;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F6F6F0',
        100: '#EEEDE3',
        200: '#DCDACC',
        300: '#C6C3B2',
        400: '#ADAA97',
        500: '#8E8B78',
        600: '#767461',
        700: '#5F5D4C',
        800: '#494739',
        900: '#343227',
        950: '#222119',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F6F6F0"
    },
    "100": {
      "$type": "color",
      "$value": "#EEEDE3"
    },
    "200": {
      "$type": "color",
      "$value": "#DCDACC"
    },
    "300": {
      "$type": "color",
      "$value": "#C6C3B2"
    },
    "400": {
      "$type": "color",
      "$value": "#ADAA97"
    },
    "500": {
      "$type": "color",
      "$value": "#8E8B78"
    },
    "600": {
      "$type": "color",
      "$value": "#767461"
    },
    "700": {
      "$type": "color",
      "$value": "#5F5D4C"
    },
    "800": {
      "$type": "color",
      "$value": "#494739"
    },
    "900": {
      "$type": "color",
      "$value": "#343227"
    },
    "950": {
      "$type": "color",
      "$value": "#222119"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F6F6F0"/>
  <rect x="100" y="0" width="100" height="90" fill="#EEEDE3"/>
  <rect x="200" y="0" width="100" height="90" fill="#DCDACC"/>
  <rect x="300" y="0" width="100" height="90" fill="#C6C3B2"/>
  <rect x="400" y="0" width="100" height="90" fill="#ADAA97"/>
  <rect x="500" y="0" width="100" height="90" fill="#8E8B78"/>
  <rect x="600" y="0" width="100" height="90" fill="#767461"/>
  <rect x="700" y="0" width="100" height="90" fill="#5F5D4C"/>
  <rect x="800" y="0" width="100" height="90" fill="#494739"/>
  <rect x="900" y="0" width="100" height="90" fill="#343227"/>
  <rect x="1000" y="0" width="100" height="90" fill="#222119"/>
  <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.965, green: 0.965, blue: 0.941, alpha: 1.0)
  static let brand100 = UIColor(red: 0.933, green: 0.929, blue: 0.890, alpha: 1.0)
  static let brand200 = UIColor(red: 0.863, green: 0.855, blue: 0.800, alpha: 1.0)
  static let brand300 = UIColor(red: 0.776, green: 0.765, blue: 0.698, alpha: 1.0)
  static let brand400 = UIColor(red: 0.678, green: 0.667, blue: 0.592, alpha: 1.0)
  static let brand500 = UIColor(red: 0.557, green: 0.545, blue: 0.471, alpha: 1.0)
  static let brand600 = UIColor(red: 0.463, green: 0.455, blue: 0.380, alpha: 1.0)
  static let brand700 = UIColor(red: 0.373, green: 0.365, blue: 0.298, alpha: 1.0)
  static let brand800 = UIColor(red: 0.286, green: 0.278, blue: 0.224, alpha: 1.0)
  static let brand900 = UIColor(red: 0.204, green: 0.196, blue: 0.153, alpha: 1.0)
  static let brand950 = UIColor(red: 0.133, green: 0.129, blue: 0.098, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F6F6F0</color>
  <color name="brand_100">#EEEDE3</color>
  <color name="brand_200">#DCDACC</color>
  <color name="brand_300">#C6C3B2</color>
  <color name="brand_400">#ADAA97</color>
  <color name="brand_500">#8E8B78</color>
  <color name="brand_600">#767461</color>
  <color name="brand_700">#5F5D4C</color>
  <color name="brand_800">#494739</color>
  <color name="brand_900">#343227</color>
  <color name="brand_950">#222119</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.04 :1

FAIL

Quote

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

WCAG contrast

Preview

Aa / Bb

#FEFBE5 · Pale Yellow

WCAG contrast standards

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

#FEFBE5

CSS Color 4

RGB

254,251,229

sRGB / D65

HSL

53,93,95

HSL

OKLCH

oklch(0.985 0.029 100.6)

perceptual

LAB

98,-3,11

CIE Lab

LCH

98,11,104

CIE LCH

XYZ

90,96,88

CIE XYZ

LUV

98,3,17

CIE LUV

HWB

53,90,0

CSS HWB

CMYK

0,1,10,0

Practical formats

Ready-to-use values

CSS

color: #FEFBE5;

custom properties

Tailwind

bg-[#FEFBE5] text-[#FFF]

arbitrary value

Android

#FFFEFBE5

ARGB

Flutter

Color(0xFFFEFBE5)

dart:ui

Photoshop

R 254 G 251 B 229 · C 0 M 1 Y 10 K 0

RGB / CMYK

CMYK 0,1,10,0

FOGRA39

Color analysis

Measured color properties

Lightness

0.957

relative luminance · warm

Contrast

1.04 : 1

vs white · FAIL · warm

Contrast

18.11 : 1

vs black · AAA · warm

Hue

53°

saturation 93% · warm

LCH

98,11,104

lightness 95% · warm

Delta E

10.7

凝脂 #EFE3DB · warm

Similar colors

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

Pale Yellow #F5F5DCΔE 3.0 White #FFFFF0ΔE 4.0 White #FDF5E6ΔE 4.2 White #FFFAF0ΔE 6.1 Putih #F2EAD9ΔE 6.2 Цагаан #F5F2E8ΔE 6.7

Blindness simulator

How it reads with color vision deficiency

How it reads with color vision deficiency · ΔE 10.7