← Back to Editor

#C7C3A6 · #E7D198 · #D2BE5D · #D3B038 · #CBCD14

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

#C7C3A6

Fresh Green · Silver · Sunflower

HEX
#C7C3A6
RGB
rgb(199, 195, 166)
HSL
hsl(53, 23%, 72%)
HSB
hsb(53, 17%, 78%)
CMYK
cmyk(0%, 2%, 17%, 22%)
Oklch
oklch(81.3% 0.040 100.7)

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

#E7D198

Goose Yellow · Khaki · Sunflower

HEX
#E7D198
RGB
rgb(231, 209, 152)
HSL
hsl(43, 62%, 75%)
HSB
hsb(43, 34%, 91%)
CMYK
cmyk(0%, 10%, 34%, 9%)
Oklch
oklch(86.6% 0.078 89.4)

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

#D2BE5D

Autumn Sage · SandyBrown · Sunflower

HEX
#D2BE5D
RGB
rgb(210, 190, 93)
HSL
hsl(50, 57%, 59%)
HSB
hsb(50, 56%, 82%)
CMYK
cmyk(0%, 10%, 56%, 18%)
Oklch
oklch(79.9% 0.120 97.9)

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

#D3B038

Ginger · GoldenRod · Sunflower

HEX
#D3B038
RGB
rgb(211, 176, 56)
HSL
hsl(46, 64%, 52%)
HSB
hsb(46, 73%, 83%)
CMYK
cmyk(0%, 17%, 73%, 17%)
Oklch
oklch(76.8% 0.138 92.1)

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

#CBCD14

Autumn Sage · GoldenRod · Honey Gold

HEX
#CBCD14
RGB
rgb(203, 205, 20)
HSL
hsl(61, 82%, 44%)
HSB
hsb(61, 90%, 80%)
CMYK
cmyk(1%, 0%, 90%, 20%)
Oklch
oklch(82.0% 0.176 110.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7C3A6
A7ABC8

Analogous

C8B4A7
C7C3A6
BBC8A7

Triadic

C7C3A6
A7C8C4
C4A7C8

Split-Comp.

C7C3A6
A7BBC8
B4A7C8

Tetradic

C7C3A6
A7C8B4
A7ABC8
C8A7BB

Contrast Matrix WCAG 2.1 Contrast

C7C3A6
E7D198
D2BE5D
D3B038
CBCD14
—
1.2
Fail
1.0
Fail
1.2
Fail
1.0
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.0
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
White BG
1.8Fail
1.5Fail
1.9Fail
2.1Fail
1.7Fail
Black BG
11.8AAA
14.0AAA
11.3AAA
10.0AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5AD
DDDDA6
C9C974
C4C455
CCCC41

Deuteranopia

C6C6AF
DFE0A9
CBCC7A
C6C95C
CCCC4C

Tritanopia

C7B3B4
E6B1B3
D1878B
D16C71
CB646C

Achromatopsia

C1C1C1
D1D1D1
B9B9B9
ADADAD
B7B7B7

Shades & Tints Shades & Tints

#C7C3A6

Dark
Light

#E7D198

Dark
Light

#D2BE5D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7c3a6;
  --color-2: #e7d198;
  --color-3: #d2be5d;
  --color-4: #d3b038;
  --color-5: #cbcd14;
}

SCSS

$color-1: #c7c3a6;
$color-2: #e7d198;
$color-3: #d2be5d;
$color-4: #d3b038;
$color-5: #cbcd14;

TAILWIND

colors: {
  'brand-1': '#c7c3a6',
  'brand-2': '#e7d198',
  'brand-3': '#d2be5d',
  'brand-4': '#d3b038',
  'brand-5': '#cbcd14',
}

RGB Array

[199, 195, 166], [231, 209, 152], [210, 190, 93], [211, 176, 56], [203, 205, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7C3A6, #E7D198, #D2BE5D, #D3B038, #CBCD14 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: #c7c3a6; --color-2: #e7d198; --color-3: #d2be5d; --color-4: #d3b038; --color-5: #cbcd14. 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