← Back to Editor

#386C6A · #E3B287 · #CC9471 · #CE8165 · #9A6D08

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

#386C6A

Mineral Blue · SeaGreen · Mint Ice

HEX
#386C6A
RGB
rgb(56, 108, 106)
HSL
hsl(178, 32%, 32%)
HSB
hsb(178, 48%, 42%)
CMYK
cmyk(48%, 0%, 2%, 58%)
Oklch
oklch(49.5% 0.056 192.2)

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

#E3B287

Apricot · BurlyWood · Warm Sun

HEX
#E3B287
RGB
rgb(227, 178, 135)
HSL
hsl(28, 62%, 71%)
HSB
hsb(28, 41%, 89%)
CMYK
cmyk(0%, 22%, 41%, 11%)
Oklch
oklch(79.8% 0.081 62.5)

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

#CC9471

Apricot · DarkSalmon · Warm Sun

HEX
#CC9471
RGB
rgb(204, 148, 113)
HSL
hsl(23, 47%, 62%)
HSB
hsb(23, 45%, 80%)
CMYK
cmyk(0%, 27%, 45%, 20%)
Oklch
oklch(71.2% 0.083 53.0)

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

#CE8165

Tangerine · DarkSalmon · Warm Sun

HEX
#CE8165
RGB
rgb(206, 129, 101)
HSL
hsl(16, 52%, 60%)
HSB
hsb(16, 51%, 81%)
CMYK
cmyk(0%, 37%, 51%, 19%)
Oklch
oklch(67.8% 0.104 40.7)

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

#9A6D08

Ochre · Olive · Honey Gold

HEX
#9A6D08
RGB
rgb(154, 109, 8)
HSL
hsl(42, 90%, 32%)
HSB
hsb(42, 95%, 60%)
CMYK
cmyk(0%, 29%, 95%, 40%)
Oklch
oklch(56.7% 0.115 79.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

386C6A
6C3739

Analogous

376C50
386C6A
37536C

Triadic

386C6A
6A376C
6C6A37

Split-Comp.

386C6A
6C3753
6C5037

Tetradic

386C6A
50376C
6C3739
536C37

Contrast Matrix WCAG 2.1 Contrast

386C6A
E3B287
CC9471
CE8165
9A6D08
—
3.1
AA Large
2.3
Fail
2.0
Fail
1.3
Fail
3.1
AA Large
—
1.4
Fail
1.6
Fail
2.4
Fail
2.3
Fail
1.4
Fail
—
1.2
Fail
1.8
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
1.3
Fail
2.4
Fail
1.8
Fail
1.5
Fail
—
White BG
6.0AA
1.9Fail
2.6Fail
3.0AA Large
4.6AA
Black BG
3.5AA Large
11.0AAA
8.0AAA
7.0AA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F6A
CECD91
B4B379
ADAC6C
878620

Deuteranopia

4C486B
D1D494
B7BB7C
B1B76D
898D26

Tritanopia

3B6B6B
E19A9B
C98082
CA7172
983438

Achromatopsia

5C5C5C
BCBCBC
A1A1A1
959595
6F6F6F

Shades & Tints Shades & Tints

#386C6A

Dark
Light

#E3B287

Dark
Light

#CC9471

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #386c6a;
  --color-2: #e3b287;
  --color-3: #cc9471;
  --color-4: #ce8165;
  --color-5: #9a6d08;
}

SCSS

$color-1: #386c6a;
$color-2: #e3b287;
$color-3: #cc9471;
$color-4: #ce8165;
$color-5: #9a6d08;

TAILWIND

colors: {
  'brand-1': '#386c6a',
  'brand-2': '#e3b287',
  'brand-3': '#cc9471',
  'brand-4': '#ce8165',
  'brand-5': '#9a6d08',
}

RGB Array

[56, 108, 106], [227, 178, 135], [204, 148, 113], [206, 129, 101], [154, 109, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #386C6A, #E3B287, #CC9471, #CE8165, #9A6D08 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: #386c6a; --color-2: #e3b287; --color-3: #cc9471; --color-4: #ce8165; --color-5: #9a6d08. 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