← Back to Editor

#FED3C2 · #F98E84 · #AB865A · #584E42 · #473133

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

#FED3C2

Apricot · Bisque · Peach Orange

HEX
#FED3C2
RGB
rgb(254, 211, 194)
HSL
hsl(17, 97%, 88%)
HSB
hsb(17, 24%, 100%)
CMYK
cmyk(0%, 17%, 24%, 0%)
Oklch
oklch(89.9% 0.054 42.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F98E84

Peach Pink · LightCoral · Coral Red

HEX
#F98E84
RGB
rgb(249, 142, 132)
HSL
hsl(5, 91%, 75%)
HSB
hsb(5, 47%, 98%)
CMYK
cmyk(0%, 43%, 47%, 2%)
Oklch
oklch(75.9% 0.131 26.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#AB865A

Ginger · Gray · Warm Sun

HEX
#AB865A
RGB
rgb(171, 134, 90)
HSL
hsl(33, 33%, 51%)
HSB
hsb(33, 47%, 67%)
CMYK
cmyk(0%, 22%, 47%, 33%)
Oklch
oklch(64.5% 0.075 70.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#584E42

Ochre · DarkOliveGreen · Amber Brown

HEX
#584E42
RGB
rgb(88, 78, 66)
HSL
hsl(33, 14%, 30%)
HSB
hsb(33, 25%, 35%)
CMYK
cmyk(0%, 11%, 25%, 65%)
Oklch
oklch(43.0% 0.023 72.2)

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

#473133

Crimson · DarkSlateGray · Wine Red

HEX
#473133
RGB
rgb(71, 49, 51)
HSL
hsl(355, 18%, 24%)
HSB
hsb(355, 31%, 28%)
CMYK
cmyk(0%, 31%, 28%, 72%)
Oklch
oklch(33.9% 0.032 12.9)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FED3C2
C3EDFE

Analogous

FEC3D0
FED3C2
FEF1C3

Triadic

FED3C2
C3FED4
D4C3FE

Split-Comp.

FED3C2
C3FEF1
C3D0FE

Tetradic

FED3C2
D0FEC3
C3EDFE
F1C3FE

Contrast Matrix WCAG 2.1 Contrast

FED3C2
F98E84
AB865A
584E42
473133
—
1.7
Fail
2.4
Fail
5.9
AA
8.7
AAA
1.7
Fail
—
1.5
Fail
3.6
AA Large
5.3
AA
2.4
Fail
1.5
Fail
—
2.4
Fail
3.6
AA Large
5.9
AA
3.6
AA Large
2.4
Fail
—
1.5
Fail
8.7
AAA
5.3
AA
3.6
AA Large
1.5
Fail
—
White BG
1.4Fail
2.3Fail
3.3AA Large
8.1AAA
12.0AAA
Black BG
15.3AAA
9.2AAA
6.3AA
2.6Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBC6
CBCA86
9B9B65
545445
3D3D33

Deuteranopia

EEF1C7
D1D987
9DA067
545546
3F4032

Tritanopia

FCC9CA
F48889
A96D6F
584748
463232

Achromatopsia

DEDEDE
ADADAD
8C8C8C
505050
383838

Shades & Tints Shades & Tints

#FED3C2

Dark
Light

#F98E84

Dark
Light

#AB865A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fed3c2;
  --color-2: #f98e84;
  --color-3: #ab865a;
  --color-4: #584e42;
  --color-5: #473133;
}

SCSS

$color-1: #fed3c2;
$color-2: #f98e84;
$color-3: #ab865a;
$color-4: #584e42;
$color-5: #473133;

TAILWIND

colors: {
  'brand-1': '#fed3c2',
  'brand-2': '#f98e84',
  'brand-3': '#ab865a',
  'brand-4': '#584e42',
  'brand-5': '#473133',
}

RGB Array

[254, 211, 194], [249, 142, 132], [171, 134, 90], [88, 78, 66], [71, 49, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FED3C2, #F98E84, #AB865A, #584E42, #473133 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: #fed3c2; --color-2: #f98e84; --color-3: #ab865a; --color-4: #584e42; --color-5: #473133. 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