← Back to Editor

#402F37 · #78654F · #C2A651 · #F2DB96 · #B1C7A7

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

#402F37

Dark Violet · DarkSlateGray · Raspberry

HEX
#402F37
RGB
rgb(64, 47, 55)
HSL
hsl(332, 15%, 22%)
HSB
hsb(332, 27%, 25%)
CMYK
cmyk(0%, 27%, 14%, 75%)
Oklch
oklch(32.8% 0.028 348.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#78654F

Ochre · DimGray · Amber Brown

HEX
#78654F
RGB
rgb(120, 101, 79)
HSL
hsl(32, 21%, 39%)
HSB
hsb(32, 34%, 47%)
CMYK
cmyk(0%, 16%, 34%, 53%)
Oklch
oklch(51.9% 0.041 70.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#C2A651

Ginger · SandyBrown · Sunflower

HEX
#C2A651
RGB
rgb(194, 166, 81)
HSL
hsl(45, 48%, 54%)
HSB
hsb(45, 58%, 76%)
CMYK
cmyk(0%, 14%, 58%, 24%)
Oklch
oklch(73.3% 0.110 91.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F2DB96

Goose Yellow · Khaki · Lemon Cream

HEX
#F2DB96
RGB
rgb(242, 219, 150)
HSL
hsl(45, 78%, 77%)
HSB
hsb(45, 38%, 95%)
CMYK
cmyk(0%, 10%, 38%, 5%)
Oklch
oklch(89.5% 0.091 91.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B1C7A7

Celadon · Silver · Apple Green

HEX
#B1C7A7
RGB
rgb(177, 199, 167)
HSL
hsl(101, 22%, 72%)
HSB
hsb(101, 16%, 78%)
CMYK
cmyk(11%, 0%, 16%, 22%)
Oklch
oklch(80.4% 0.050 135.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

402F37
304139

Analogous

413040
402F37
413030

Triadic

402F37
384130
303841

Split-Comp.

402F37
304130
304041

Tetradic

402F37
404130
304139
303041

Contrast Matrix WCAG 2.1 Contrast

402F37
78654F
C2A651
F2DB96
B1C7A7
—
2.2
Fail
5.3
AA
9.1
AAA
6.9
AA
2.2
Fail
—
2.4
Fail
4.1
AA Large
3.1
AA Large
5.3
AA
2.4
Fail
—
1.7
Fail
1.3
Fail
9.1
AAA
4.1
AA Large
1.7
Fail
—
1.3
Fail
6.9
AA
3.1
AA Large
1.3
Fail
1.3
Fail
—
White BG
12.5AAA
5.6AA
2.4Fail
1.4Fail
1.8Fail
Black BG
1.7Fail
3.8AA Large
8.9AAA
15.3AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

393835
707054
B6B666
E8E8A7
BBBBAF

Deuteranopia

3A3B35
717256
B8BA6B
E9EBAB
B9B8B1

Tritanopia

3F3433
775959
C17679
F1B4B7
B2B5B6

Achromatopsia

353535
686868
A5A5A5
DADADA
BDBDBD

Shades & Tints Shades & Tints

#402F37

Dark
Light

#78654F

Dark
Light

#C2A651

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #402f37;
  --color-2: #78654f;
  --color-3: #c2a651;
  --color-4: #f2db96;
  --color-5: #b1c7a7;
}

SCSS

$color-1: #402f37;
$color-2: #78654f;
$color-3: #c2a651;
$color-4: #f2db96;
$color-5: #b1c7a7;

TAILWIND

colors: {
  'brand-1': '#402f37',
  'brand-2': '#78654f',
  'brand-3': '#c2a651',
  'brand-4': '#f2db96',
  'brand-5': '#b1c7a7',
}

RGB Array

[64, 47, 55], [120, 101, 79], [194, 166, 81], [242, 219, 150], [177, 199, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #402F37, #78654F, #C2A651, #F2DB96, #B1C7A7 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #402f37; --color-2: #78654f; --color-3: #c2a651; --color-4: #f2db96; --color-5: #b1c7a7. 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. 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