← Back to Editor

#F9A96C · #E4D7C4 · #E4B89F · #C84878 · #5D2B51

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

#F9A96C

Apricot · SandyBrown · Warm Sun

HEX
#F9A96C
RGB
rgb(249, 169, 108)
HSL
hsl(26, 92%, 70%)
HSB
hsb(26, 57%, 98%)
CMYK
cmyk(0%, 32%, 57%, 2%)
Oklch
oklch(80.0% 0.122 57.2)

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

#E4D7C4

Goose Yellow · LightGray · Peach Orange

HEX
#E4D7C4
RGB
rgb(228, 215, 196)
HSL
hsl(36, 37%, 83%)
HSB
hsb(36, 14%, 89%)
CMYK
cmyk(0%, 6%, 14%, 11%)
Oklch
oklch(88.5% 0.029 77.5)

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

#E4B89F

Apricot · BurlyWood · Peach Orange

HEX
#E4B89F
RGB
rgb(228, 184, 159)
HSL
hsl(22, 56%, 76%)
HSB
hsb(22, 30%, 89%)
CMYK
cmyk(0%, 19%, 30%, 11%)
Oklch
oklch(81.5% 0.061 51.1)

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

#C84878

Dark Violet · MediumVioletRed · Rose Pink

HEX
#C84878
RGB
rgb(200, 72, 120)
HSL
hsl(338, 54%, 53%)
HSB
hsb(338, 64%, 78%)
CMYK
cmyk(0%, 64%, 40%, 22%)
Oklch
oklch(58.9% 0.168 0.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#5D2B51

Rose Purple · DarkSlateGray · Eggplant

HEX
#5D2B51
RGB
rgb(93, 43, 81)
HSL
hsl(314, 37%, 27%)
HSB
hsb(314, 54%, 36%)
CMYK
cmyk(0%, 54%, 13%, 64%)
Oklch
oklch(37.1% 0.090 337.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9A96C
6CBCF9

Analogous

F96C76
F9A96C
F9EF6C

Triadic

F9A96C
6CF9A9
A96CF9

Split-Comp.

F9A96C
6CF9EF
6C76F9

Tetradic

F9A96C
76F96C
6CBCF9
EF6CF9

Contrast Matrix WCAG 2.1 Contrast

F9A96C
E4D7C4
E4B89F
C84878
5D2B51
—
1.4
Fail
1.1
Fail
2.3
Fail
5.7
AA
1.4
Fail
—
1.3
Fail
3.2
AA Large
7.7
AAA
1.1
Fail
1.3
Fail
—
2.5
Fail
6.0
AA
2.3
Fail
3.2
AA Large
2.5
Fail
—
2.4
Fail
5.7
AA
7.7
AAA
6.0
AA
2.4
Fail
—
White BG
1.9Fail
1.4Fail
1.8Fail
4.5AA
10.9AAA
Black BG
10.9AAA
14.8AAA
11.7AAA
4.7AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D67B
DEDEC9
D1D1A5
918F6C
474748

Deuteranopia

DBE17E
DFE0CA
D4D7A7
98A26A
4A4E46

Tritanopia

F58689
E3CCCD
E2AAAB
C26361
5B413F

Achromatopsia

BABABA
D9D9D9
C2C2C2
747474
3E3E3E

Shades & Tints Shades & Tints

#F9A96C

Dark
Light

#E4D7C4

Dark
Light

#E4B89F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9a96c;
  --color-2: #e4d7c4;
  --color-3: #e4b89f;
  --color-4: #c84878;
  --color-5: #5d2b51;
}

SCSS

$color-1: #f9a96c;
$color-2: #e4d7c4;
$color-3: #e4b89f;
$color-4: #c84878;
$color-5: #5d2b51;

TAILWIND

colors: {
  'brand-1': '#f9a96c',
  'brand-2': '#e4d7c4',
  'brand-3': '#e4b89f',
  'brand-4': '#c84878',
  'brand-5': '#5d2b51',
}

RGB Array

[249, 169, 108], [228, 215, 196], [228, 184, 159], [200, 72, 120], [93, 43, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9A96C, #E4D7C4, #E4B89F, #C84878, #5D2B51 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: #f9a96c; --color-2: #e4d7c4; --color-3: #e4b89f; --color-4: #c84878; --color-5: #5d2b51. 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