← Back to Editor

#405B60 · #67736E · #8F8B74 · #B6A27E · #DDBA89

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

#405B60

Slate Blue · DarkSlateGray · Mint Ice

HEX
#405B60
RGB
rgb(64, 91, 96)
HSL
hsl(189, 20%, 31%)
HSB
hsb(189, 33%, 38%)
CMYK
cmyk(33%, 5%, 0%, 62%)
Oklch
oklch(45.2% 0.033 210.3)

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

#67736E

Ink Gray · DimGray · Warm Gray

HEX
#67736E
RGB
rgb(103, 115, 110)
HSL
hsl(155, 6%, 43%)
HSB
hsb(155, 10%, 45%)
CMYK
cmyk(10%, 0%, 4%, 55%)
Oklch
oklch(54.4% 0.016 168.8)

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

#8F8B74

Autumn Sage · Gray · Sunflower

HEX
#8F8B74
RGB
rgb(143, 139, 116)
HSL
hsl(51, 11%, 51%)
HSB
hsb(51, 19%, 56%)
CMYK
cmyk(0%, 3%, 19%, 44%)
Oklch
oklch(63.4% 0.033 99.1)

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

#B6A27E

Ginger · Tan · Warm Sun

HEX
#B6A27E
RGB
rgb(182, 162, 126)
HSL
hsl(39, 28%, 60%)
HSB
hsb(39, 31%, 71%)
CMYK
cmyk(0%, 11%, 31%, 29%)
Oklch
oklch(72.1% 0.055 82.1)

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

#DDBA89

Ginger · BurlyWood · Warm Sun

HEX
#DDBA89
RGB
rgb(221, 186, 137)
HSL
hsl(35, 55%, 70%)
HSB
hsb(35, 38%, 87%)
CMYK
cmyk(0%, 16%, 38%, 13%)
Oklch
oklch(80.8% 0.076 75.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

405B60
5F443F

Analogous

3F5F54
405B60
3F4A5F

Triadic

405B60
5F3F5A
5A5F3F

Split-Comp.

405B60
5F3F4A
5F543F

Tetradic

405B60
543F5F
5F443F
4A5F3F

Contrast Matrix WCAG 2.1 Contrast

405B60
67736E
8F8B74
B6A27E
DDBA89
—
1.5
Fail
2.1
Fail
2.9
Fail
4.0
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
2.7
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
4.0
AA Large
2.7
Fail
1.9
Fail
1.4
Fail
—
White BG
7.3AAA
4.9AA
3.4AA Large
2.5Fail
1.8Fail
Black BG
2.9Fail
4.3AA Large
6.1AA
8.5AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C5F
6C6C6F
8D8D7A
ADAD87
CECE95

Deuteranopia

4A485E
6C6B70
8E8E7B
AFB089
D0D398

Tritanopia

415E5E
687070
8F7E7F
B58E8F
DB9EA0

Achromatopsia

535353
6F6F6F
8A8A8A
A4A4A4
BFBFBF

Shades & Tints Shades & Tints

#405B60

Dark
Light

#67736E

Dark
Light

#8F8B74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #405b60;
  --color-2: #67736e;
  --color-3: #8f8b74;
  --color-4: #b6a27e;
  --color-5: #ddba89;
}

SCSS

$color-1: #405b60;
$color-2: #67736e;
$color-3: #8f8b74;
$color-4: #b6a27e;
$color-5: #ddba89;

TAILWIND

colors: {
  'brand-1': '#405b60',
  'brand-2': '#67736e',
  'brand-3': '#8f8b74',
  'brand-4': '#b6a27e',
  'brand-5': '#ddba89',
}

RGB Array

[64, 91, 96], [103, 115, 110], [143, 139, 116], [182, 162, 126], [221, 186, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #405B60, #67736E, #8F8B74, #B6A27E, #DDBA89 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #405b60; --color-2: #67736e; --color-3: #8f8b74; --color-4: #b6a27e; --color-5: #ddba89. 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. 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