← Back to Editor

#E3BA6A · #BFA374 · #6D756A · #4D686F · #364461

cool

A 5-color cool 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

#E3BA6A

Ginger · BurlyWood · Sunflower

HEX
#E3BA6A
RGB
rgb(227, 186, 106)
HSL
hsl(40, 68%, 65%)
HSB
hsb(40, 53%, 89%)
CMYK
cmyk(0%, 18%, 53%, 11%)
Oklch
oklch(80.9% 0.109 82.8)

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

#BFA374

Ginger · Tan · Warm Sun

HEX
#BFA374
RGB
rgb(191, 163, 116)
HSL
hsl(38, 37%, 60%)
HSB
hsb(38, 39%, 75%)
CMYK
cmyk(0%, 15%, 39%, 25%)
Oklch
oklch(72.9% 0.071 80.2)

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

#6D756A

Ink Gray · DimGray · Warm Gray

HEX
#6D756A
RGB
rgb(109, 117, 106)
HSL
hsl(104, 5%, 44%)
HSB
hsb(104, 9%, 46%)
CMYK
cmyk(7%, 0%, 9%, 54%)
Oklch
oklch(55.2% 0.019 137.1)

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

#4D686F

Slate Blue · DimGray · Mint Ice

HEX
#4D686F
RGB
rgb(77, 104, 111)
HSL
hsl(192, 18%, 37%)
HSB
hsb(192, 31%, 44%)
CMYK
cmyk(31%, 6%, 0%, 56%)
Oklch
oklch(49.9% 0.034 215.4)

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

#364461

Indigo · DarkSlateGray · Prussian Blue

HEX
#364461
RGB
rgb(54, 68, 97)
HSL
hsl(220, 28%, 30%)
HSB
hsb(220, 44%, 38%)
CMYK
cmyk(44%, 30%, 0%, 62%)
Oklch
oklch(38.8% 0.053 264.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3BA6A
6992E2

Analogous

E27D69
E3BA6A
CEE269

Triadic

E3BA6A
69E2BA
BA69E2

Split-Comp.

E3BA6A
69CEE2
7D69E2

Tetradic

E3BA6A
69E27D
6992E2
E269CE

Contrast Matrix WCAG 2.1 Contrast

E3BA6A
BFA374
6D756A
4D686F
364461
—
1.3
Fail
2.6
Fail
3.3
AA Large
5.3
AA
1.3
Fail
—
2.0
Fail
2.5
Fail
4.0
AA Large
2.6
Fail
2.0
Fail
—
1.2
Fail
2.0
Fail
3.3
AA Large
2.5
Fail
1.2
Fail
—
1.6
Fail
5.3
AA
4.0
AA Large
2.0
Fail
1.6
Fail
—
White BG
1.8Fail
2.4Fail
4.8AA
6.0AA
9.7AAA
Black BG
11.5AAA
8.7AAA
4.4AA Large
3.5AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D17D
B3B37F
70716D
59596D
3C3C5A

Deuteranopia

D4D782
B5B782
706F6D
57556D
3B3A58

Tritanopia

E18D90
BE888A
6D6F6F
4E6C6C
375453

Achromatopsia

BDBDBD
A6A6A6
717171
616161
434343

Shades & Tints Shades & Tints

#E3BA6A

Dark
Light

#BFA374

Dark
Light

#6D756A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3ba6a;
  --color-2: #bfa374;
  --color-3: #6d756a;
  --color-4: #4d686f;
  --color-5: #364461;
}

SCSS

$color-1: #e3ba6a;
$color-2: #bfa374;
$color-3: #6d756a;
$color-4: #4d686f;
$color-5: #364461;

TAILWIND

colors: {
  'brand-1': '#e3ba6a',
  'brand-2': '#bfa374',
  'brand-3': '#6d756a',
  'brand-4': '#4d686f',
  'brand-5': '#364461',
}

RGB Array

[227, 186, 106], [191, 163, 116], [109, 117, 106], [77, 104, 111], [54, 68, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #E3BA6A, #BFA374, #6D756A, #4D686F, #364461 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: #e3ba6a; --color-2: #bfa374; --color-3: #6d756a; --color-4: #4d686f; --color-5: #364461. 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 cool-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