← Back to Editor

#7D7966 · #948B62 · #ABA080 · #FFE11F · #E8DFBC

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

#7D7966

Autumn Sage · DimGray · Honey Gold

HEX
#7D7966
RGB
rgb(125, 121, 102)
HSL
hsl(50, 10%, 45%)
HSB
hsb(50, 18%, 49%)
CMYK
cmyk(0%, 3%, 18%, 51%)
Oklch
oklch(57.4% 0.029 97.4)

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

#948B62

Ochre · Gray · Honey Gold

HEX
#948B62
RGB
rgb(148, 139, 98)
HSL
hsl(49, 20%, 48%)
HSB
hsb(49, 34%, 58%)
CMYK
cmyk(0%, 6%, 34%, 42%)
Oklch
oklch(63.4% 0.058 97.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#ABA080

Ginger · DarkGray · Sunflower

HEX
#ABA080
RGB
rgb(171, 160, 128)
HSL
hsl(45, 20%, 59%)
HSB
hsb(45, 25%, 67%)
CMYK
cmyk(0%, 6%, 25%, 33%)
Oklch
oklch(70.7% 0.046 91.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FFE11F

Autumn Sage · Gold · Sunflower

HEX
#FFE11F
RGB
rgb(255, 225, 31)
HSL
hsl(52, 100%, 56%)
HSB
hsb(52, 88%, 100%)
CMYK
cmyk(0%, 12%, 88%, 0%)
Oklch
oklch(90.7% 0.183 99.1)

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

#E8DFBC

Goose Yellow · Wheat · Lemon Cream

HEX
#E8DFBC
RGB
rgb(232, 223, 188)
HSL
hsl(48, 49%, 82%)
HSB
hsb(48, 19%, 91%)
CMYK
cmyk(0%, 4%, 19%, 9%)
Oklch
oklch(90.2% 0.047 95.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7966
676B7E

Analogous

7E6F67
7D7966
777E67

Triadic

7D7966
677E7A
7A677E

Split-Comp.

7D7966
67777E
6F677E

Tetradic

7D7966
677E6F
676B7E
7E6777

Contrast Matrix WCAG 2.1 Contrast

7D7966
948B62
ABA080
FFE11F
E8DFBC
—
1.3
Fail
1.7
Fail
3.3
AA Large
3.3
AA Large
1.3
Fail
—
1.3
Fail
2.6
Fail
2.6
Fail
1.7
Fail
1.3
Fail
—
2.0
Fail
1.9
Fail
3.3
AA Large
2.6
Fail
2.0
Fail
—
1.0
Fail
3.3
AA Large
2.6
Fail
1.9
Fail
1.0
Fail
—
White BG
4.4AA Large
3.4AA Large
2.6Fail
1.3Fail
1.3Fail
Black BG
4.8AA
6.1AA
8.1AAA
16.0AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B6B
90906C
A6A688
F2F24E
E4E4C4

Deuteranopia

7C7C6C
91916E
A7A88A
F4F659
E5E5C7

Tritanopia

7D6E6F
947475
AA8E8F
FE737B
E8CBCD

Achromatopsia

787878
898989
A0A0A0
D4D4D4
DEDEDE

Shades & Tints Shades & Tints

#7D7966

Dark
Light

#948B62

Dark
Light

#ABA080

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7966;
  --color-2: #948b62;
  --color-3: #aba080;
  --color-4: #ffe11f;
  --color-5: #e8dfbc;
}

SCSS

$color-1: #7d7966;
$color-2: #948b62;
$color-3: #aba080;
$color-4: #ffe11f;
$color-5: #e8dfbc;

TAILWIND

colors: {
  'brand-1': '#7d7966',
  'brand-2': '#948b62',
  'brand-3': '#aba080',
  'brand-4': '#ffe11f',
  'brand-5': '#e8dfbc',
}

RGB Array

[125, 121, 102], [148, 139, 98], [171, 160, 128], [255, 225, 31], [232, 223, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D7966, #948B62, #ABA080, #FFE11F, #E8DFBC 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: #7d7966; --color-2: #948b62; --color-3: #aba080; --color-4: #ffe11f; --color-5: #e8dfbc. 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