← Back to Editor

#F04859 · #ED9162 · #DDC568 · #999960 · #5A6156

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 Library

Color Details Color Details

#F04859

Peach Pink · Tomato · Coral Red

HEX
#F04859
RGB
rgb(240, 72, 89)
HSL
hsl(354, 85%, 61%)
HSB
hsb(354, 70%, 94%)
CMYK
cmyk(0%, 70%, 63%, 6%)
Oklch
oklch(64.6% 0.203 19.5)

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

#ED9162

Apricot · SandyBrown · Warm Sun

HEX
#ED9162
RGB
rgb(237, 145, 98)
HSL
hsl(20, 79%, 66%)
HSB
hsb(20, 59%, 93%)
CMYK
cmyk(0%, 39%, 59%, 7%)
Oklch
oklch(74.3% 0.128 47.2)

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

#DDC568

Ginger · BurlyWood · Sunflower

HEX
#DDC568
RGB
rgb(221, 197, 104)
HSL
hsl(48, 63%, 64%)
HSB
hsb(48, 53%, 87%)
CMYK
cmyk(0%, 11%, 53%, 13%)
Oklch
oklch(82.5% 0.117 95.2)

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

#999960

Autumn Sage · Gray · Honey Gold

HEX
#999960
RGB
rgb(153, 153, 96)
HSL
hsl(60, 23%, 49%)
HSB
hsb(60, 37%, 60%)
CMYK
cmyk(0%, 0%, 37%, 40%)
Oklch
oklch(66.9% 0.077 108.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#5A6156

Ink Gray · DimGray · Charcoal

HEX
#5A6156
RGB
rgb(90, 97, 86)
HSL
hsl(98, 6%, 36%)
HSB
hsb(98, 11%, 38%)
CMYK
cmyk(7%, 0%, 11%, 62%)
Oklch
oklch(48.3% 0.019 134.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F04859
47F0DF

Analogous

F047AC
F04859
F08B47

Triadic

F04859
58F047
4758F0

Split-Comp.

F04859
47F08B
47ACF0

Tetradic

F04859
ACF047
47F0DF
8B47F0

Contrast Matrix WCAG 2.1 Contrast

F04859
ED9162
DDC568
999960
5A6156
—
1.5
Fail
2.1
Fail
1.2
Fail
1.8
Fail
1.5
Fail
—
1.4
Fail
1.2
Fail
2.7
Fail
2.1
Fail
1.4
Fail
—
1.7
Fail
3.7
AA Large
1.2
Fail
1.2
Fail
1.7
Fail
—
2.2
Fail
1.8
Fail
2.7
Fail
3.7
AA Large
2.2
Fail
—
White BG
3.6AA Large
2.4Fail
1.7Fail
3.0Fail
6.4AA
Black BG
5.8AA
8.8AAA
12.3AAA
7.1AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A655
C5C46D
D3D27F
99996E
5D5D59

Deuteranopia

B1BE54
CBD170
D4D684
999971
5D5C59

Tritanopia

E85251
E87678
DC9094
99797B
5A5B5B

Achromatopsia

7C7C7C
A7A7A7
C2C2C2
939393
5E5E5E

Shades & Tints Shades & Tints

#F04859

Dark
Light

#ED9162

Dark
Light

#DDC568

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f04859;
  --color-2: #ed9162;
  --color-3: #ddc568;
  --color-4: #999960;
  --color-5: #5a6156;
}

SCSS

$color-1: #f04859;
$color-2: #ed9162;
$color-3: #ddc568;
$color-4: #999960;
$color-5: #5a6156;

TAILWIND

colors: {
  'brand-1': '#f04859',
  'brand-2': '#ed9162',
  'brand-3': '#ddc568',
  'brand-4': '#999960',
  'brand-5': '#5a6156',
}

RGB Array

[240, 72, 89], [237, 145, 98], [221, 197, 104], [153, 153, 96], [90, 97, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F04859, #ED9162, #DDC568, #999960, #5A6156 is ideal for: corporate websites, product showcases, portfolios. 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: #f04859; --color-2: #ed9162; --color-3: #ddc568; --color-4: #999960; --color-5: #5a6156. 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. 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