← Back to Editor

#D9B504 · #F2F2F2 · #BFBFBF · #737373 · #26221D

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

#D9B504

Autumn Sage · GoldenRod · Honey Gold

HEX
#D9B504
RGB
rgb(217, 181, 4)
HSL
hsl(50, 96%, 43%)
HSB
hsb(50, 98%, 85%)
CMYK
cmyk(0%, 17%, 98%, 15%)
Oklch
oklch(78.2% 0.160 94.4)

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

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#BFBFBF

Silver Gray · Silver · Pearl Gray

HEX
#BFBFBF
RGB
rgb(191, 191, 191)
HSL
hsl(0, 0%, 75%)
HSB
hsb(0, 0%, 75%)
CMYK
cmyk(0%, 0%, 0%, 25%)
Oklch
oklch(80.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#737373

Ink Gray · DimGray · Warm Gray

HEX
#737373
RGB
rgb(115, 115, 115)
HSL
hsl(0, 0%, 45%)
HSB
hsb(0, 0%, 45%)
CMYK
cmyk(0%, 0%, 0%, 55%)
Oklch
oklch(55.6% 0.000 89.9)

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

#26221D

Ochre · Black · Cinnamon

HEX
#26221D
RGB
rgb(38, 34, 29)
HSL
hsl(33, 13%, 13%)
HSB
hsb(33, 24%, 15%)
CMYK
cmyk(0%, 11%, 24%, 85%)
Oklch
oklch(25.5% 0.011 73.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9B504
0427D7

Analogous

D74B04
D9B504
91D704

Triadic

D9B504
04D7B4
B404D7

Split-Comp.

D9B504
0491D7
4B04D7

Tetradic

D9B504
04D74B
0427D7
D70491

Contrast Matrix WCAG 2.1 Contrast

D9B504
F2F2F2
BFBFBF
737373
26221D
—
1.8
Fail
1.1
Fail
2.4
Fail
7.9
AAA
1.8
Fail
—
1.6
Fail
4.2
AA Large
14.1
AAA
1.1
Fail
1.6
Fail
—
2.6
Fail
8.6
AAA
2.4
Fail
4.2
AA Large
2.6
Fail
—
3.3
AA Large
7.9
AAA
14.1
AAA
8.6
AAA
3.3
AA Large
—
White BG
2.0Fail
1.1Fail
1.8Fail
4.7AA
15.8AAA
Black BG
10.6AAA
18.8AAA
11.4AAA
4.4AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C92F
F2F2F2
BFBFBF
737373
24241E

Deuteranopia

CCCE39
F2F2F2
BFBFBF
737373
25251E

Tritanopia

D75158
F2F2F2
BFBFBF
737373
261F1F

Achromatopsia

ACACAC
F2F2F2
BFBFBF
737373
232323

Shades & Tints Shades & Tints

#D9B504

Dark
Light

#F2F2F2

Dark
Light

#BFBFBF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9b504;
  --color-2: #f2f2f2;
  --color-3: #bfbfbf;
  --color-4: #737373;
  --color-5: #26221d;
}

SCSS

$color-1: #d9b504;
$color-2: #f2f2f2;
$color-3: #bfbfbf;
$color-4: #737373;
$color-5: #26221d;

TAILWIND

colors: {
  'brand-1': '#d9b504',
  'brand-2': '#f2f2f2',
  'brand-3': '#bfbfbf',
  'brand-4': '#737373',
  'brand-5': '#26221d',
}

RGB Array

[217, 181, 4], [242, 242, 242], [191, 191, 191], [115, 115, 115], [38, 34, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9B504, #F2F2F2, #BFBFBF, #737373, #26221D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #d9b504; --color-2: #f2f2f2; --color-3: #bfbfbf; --color-4: #737373; --color-5: #26221d. 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. 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