← Back to Editor

#7D7169 · #9B9155 · #B8B042 · #D6D02E · #F3EF1A

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

#7D7169

Tangerine · DimGray · Warm Gray

HEX
#7D7169
RGB
rgb(125, 113, 105)
HSL
hsl(24, 9%, 45%)
HSB
hsb(24, 16%, 49%)
CMYK
cmyk(0%, 10%, 16%, 51%)
Oklch
oklch(55.7% 0.019 56.0)

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

#9B9155

Autumn Sage · Gray · Honey Gold

HEX
#9B9155
RGB
rgb(155, 145, 85)
HSL
hsl(51, 29%, 47%)
HSB
hsb(51, 45%, 61%)
CMYK
cmyk(0%, 6%, 45%, 39%)
Oklch
oklch(65.2% 0.081 100.0)

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

#B8B042

Autumn Sage · GoldenRod · Honey Gold

HEX
#B8B042
RGB
rgb(184, 176, 66)
HSL
hsl(56, 47%, 49%)
HSB
hsb(56, 64%, 72%)
CMYK
cmyk(0%, 4%, 64%, 28%)
Oklch
oklch(74.3% 0.130 105.2)

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

#D6D02E

Autumn Sage · GoldenRod · Sunflower

HEX
#D6D02E
RGB
rgb(214, 208, 46)
HSL
hsl(58, 67%, 51%)
HSB
hsb(58, 79%, 84%)
CMYK
cmyk(0%, 3%, 79%, 16%)
Oklch
oklch(83.6% 0.168 107.3)

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

#F3EF1A

Autumn Sage · Yellow · Sunflower

HEX
#F3EF1A
RGB
rgb(243, 239, 26)
HSL
hsl(59, 90%, 53%)
HSB
hsb(59, 89%, 95%)
CMYK
cmyk(0%, 2%, 89%, 5%)
Oklch
oklch(92.5% 0.196 108.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7169
68757D

Analogous

7D686A
7D7169
7D7B68

Triadic

7D7169
687D71
71687D

Split-Comp.

7D7169
687D7B
686A7D

Tetradic

7D7169
6A7D68
68757D
7B687D

Contrast Matrix WCAG 2.1 Contrast

7D7169
9B9155
B8B042
D6D02E
F3EF1A
—
1.5
Fail
2.1
Fail
2.9
Fail
3.9
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
2.6
Fail
2.1
Fail
1.4
Fail
—
1.4
Fail
1.8
Fail
2.9
Fail
2.0
Fail
1.4
Fail
—
1.3
Fail
3.9
AA Large
2.6
Fail
1.8
Fail
1.3
Fail
—
White BG
4.7AA
3.2AA Large
2.3Fail
1.6Fail
1.2Fail
Black BG
4.4AA Large
6.6AA
9.3AAA
12.9AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

78786B
979764
B5B45D
D3D355
F1F14E

Deuteranopia

79796B
979867
B5B663
D4D45F
F2F25A

Tritanopia

7C6C6D
9B6F72
B87276
D6747B
F3767F

Achromatopsia

747474
8D8D8D
A6A6A6
BFBFBF
D8D8D8

Shades & Tints Shades & Tints

#7D7169

Dark
Light

#9B9155

Dark
Light

#B8B042

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7169;
  --color-2: #9b9155;
  --color-3: #b8b042;
  --color-4: #d6d02e;
  --color-5: #f3ef1a;
}

SCSS

$color-1: #7d7169;
$color-2: #9b9155;
$color-3: #b8b042;
$color-4: #d6d02e;
$color-5: #f3ef1a;

TAILWIND

colors: {
  'brand-1': '#7d7169',
  'brand-2': '#9b9155',
  'brand-3': '#b8b042',
  'brand-4': '#d6d02e',
  'brand-5': '#f3ef1a',
}

RGB Array

[125, 113, 105], [155, 145, 85], [184, 176, 66], [214, 208, 46], [243, 239, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D7169, #9B9155, #B8B042, #D6D02E, #F3EF1A 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: #7d7169; --color-2: #9b9155; --color-3: #b8b042; --color-4: #d6d02e; --color-5: #f3ef1a. 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