← Back to Editor

#BFA730 · #302B29 · #787878 · #D8D8C0 · #A8A82F

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

#BFA730

Autumn Sage · GoldenRod · Honey Gold

HEX
#BFA730
RGB
rgb(191, 167, 48)
HSL
hsl(50, 60%, 47%)
HSB
hsb(50, 75%, 75%)
CMYK
cmyk(0%, 13%, 75%, 25%)
Oklch
oklch(72.9% 0.135 97.3)

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

#302B29

Tangerine · DarkSlateGray · Dark Stone

HEX
#302B29
RGB
rgb(48, 43, 41)
HSL
hsl(17, 8%, 17%)
HSB
hsb(17, 15%, 19%)
CMYK
cmyk(0%, 10%, 15%, 81%)
Oklch
oklch(29.4% 0.008 43.2)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#787878

Ink Gray · Gray · Warm Gray

HEX
#787878
RGB
rgb(120, 120, 120)
HSL
hsl(0, 0%, 47%)
HSB
hsb(0, 0%, 47%)
CMYK
cmyk(0%, 0%, 0%, 53%)
Oklch
oklch(57.3% 0.000 89.9)

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

#D8D8C0

Fresh Green · LightGray · Lemon Cream

HEX
#D8D8C0
RGB
rgb(216, 216, 192)
HSL
hsl(60, 24%, 80%)
HSB
hsb(60, 11%, 85%)
CMYK
cmyk(0%, 0%, 11%, 15%)
Oklch
oklch(87.6% 0.032 107.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#A8A82F

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A8A82F
RGB
rgb(168, 168, 47)
HSL
hsl(60, 56%, 42%)
HSB
hsb(60, 72%, 66%)
CMYK
cmyk(0%, 0%, 72%, 34%)
Oklch
oklch(71.0% 0.138 109.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFA730
3048C0

Analogous

C06030
BFA730
90C030

Triadic

BFA730
30C0A8
A830C0

Split-Comp.

BFA730
3090C0
6030C0

Tetradic

BFA730
30C060
3048C0
C03090

Contrast Matrix WCAG 2.1 Contrast

BFA730
302B29
787878
D8D8C0
A8A82F
—
5.8
AA
1.8
Fail
1.7
Fail
1.1
Fail
5.8
AA
—
3.2
AA Large
9.6
AAA
5.5
AA
1.8
Fail
3.2
AA Large
—
3.0
AA Large
1.7
Fail
1.7
Fail
9.6
AAA
3.0
AA Large
—
1.7
Fail
1.1
Fail
5.5
AA
1.7
Fail
1.7
Fail
—
White BG
2.4Fail
14.0AAA
4.4AA Large
1.4Fail
2.5Fail
Black BG
8.8AAA
1.5Fail
4.8AA
14.5AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B44D
2E2E29
787878
D8D8C6
A8A84C

Deuteranopia

B6B854
2E2E2A
787878
D8D8C7
A8A853

Tritanopia

BE6469
302A2A
787878
D8CACB
A86368

Achromatopsia

A1A1A1
2C2C2C
787878
D5D5D5
9A9A9A

Shades & Tints Shades & Tints

#BFA730

Dark
Light

#302B29

Dark
Light

#787878

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfa730;
  --color-2: #302b29;
  --color-3: #787878;
  --color-4: #d8d8c0;
  --color-5: #a8a82f;
}

SCSS

$color-1: #bfa730;
$color-2: #302b29;
$color-3: #787878;
$color-4: #d8d8c0;
$color-5: #a8a82f;

TAILWIND

colors: {
  'brand-1': '#bfa730',
  'brand-2': '#302b29',
  'brand-3': '#787878',
  'brand-4': '#d8d8c0',
  'brand-5': '#a8a82f',
}

RGB Array

[191, 167, 48], [48, 43, 41], [120, 120, 120], [216, 216, 192], [168, 168, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFA730, #302B29, #787878, #D8D8C0, #A8A82F 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: #bfa730; --color-2: #302b29; --color-3: #787878; --color-4: #d8d8c0; --color-5: #a8a82f. 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