← Back to Editor

#F0D9AD · #E7D3A1 · #CABE96 · #F86376 · #56433C

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

#F0D9AD

Goose Yellow · Wheat · Peach Orange

HEX
#F0D9AD
RGB
rgb(240, 217, 173)
HSL
hsl(39, 69%, 81%)
HSB
hsb(39, 28%, 94%)
CMYK
cmyk(0%, 10%, 28%, 6%)
Oklch
oklch(89.3% 0.063 83.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E7D3A1

Goose Yellow · Wheat · Lemon Cream

HEX
#E7D3A1
RGB
rgb(231, 211, 161)
HSL
hsl(43, 59%, 77%)
HSB
hsb(43, 30%, 91%)
CMYK
cmyk(0%, 9%, 30%, 9%)
Oklch
oklch(87.1% 0.069 88.8)

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

#CABE96

Ginger · Tan · Sunflower

HEX
#CABE96
RGB
rgb(202, 190, 150)
HSL
hsl(46, 33%, 69%)
HSB
hsb(46, 26%, 79%)
CMYK
cmyk(0%, 6%, 26%, 21%)
Oklch
oklch(80.1% 0.055 93.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F86376

Peach Pink · Salmon · Coral Red

HEX
#F86376
RGB
rgb(248, 99, 118)
HSL
hsl(352, 91%, 68%)
HSB
hsb(352, 60%, 97%)
CMYK
cmyk(0%, 60%, 52%, 3%)
Oklch
oklch(69.4% 0.182 15.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#56433C

Tangerine · DarkOliveGreen · Amber Brown

HEX
#56433C
RGB
rgb(86, 67, 60)
HSL
hsl(16, 18%, 29%)
HSB
hsb(16, 30%, 34%)
CMYK
cmyk(0%, 22%, 30%, 66%)
Oklch
oklch(40.1% 0.029 41.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D9AD
ADC5F0

Analogous

F0B7AD
F0D9AD
E6F0AD

Triadic

F0D9AD
ADF0D9
D9ADF0

Split-Comp.

F0D9AD
ADE6F0
B7ADF0

Tetradic

F0D9AD
ADF0B7
ADC5F0
F0ADE6

Contrast Matrix WCAG 2.1 Contrast

F0D9AD
E7D3A1
CABE96
F86376
56433C
—
1.1
Fail
1.3
Fail
2.2
Fail
6.7
AA
1.1
Fail
—
1.3
Fail
2.0
Fail
6.3
AA
1.3
Fail
1.3
Fail
—
1.6
Fail
5.0
AA
2.2
Fail
2.0
Fail
1.6
Fail
—
3.1
AA Large
6.7
AA
6.3
AA
5.0
AA
3.1
AA Large
—
White BG
1.4Fail
1.5Fail
1.9Fail
3.0Fail
9.3AAA
Black BG
15.2AAA
14.2AAA
11.3AAA
7.0AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6B8
DEDEAD
C5C5A0
B7B671
4E4E3E

Deuteranopia

E7E9BA
E0E1B0
C6C6A2
C0CB70
4F503E

Tritanopia

EFC0C2
E6B7B9
C9A7A9
F16E6D
553F3F

Achromatopsia

DBDBDB
D3D3D3
BDBDBD
929292
484848

Shades & Tints Shades & Tints

#F0D9AD

Dark
Light

#E7D3A1

Dark
Light

#CABE96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d9ad;
  --color-2: #e7d3a1;
  --color-3: #cabe96;
  --color-4: #f86376;
  --color-5: #56433c;
}

SCSS

$color-1: #f0d9ad;
$color-2: #e7d3a1;
$color-3: #cabe96;
$color-4: #f86376;
$color-5: #56433c;

TAILWIND

colors: {
  'brand-1': '#f0d9ad',
  'brand-2': '#e7d3a1',
  'brand-3': '#cabe96',
  'brand-4': '#f86376',
  'brand-5': '#56433c',
}

RGB Array

[240, 217, 173], [231, 211, 161], [202, 190, 150], [248, 99, 118], [86, 67, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0D9AD, #E7D3A1, #CABE96, #F86376, #56433C 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: #f0d9ad; --color-2: #e7d3a1; --color-3: #cabe96; --color-4: #f86376; --color-5: #56433c. 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