← Back to Editor

#F9F4E1 · #E0B392 · #D5A483 · #BE9E78 · #AFC4BD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9F4E1

Goose Yellow · Beige · Lemon Cream

HEX
#F9F4E1
RGB
rgb(249, 244, 225)
HSL
hsl(48, 67%, 93%)
HSB
hsb(48, 10%, 98%)
CMYK
cmyk(0%, 2%, 10%, 2%)
Oklch
oklch(96.6% 0.026 94.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E0B392

Apricot · BurlyWood · Warm Sun

HEX
#E0B392
RGB
rgb(224, 179, 146)
HSL
hsl(25, 56%, 73%)
HSB
hsb(25, 35%, 88%)
CMYK
cmyk(0%, 20%, 35%, 12%)
Oklch
oklch(79.9% 0.069 57.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D5A483

Apricot · Tan · Warm Sun

HEX
#D5A483
RGB
rgb(213, 164, 131)
HSL
hsl(24, 49%, 67%)
HSB
hsb(24, 38%, 84%)
CMYK
cmyk(0%, 23%, 38%, 16%)
Oklch
oklch(75.6% 0.074 55.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#BE9E78

Ginger · Tan · Warm Sun

HEX
#BE9E78
RGB
rgb(190, 158, 120)
HSL
hsl(33, 35%, 61%)
HSB
hsb(33, 37%, 75%)
CMYK
cmyk(0%, 17%, 37%, 25%)
Oklch
oklch(71.9% 0.064 71.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#AFC4BD

Jade · Silver · Lake Green

HEX
#AFC4BD
RGB
rgb(175, 196, 189)
HSL
hsl(160, 15%, 73%)
HSB
hsb(160, 11%, 77%)
CMYK
cmyk(11%, 0%, 4%, 23%)
Oklch
oklch(80.2% 0.025 173.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F4E1
E1E6F9

Analogous

F9E8E1
F9F4E1
F2F9E1

Triadic

F9F4E1
E1F9F4
F4E1F9

Split-Comp.

F9F4E1
E1F2F9
E8E1F9

Tetradic

F9F4E1
E1F9E8
E1E6F9
F9E1F2

Contrast Matrix WCAG 2.1 Contrast

F9F4E1
E0B392
D5A483
BE9E78
AFC4BD
—
1.7
Fail
2.0
Fail
2.3
Fail
1.7
Fail
1.7
Fail
—
1.2
Fail
1.3
Fail
1.0
Fail
2.0
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
2.3
Fail
1.3
Fail
1.1
Fail
—
1.4
Fail
1.7
Fail
1.0
Fail
1.2
Fail
1.4
Fail
—
White BG
1.1Fail
1.9Fail
2.2Fail
2.5Fail
1.8Fail
Black BG
19.1AAA
11.0AAA
9.5AAA
8.4AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7E6
CDCC9A
C0BF8B
B0B081
B8B8BF

Deuteranopia

F7F8E7
CFD29C
C3C68D
B2B483
B7B5BF

Tritanopia

F9E9EA
DEA0A2
D39193
BC888A
B0C0C0

Achromatopsia

F3F3F3
BDBDBD
AFAFAF
A3A3A3
BDBDBD

Shades & Tints Shades & Tints

#F9F4E1

Dark
Light

#E0B392

Dark
Light

#D5A483

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f4e1;
  --color-2: #e0b392;
  --color-3: #d5a483;
  --color-4: #be9e78;
  --color-5: #afc4bd;
}

SCSS

$color-1: #f9f4e1;
$color-2: #e0b392;
$color-3: #d5a483;
$color-4: #be9e78;
$color-5: #afc4bd;

TAILWIND

colors: {
  'brand-1': '#f9f4e1',
  'brand-2': '#e0b392',
  'brand-3': '#d5a483',
  'brand-4': '#be9e78',
  'brand-5': '#afc4bd',
}

RGB Array

[249, 244, 225], [224, 179, 146], [213, 164, 131], [190, 158, 120], [175, 196, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F4E1, #E0B392, #D5A483, #BE9E78, #AFC4BD is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9f4e1; --color-2: #e0b392; --color-3: #d5a483; --color-4: #be9e78; --color-5: #afc4bd. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color