← Back to Editor

#D0BF0F · #C06D3B · #5C6550 · #D64333 · #977A4E

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 Library

Color Details Color Details

#D0BF0F

Autumn Sage · GoldenRod · Honey Gold

HEX
#D0BF0F
RGB
rgb(208, 191, 15)
HSL
hsl(55, 87%, 44%)
HSB
hsb(55, 93%, 82%)
CMYK
cmyk(0%, 8%, 93%, 18%)
Oklch
oklch(79.4% 0.165 102.9)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#C06D3B

Tangerine · Chocolate · Amber Brown

HEX
#C06D3B
RGB
rgb(192, 109, 59)
HSL
hsl(23, 53%, 49%)
HSB
hsb(23, 69%, 75%)
CMYK
cmyk(0%, 43%, 69%, 25%)
Oklch
oklch(61.9% 0.124 49.9)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#5C6550

Grass Green · DimGray · Forest Green

HEX
#5C6550
RGB
rgb(92, 101, 80)
HSL
hsl(86, 12%, 35%)
HSB
hsb(86, 21%, 40%)
CMYK
cmyk(9%, 0%, 21%, 60%)
Oklch
oklch(49.3% 0.034 126.5)

TraditionalGrass Green」· PaintForest Green」· Creative Blush Sunrise

#D64333

Vermilion · Chocolate · Passion Red

HEX
#D64333
RGB
rgb(214, 67, 51)
HSL
hsl(6, 67%, 52%)
HSB
hsb(6, 76%, 84%)
CMYK
cmyk(0%, 69%, 76%, 16%)
Oklch
oklch(59.2% 0.186 29.8)

TraditionalVermilion」· PaintPassion Red」· Creative Blush Sunrise

#977A4E

Ochre · Sienna · Amber Brown

HEX
#977A4E
RGB
rgb(151, 122, 78)
HSL
hsl(36, 32%, 45%)
HSB
hsb(36, 48%, 59%)
CMYK
cmyk(0%, 19%, 48%, 41%)
Oklch
oklch(59.7% 0.070 77.2)

TraditionalOchre」· PaintAmber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0BF0F
0F1FD2

Analogous

D2600F
D0BF0F
80D20F

Triadic

D0BF0F
0FD2C2
C20FD2

Split-Comp.

D0BF0F
0F80D2
600FD2

Tetradic

D0BF0F
0FD260
0F1FD2
D20F80

Contrast Matrix WCAG 2.1 Contrast

D0BF0F
C06D3B
5C6550
D64333
977A4E
2.0
Fail
3.2
AA Large
2.4
Fail
2.1
Fail
2.0
Fail
1.6
Fail
1.2
Fail
1.1
Fail
3.2
AA Large
1.6
Fail
1.4
Fail
1.5
Fail
2.4
Fail
1.2
Fail
1.4
Fail
1.1
Fail
2.1
Fail
1.1
Fail
1.5
Fail
1.1
Fail
White BG
1.9Fail
3.8AA Large
6.1AA
4.5AA Large
4.0AA Large
Black BG
11.1AAA
5.5AA
3.4AA Large
4.7AA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C83A
9C9B47
606055
969537
8A8A59

Deuteranopia

CACB44
A1A74A
5F5F56
9FAA38
8C8E5B

Tritanopia

CF5B63
BC5153
5C595A
CF3A3B
966163

Achromatopsia

B0B0B0
808080
606060
6D6D6D
7E7E7E

Shades & Tints Shades & Tints

#D0BF0F

Dark
Light

#C06D3B

Dark
Light

#5C6550

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0bf0f;
  --color-2: #c06d3b;
  --color-3: #5c6550;
  --color-4: #d64333;
  --color-5: #977a4e;
}

SCSS

$color-1: #d0bf0f;
$color-2: #c06d3b;
$color-3: #5c6550;
$color-4: #d64333;
$color-5: #977a4e;

TAILWIND

colors: {
  'brand-1': '#d0bf0f',
  'brand-2': '#c06d3b',
  'brand-3': '#5c6550',
  'brand-4': '#d64333',
  'brand-5': '#977a4e',
}

RGB Array

[208, 191, 15], [192, 109, 59], [92, 101, 80], [214, 67, 51], [151, 122, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0BF0F, #C06D3B, #5C6550, #D64333, #977A4E 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: #d0bf0f; --color-2: #c06d3b; --color-3: #5c6550; --color-4: #d64333; --color-5: #977a4e. 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. 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