← Back to Editor

#E68C55 · #BDB675 · #CCC8A1 · #858382 · #453E3B

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

#E68C55

Apricot · Coral · Warm Sun

HEX
#E68C55
RGB
rgb(230, 140, 85)
HSL
hsl(23, 74%, 62%)
HSB
hsb(23, 63%, 90%)
CMYK
cmyk(0%, 39%, 63%, 10%)
Oklch
oklch(72.4% 0.130 50.9)

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

#BDB675

Autumn Sage · Tan · Sunflower

HEX
#BDB675
RGB
rgb(189, 182, 117)
HSL
hsl(54, 35%, 60%)
HSB
hsb(54, 38%, 74%)
CMYK
cmyk(0%, 4%, 38%, 26%)
Oklch
oklch(76.7% 0.086 102.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CCC8A1

Fresh Green · Tan · Sunflower

HEX
#CCC8A1
RGB
rgb(204, 200, 161)
HSL
hsl(54, 30%, 72%)
HSB
hsb(54, 21%, 80%)
CMYK
cmyk(0%, 2%, 21%, 20%)
Oklch
oklch(82.6% 0.052 102.6)

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

#858382

Ash · Gray · Warm Gray

HEX
#858382
RGB
rgb(133, 131, 130)
HSL
hsl(20, 1%, 52%)
HSB
hsb(20, 2%, 52%)
CMYK
cmyk(0%, 2%, 2%, 48%)
Oklch
oklch(61.1% 0.003 48.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#453E3B

Tangerine · DarkSlateGray · Dark Stone

HEX
#453E3B
RGB
rgb(69, 62, 59)
HSL
hsl(18, 8%, 25%)
HSB
hsb(18, 14%, 27%)
CMYK
cmyk(0%, 10%, 14%, 73%)
Oklch
oklch(37.0% 0.011 44.7)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E68C55
56AFE6

Analogous

E65667
E68C55
E6D556

Triadic

E68C55
56E68D
8D56E6

Split-Comp.

E68C55
56E6D5
5667E6

Tetradic

E68C55
67E656
56AFE6
D556E6

Contrast Matrix WCAG 2.1 Contrast

E68C55
BDB675
CCC8A1
858382
453E3B
—
1.2
Fail
1.5
Fail
1.5
Fail
4.1
AA Large
1.2
Fail
—
1.2
Fail
1.8
Fail
5.0
AA
1.5
Fail
1.2
Fail
—
2.2
Fail
6.2
AA
1.5
Fail
1.8
Fail
2.2
Fail
—
2.8
Fail
4.1
AA Large
5.0
AA
6.2
AA
2.8
Fail
—
White BG
2.5Fail
2.1Fail
1.7Fail
3.8AA Large
10.5AAA
Black BG
8.2AAA
10.1AAA
12.3AAA
5.6AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBE62
BABA85
CACAAA
848482
42423C

Deuteranopia

C4CB66
BABB89
CBCBAD
848482
42433C

Tritanopia

E26D6F
BD9194
CCB2B4
858282
453C3C

Achromatopsia

A1A1A1
B1B1B1
C5C5C5
838383
404040

Shades & Tints Shades & Tints

#E68C55

Dark
Light

#BDB675

Dark
Light

#CCC8A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e68c55;
  --color-2: #bdb675;
  --color-3: #ccc8a1;
  --color-4: #858382;
  --color-5: #453e3b;
}

SCSS

$color-1: #e68c55;
$color-2: #bdb675;
$color-3: #ccc8a1;
$color-4: #858382;
$color-5: #453e3b;

TAILWIND

colors: {
  'brand-1': '#e68c55',
  'brand-2': '#bdb675',
  'brand-3': '#ccc8a1',
  'brand-4': '#858382',
  'brand-5': '#453e3b',
}

RGB Array

[230, 140, 85], [189, 182, 117], [204, 200, 161], [133, 131, 130], [69, 62, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E68C55, #BDB675, #CCC8A1, #858382, #453E3B is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e68c55; --color-2: #bdb675; --color-3: #ccc8a1; --color-4: #858382; --color-5: #453e3b. 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. Restrained colors convey professionalism and trust. 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