#D2B408 + #CB9703 + #4D3E37 + #584D49 + #958A74 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D2B408

Autumn Sage · GoldenRod · Honey Gold

HEX

#D2B408

RGB

rgb(210, 180, 8)

HSL

hsl(51, 93%, 43%)

HSB

hsb(51, 96%, 82%)

CMYK

cmyk(0%, 14%, 96%, 18%)

Oklch

oklch(77.3% 0.158 96.9)

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

#CB9703

Ochre · DarkGoldenRod · Honey Gold

HEX

#CB9703

RGB

rgb(203, 151, 3)

HSL

hsl(44, 97%, 40%)

HSB

hsb(44, 99%, 80%)

CMYK

cmyk(0%, 26%, 99%, 20%)

Oklch

oklch(70.7% 0.145 83.7)

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

#4D3E37

Tangerine · DarkSlateGray · Amber Brown

HEX

#4D3E37

RGB

rgb(77, 62, 55)

HSL

hsl(19, 17%, 26%)

HSB

hsb(19, 29%, 30%)

CMYK

cmyk(0%, 19%, 29%, 70%)

Oklch

oklch(37.8% 0.024 46.4)

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

#584D49

Tangerine · DarkOliveGreen · Charcoal

HEX

#584D49

RGB

rgb(88, 77, 73)

HSL

hsl(16, 9%, 32%)

HSB

hsb(16, 17%, 35%)

CMYK

cmyk(0%, 12%, 17%, 65%)

Oklch

oklch(43.0% 0.016 41.1)

Traditional「Tangerine」· Paint「Charcoal」· Creative Midnight Shadow

#958A74

Ginger · Gray · Sunflower

HEX

#958A74

RGB

rgb(149, 138, 116)

HSL

hsl(40, 13%, 52%)

HSB

hsb(40, 22%, 58%)

CMYK

cmyk(0%, 7%, 22%, 42%)

Oklch

oklch(63.7% 0.034 84.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2B408

0826D4

Analogous

D44F08

D2B408

8CD408

Triadic

D2B408

08D4B5

B508D4

Split-Comp.

D2B408

088CD4

4F08D4

Tetradic

D2B408

08D44F

0826D4

D4088C

Contrast Matrix WCAG 2.1 Contrast

D2B408	CB9703	4D3E37	584D49	958A74
—	1.3 Fail	5.0 AA	4.0 AA Large	1.7 Fail
1.3 Fail	—	3.9 AA Large	3.1 AA Large	1.3 Fail
5.0 AA	3.9 AA Large	—	1.2 Fail	3.0 Fail
4.0 AA Large	3.1 AA Large	1.2 Fail	—	2.4 Fail
1.7 Fail	1.3 Fail	3.0 Fail	2.4 Fail	—

White BG

2.0Fail

2.6Fail

10.2AAA

8.2AAA

3.4AA Large

Black BG

10.3AAA

8.0AAA

2.1Fail

2.6Fail

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C532

B4B427

474639

53534A

909079

Deuteranopia

C7C93C

B8BB2F

474939

54554A

91927B

Tritanopia

D1525A

C84349

4C3A3A

574B4B

947E7E

Achromatopsia

A9A9A9

969696

424242

505050

8B8B8B

Shades & Tints Shades & Tints

#D2B408

Dark

Light

#CB9703

Dark

Light

#4D3E37

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2b408;
  --color-2: #cb9703;
  --color-3: #4d3e37;
  --color-4: #584d49;
  --color-5: #958a74;
}

SCSS

$color-1: #d2b408;
$color-2: #cb9703;
$color-3: #4d3e37;
$color-4: #584d49;
$color-5: #958a74;

TAILWIND

colors: {
  'brand-1': '#d2b408',
  'brand-2': '#cb9703',
  'brand-3': '#4d3e37',
  'brand-4': '#584d49',
  'brand-5': '#958a74',
}

RGB Array

[210, 180, 8], [203, 151, 3], [77, 62, 55], [88, 77, 73], [149, 138, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2B408, #CB9703, #4D3E37, #584D49, #958A74 is ideal for: tech websites, dark mode UIs, game UIs. 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: #d2b408; --color-2: #cb9703; --color-3: #4d3e37; --color-4: #584d49; --color-5: #958a74. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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