← Back to Editor

#DEE353 · #E4AE4A · #F38258 · #8C6D64 · #606A66

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

#DEE353

Fresh Green · Khaki · Sunflower

HEX
#DEE353
RGB
rgb(222, 227, 83)
HSL
hsl(62, 72%, 61%)
HSB
hsb(62, 63%, 89%)
CMYK
cmyk(2%, 0%, 63%, 11%)
Oklch
oklch(88.6% 0.163 111.2)

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

#E4AE4A

Ginger · SandyBrown · Warm Sun

HEX
#E4AE4A
RGB
rgb(228, 174, 74)
HSL
hsl(39, 74%, 59%)
HSB
hsb(39, 68%, 89%)
CMYK
cmyk(0%, 24%, 68%, 11%)
Oklch
oklch(78.3% 0.131 80.0)

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

#F38258

Apricot · Coral · Warm Sun

HEX
#F38258
RGB
rgb(243, 130, 88)
HSL
hsl(16, 87%, 65%)
HSB
hsb(16, 64%, 95%)
CMYK
cmyk(0%, 47%, 64%, 5%)
Oklch
oklch(72.5% 0.150 40.7)

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

#8C6D64

Crimson · DimGray · Passion Red

HEX
#8C6D64
RGB
rgb(140, 109, 100)
HSL
hsl(13, 17%, 47%)
HSB
hsb(13, 29%, 55%)
CMYK
cmyk(0%, 22%, 29%, 45%)
Oklch
oklch(56.3% 0.042 36.8)

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

#606A66

Ink Gray · DimGray · Charcoal

HEX
#606A66
RGB
rgb(96, 106, 102)
HSL
hsl(156, 5%, 40%)
HSB
hsb(156, 9%, 42%)
CMYK
cmyk(9%, 0%, 4%, 58%)
Oklch
oklch(51.4% 0.014 169.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEE353
5954E3

Analogous

E3A054
DEE353
97E354

Triadic

DEE353
54DEE3
E354DE

Split-Comp.

DEE353
5497E3
A054E3

Tetradic

DEE353
54E3A0
5954E3
E35497

Contrast Matrix WCAG 2.1 Contrast

DEE353
E4AE4A
F38258
8C6D64
606A66
—
1.5
Fail
1.9
Fail
3.4
AA Large
4.1
AA Large
1.5
Fail
—
1.3
Fail
2.3
Fail
2.8
Fail
1.9
Fail
1.3
Fail
—
1.8
Fail
2.2
Fail
3.4
AA Large
2.3
Fail
1.8
Fail
—
1.2
Fail
4.1
AA Large
2.8
Fail
2.2
Fail
1.2
Fail
—
White BG
1.4Fail
2.0Fail
2.6Fail
4.7AA
5.6AA
Black BG
15.2AAA
10.5AAA
8.1AAA
4.5AA Large
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E076
CDCC62
C2C162
7F7E66
646467

Deuteranopia

E0DF7E
D0D468
C9D165
808367
646367

Tritanopia

DE9197
E1757A
ED6A6C
8A6868
606868

Achromatopsia

D1D1D1
B3B3B3
9F9F9F
757575
676767

Shades & Tints Shades & Tints

#DEE353

Dark
Light

#E4AE4A

Dark
Light

#F38258

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dee353;
  --color-2: #e4ae4a;
  --color-3: #f38258;
  --color-4: #8c6d64;
  --color-5: #606a66;
}

SCSS

$color-1: #dee353;
$color-2: #e4ae4a;
$color-3: #f38258;
$color-4: #8c6d64;
$color-5: #606a66;

TAILWIND

colors: {
  'brand-1': '#dee353',
  'brand-2': '#e4ae4a',
  'brand-3': '#f38258',
  'brand-4': '#8c6d64',
  'brand-5': '#606a66',
}

RGB Array

[222, 227, 83], [228, 174, 74], [243, 130, 88], [140, 109, 100], [96, 106, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEE353, #E4AE4A, #F38258, #8C6D64, #606A66 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: #dee353; --color-2: #e4ae4a; --color-3: #f38258; --color-4: #8c6d64; --color-5: #606a66. 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