← Back to Editor

#F5E2AB · #EDE8A8 · #C9B286 · #A5876D · #4D3138

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5E2AB

Goose Yellow · Wheat · Lemon Cream

HEX
#F5E2AB
RGB
rgb(245, 226, 171)
HSL
hsl(45, 79%, 82%)
HSB
hsb(45, 30%, 96%)
CMYK
cmyk(0%, 8%, 30%, 4%)
Oklch
oklch(91.5% 0.074 91.3)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#EDE8A8

Fresh Green · Wheat · Lemon Cream

HEX
#EDE8A8
RGB
rgb(237, 232, 168)
HSL
hsl(56, 66%, 79%)
HSB
hsb(56, 29%, 93%)
CMYK
cmyk(0%, 2%, 29%, 7%)
Oklch
oklch(92.0% 0.082 104.1)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#C9B286

Ginger · Tan · Warm Sun

HEX
#C9B286
RGB
rgb(201, 178, 134)
HSL
hsl(39, 38%, 66%)
HSB
hsb(39, 33%, 79%)
CMYK
cmyk(0%, 11%, 33%, 21%)
Oklch
oklch(77.3% 0.065 83.4)

TraditionalGinger」· PaintWarm Sun」· Creative Honey Glow

#A5876D

Tangerine · Gray · Warm Sun

HEX
#A5876D
RGB
rgb(165, 135, 109)
HSL
hsl(28, 24%, 54%)
HSB
hsb(28, 34%, 65%)
CMYK
cmyk(0%, 18%, 34%, 35%)
Oklch
oklch(64.5% 0.052 62.6)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#4D3138

Crimson · DarkSlateGray · Wine Red

HEX
#4D3138
RGB
rgb(77, 49, 56)
HSL
hsl(345, 22%, 25%)
HSB
hsb(345, 36%, 30%)
CMYK
cmyk(0%, 36%, 27%, 70%)
Oklch
oklch(34.9% 0.042 3.1)

TraditionalCrimson」· PaintWine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5E2AB
ADBFF5

Analogous

F5BFAD
F5E2AB
E3F5AD

Triadic

F5E2AB
ADF5E3
E3ADF5

Split-Comp.

F5E2AB
ADE3F5
BFADF5

Tetradic

F5E2AB
ADF5BF
ADBFF5
F5ADE3

Contrast Matrix WCAG 2.1 Contrast

F5E2AB
EDE8A8
C9B286
A5876D
4D3138
1.0
Fail
1.6
Fail
2.6
Fail
9.0
AAA
1.0
Fail
1.6
Fail
2.7
Fail
9.2
AAA
1.6
Fail
1.6
Fail
1.6
Fail
5.6
AA
2.6
Fail
2.7
Fail
1.6
Fail
3.5
AA Large
9.0
AAA
9.2
AAA
5.6
AA
3.5
AA Large
White BG
1.3Fail
1.3Fail
2.1Fail
3.3AA Large
11.6AAA
Black BG
16.3AAA
16.7AAA
10.2AAA
6.3AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDB8
EBEBB7
BFBF91
989873
414136

Deuteranopia

EEEFBC
EBEBBB
C0C293
9A9C75
434536

Tritanopia

F4C3C5
EDC4C6
C8999B
A47879
4C3535

Achromatopsia

E1E1E1
E2E2E2
B4B4B4
8D8D8D
3A3A3A

Shades & Tints Shades & Tints

#F5E2AB

Dark
Light

#EDE8A8

Dark
Light

#C9B286

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5e2ab;
  --color-2: #ede8a8;
  --color-3: #c9b286;
  --color-4: #a5876d;
  --color-5: #4d3138;
}

SCSS

$color-1: #f5e2ab;
$color-2: #ede8a8;
$color-3: #c9b286;
$color-4: #a5876d;
$color-5: #4d3138;

TAILWIND

colors: {
  'brand-1': '#f5e2ab',
  'brand-2': '#ede8a8',
  'brand-3': '#c9b286',
  'brand-4': '#a5876d',
  'brand-5': '#4d3138',
}

RGB Array

[245, 226, 171], [237, 232, 168], [201, 178, 134], [165, 135, 109], [77, 49, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5E2AB, #EDE8A8, #C9B286, #A5876D, #4D3138 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f5e2ab; --color-2: #ede8a8; --color-3: #c9b286; --color-4: #a5876d; --color-5: #4d3138. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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