← Back to Editor

#405251 · #5B7063 · #919C75 · #CCCB89 · #AFB347

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

#405251

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#405251
RGB
rgb(64, 82, 81)
HSL
hsl(177, 12%, 29%)
HSB
hsb(177, 22%, 32%)
CMYK
cmyk(22%, 0%, 1%, 68%)
Oklch
oklch(42.3% 0.022 192.1)

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

#5B7063

Celadon · DimGray · Forest Green

HEX
#5B7063
RGB
rgb(91, 112, 99)
HSL
hsl(143, 10%, 40%)
HSB
hsb(143, 19%, 44%)
CMYK
cmyk(19%, 0%, 12%, 56%)
Oklch
oklch(52.4% 0.032 157.9)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#919C75

Grass Green · Gray · Olive Green

HEX
#919C75
RGB
rgb(145, 156, 117)
HSL
hsl(77, 16%, 54%)
HSB
hsb(77, 25%, 61%)
CMYK
cmyk(7%, 0%, 25%, 39%)
Oklch
oklch(67.3% 0.057 120.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#CCCB89

Fresh Green · Tan · Sunflower

HEX
#CCCB89
RGB
rgb(204, 203, 137)
HSL
hsl(59, 40%, 67%)
HSB
hsb(59, 33%, 80%)
CMYK
cmyk(0%, 0%, 33%, 20%)
Oklch
oklch(82.7% 0.086 107.4)

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

#AFB347

Autumn Sage · GoldenRod · Honey Gold

HEX
#AFB347
RGB
rgb(175, 179, 71)
HSL
hsl(62, 43%, 49%)
HSB
hsb(62, 60%, 70%)
CMYK
cmyk(2%, 0%, 60%, 30%)
Oklch
oklch(74.2% 0.131 111.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

405251
534142

Analogous

415349
405251
414B53

Triadic

405251
524153
535241

Split-Comp.

405251
53414B
534941

Tetradic

405251
494153
534142
4B5341

Contrast Matrix WCAG 2.1 Contrast

405251
5B7063
919C75
CCCB89
AFB347
—
1.5
Fail
2.8
Fail
4.9
AA
3.7
AA Large
1.5
Fail
—
1.8
Fail
3.2
AA Large
2.4
Fail
2.8
Fail
1.8
Fail
—
1.7
Fail
1.3
Fail
4.9
AA
3.2
AA Large
1.7
Fail
—
1.3
Fail
3.7
AA Large
2.4
Fail
1.3
Fail
1.3
Fail
—
White BG
8.3AAA
5.3AA
2.9Fail
1.7Fail
2.2Fail
Black BG
2.5Fail
3.9AA Large
7.2AAA
12.5AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484851
646466
96967E
CCCC99
B1B161

Deuteranopia

474551
636167
959481
CCCC9D
B1B067

Tritanopia

415151
5C6969
928688
CCA6A8
AF767A

Achromatopsia

4D4D4D
686868
949494
C4C4C4
A5A5A5

Shades & Tints Shades & Tints

#405251

Dark
Light

#5B7063

Dark
Light

#919C75

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #405251;
  --color-2: #5b7063;
  --color-3: #919c75;
  --color-4: #cccb89;
  --color-5: #afb347;
}

SCSS

$color-1: #405251;
$color-2: #5b7063;
$color-3: #919c75;
$color-4: #cccb89;
$color-5: #afb347;

TAILWIND

colors: {
  'brand-1': '#405251',
  'brand-2': '#5b7063',
  'brand-3': '#919c75',
  'brand-4': '#cccb89',
  'brand-5': '#afb347',
}

RGB Array

[64, 82, 81], [91, 112, 99], [145, 156, 117], [204, 203, 137], [175, 179, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #405251, #5B7063, #919C75, #CCCB89, #AFB347 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: #405251; --color-2: #5b7063; --color-3: #919c75; --color-4: #cccb89; --color-5: #afb347. 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