← Back to Editor

#DEDC8C · #EDC472 · #FC6D51 · #BD6762 · #566669

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DEDC8C

Fresh Green · Khaki · Sunflower

HEX
#DEDC8C
RGB
rgb(222, 220, 140)
HSL
hsl(59, 55%, 71%)
HSB
hsb(59, 37%, 87%)
CMYK
cmyk(0%, 1%, 37%, 13%)
Oklch
oklch(87.8% 0.101 107.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EDC472

Ginger · BurlyWood · Sunflower

HEX
#EDC472
RGB
rgb(237, 196, 114)
HSL
hsl(40, 77%, 69%)
HSB
hsb(40, 52%, 93%)
CMYK
cmyk(0%, 17%, 52%, 7%)
Oklch
oklch(83.9% 0.111 83.5)

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

#FC6D51

Peach Pink · Tomato · Coral Red

HEX
#FC6D51
RGB
rgb(252, 109, 81)
HSL
hsl(10, 97%, 65%)
HSB
hsb(10, 68%, 99%)
CMYK
cmyk(0%, 57%, 68%, 1%)
Oklch
oklch(70.6% 0.181 32.8)

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

#BD6762

Crimson · Sienna · Passion Red

HEX
#BD6762
RGB
rgb(189, 103, 98)
HSL
hsl(3, 41%, 56%)
HSB
hsb(3, 48%, 74%)
CMYK
cmyk(0%, 46%, 48%, 26%)
Oklch
oklch(61.1% 0.111 24.3)

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

#566669

Slate Blue · DimGray · Mint Ice

HEX
#566669
RGB
rgb(86, 102, 105)
HSL
hsl(189, 10%, 37%)
HSB
hsb(189, 18%, 41%)
CMYK
cmyk(18%, 3%, 0%, 59%)
Oklch
oklch(49.8% 0.020 210.2)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEDC8C
8C8EDE

Analogous

DEB48C
DEDC8C
B6DE8C

Triadic

DEDC8C
8CDEDC
DC8CDE

Split-Comp.

DEDC8C
8CB6DE
B48CDE

Tetradic

DEDC8C
8CDEB4
8C8EDE
DE8CB6

Contrast Matrix WCAG 2.1 Contrast

DEDC8C
EDC472
FC6D51
BD6762
566669
—
1.2
Fail
2.0
Fail
2.8
Fail
4.2
AA Large
1.2
Fail
—
1.7
Fail
2.4
Fail
3.6
AA Large
2.0
Fail
1.7
Fail
—
1.4
Fail
2.1
Fail
2.8
Fail
2.4
Fail
1.4
Fail
—
1.5
Fail
4.2
AA Large
3.6
AA Large
2.1
Fail
1.5
Fail
—
White BG
1.4Fail
1.6Fail
2.8Fail
4.0AA Large
6.0AA
Black BG
14.7AAA
12.7AAA
7.4AAA
5.3AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDD9F
DBDB86
BEBD58
989763
5D5D68

Deuteranopia

DDDDA4
DEE18B
C6D159
9DA364
5C5B68

Tritanopia

DEAFB2
EB9699
F55D5E
B96464
576868

Achromatopsia

D3D3D3
C7C7C7
959595
808080
626262

Shades & Tints Shades & Tints

#DEDC8C

Dark
Light

#EDC472

Dark
Light

#FC6D51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dedc8c;
  --color-2: #edc472;
  --color-3: #fc6d51;
  --color-4: #bd6762;
  --color-5: #566669;
}

SCSS

$color-1: #dedc8c;
$color-2: #edc472;
$color-3: #fc6d51;
$color-4: #bd6762;
$color-5: #566669;

TAILWIND

colors: {
  'brand-1': '#dedc8c',
  'brand-2': '#edc472',
  'brand-3': '#fc6d51',
  'brand-4': '#bd6762',
  'brand-5': '#566669',
}

RGB Array

[222, 220, 140], [237, 196, 114], [252, 109, 81], [189, 103, 98], [86, 102, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEDC8C, #EDC472, #FC6D51, #BD6762, #566669 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: #dedc8c; --color-2: #edc472; --color-3: #fc6d51; --color-4: #bd6762; --color-5: #566669. 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