← Back to Editor

#DFD935 · #BEBB55 · #77746A · #5E5C59 · #050300

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

#DFD935

Autumn Sage · GoldenRod · Sunflower

HEX
#DFD935
RGB
rgb(223, 217, 53)
HSL
hsl(58, 73%, 54%)
HSB
hsb(58, 76%, 87%)
CMYK
cmyk(0%, 3%, 76%, 13%)
Oklch
oklch(86.3% 0.171 107.3)

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

#BEBB55

Autumn Sage · Tan · Sunflower

HEX
#BEBB55
RGB
rgb(190, 187, 85)
HSL
hsl(58, 45%, 54%)
HSB
hsb(58, 55%, 75%)
CMYK
cmyk(0%, 2%, 55%, 25%)
Oklch
oklch(77.4% 0.125 107.4)

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

#77746A

Ink Gray · DimGray · Warm Gray

HEX
#77746A
RGB
rgb(119, 116, 106)
HSL
hsl(46, 6%, 44%)
HSB
hsb(46, 11%, 47%)
CMYK
cmyk(0%, 3%, 11%, 53%)
Oklch
oklch(55.9% 0.016 93.1)

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

#5E5C59

Ink Gray · DimGray · Charcoal

HEX
#5E5C59
RGB
rgb(94, 92, 89)
HSL
hsl(36, 3%, 36%)
HSB
hsb(36, 5%, 37%)
CMYK
cmyk(0%, 2%, 5%, 63%)
Oklch
oklch(47.6% 0.005 78.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#050300

Ochre · Black · Cinnamon

HEX
#050300
RGB
rgb(5, 3, 0)
HSL
hsl(36, 100%, 1%)
HSB
hsb(36, 100%, 2%)
CMYK
cmyk(0%, 40%, 100%, 98%)
Oklch
oklch(9.9% 0.020 90.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFD935
343ADF

Analogous

DF8434
DFD935
8FDF34

Triadic

DFD935
34DFDA
DA34DF

Split-Comp.

DFD935
348FDF
8434DF

Tetradic

DFD935
34DF84
343ADF
DF348F

Contrast Matrix WCAG 2.1 Contrast

DFD935
BEBB55
77746A
5E5C59
050300
—
1.4
Fail
3.1
AA Large
4.5
AA Large
13.8
AAA
1.4
Fail
—
2.3
Fail
3.3
AA Large
10.2
AAA
3.1
AA Large
2.3
Fail
—
1.4
Fail
4.4
AA Large
4.5
AA Large
3.3
AA Large
1.4
Fail
—
3.1
AA Large
13.8
AAA
10.2
AAA
4.4
AA Large
3.1
AA Large
—
White BG
1.5Fail
2.0Fail
4.7AA
6.7AA
20.6AAA
Black BG
14.1AAA
10.4AAA
4.5AA Large
3.2AA Large
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC5D
BDBD6E
76766C
5D5D5A
040401

Deuteranopia

DDDD66
BDBD74
76766D
5D5D5A
040401

Tritanopia

DF7C83
BE8185
776E6F
5E5A5A
050101

Achromatopsia

C8C8C8
B0B0B0
747474
5C5C5C
030303

Shades & Tints Shades & Tints

#DFD935

Dark
Light

#BEBB55

Dark
Light

#77746A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfd935;
  --color-2: #bebb55;
  --color-3: #77746a;
  --color-4: #5e5c59;
  --color-5: #050300;
}

SCSS

$color-1: #dfd935;
$color-2: #bebb55;
$color-3: #77746a;
$color-4: #5e5c59;
$color-5: #050300;

TAILWIND

colors: {
  'brand-1': '#dfd935',
  'brand-2': '#bebb55',
  'brand-3': '#77746a',
  'brand-4': '#5e5c59',
  'brand-5': '#050300',
}

RGB Array

[223, 217, 53], [190, 187, 85], [119, 116, 106], [94, 92, 89], [5, 3, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFD935, #BEBB55, #77746A, #5E5C59, #050300 is ideal for: tech websites, dark mode UIs, game UIs, 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: #dfd935; --color-2: #bebb55; --color-3: #77746a; --color-4: #5e5c59; --color-5: #050300. 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. 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