← Back to Editor

#C5C8B5 · #929C8D · #9D6635 · #B9B850 · #D3E320

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

#C5C8B5

Fresh Green · Silver · Sunflower

HEX
#C5C8B5
RGB
rgb(197, 200, 181)
HSL
hsl(69, 15%, 75%)
HSB
hsb(69, 9%, 78%)
CMYK
cmyk(1%, 0%, 9%, 22%)
Oklch
oklch(82.5% 0.026 114.3)

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

#929C8D

Ash · DarkSeaGreen · Silver Sand

HEX
#929C8D
RGB
rgb(146, 156, 141)
HSL
hsl(100, 7%, 58%)
HSB
hsb(100, 10%, 61%)
CMYK
cmyk(6%, 0%, 10%, 39%)
Oklch
oklch(68.0% 0.024 135.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9D6635

Tangerine · Sienna · Amber Brown

HEX
#9D6635
RGB
rgb(157, 102, 53)
HSL
hsl(28, 50%, 41%)
HSB
hsb(28, 66%, 62%)
CMYK
cmyk(0%, 35%, 66%, 38%)
Oklch
oklch(56.0% 0.096 60.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B9B850

Autumn Sage · GoldenRod · Sunflower

HEX
#B9B850
RGB
rgb(185, 184, 80)
HSL
hsl(59, 43%, 52%)
HSB
hsb(59, 57%, 73%)
CMYK
cmyk(0%, 1%, 57%, 27%)
Oklch
oklch(76.3% 0.127 108.5)

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

#D3E320

Autumn Sage · GreenYellow · Sunflower

HEX
#D3E320
RGB
rgb(211, 227, 32)
HSL
hsl(65, 78%, 51%)
HSB
hsb(65, 86%, 89%)
CMYK
cmyk(7%, 0%, 86%, 11%)
Oklch
oklch(87.4% 0.192 114.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5C8B5
B9B6C9

Analogous

C9C2B6
C5C8B5
BCC9B6

Triadic

C5C8B5
B6C6C9
C9B6C6

Split-Comp.

C5C8B5
B6BCC9
C2B6C9

Tetradic

C5C8B5
B6C9C2
B9B6C9
C9B6BC

Contrast Matrix WCAG 2.1 Contrast

C5C8B5
929C8D
9D6635
B9B850
D3E320
—
1.7
Fail
2.8
Fail
1.2
Fail
1.2
Fail
1.7
Fail
—
1.7
Fail
1.4
Fail
2.0
Fail
2.8
Fail
1.7
Fail
—
2.3
Fail
3.4
AA Large
1.2
Fail
1.4
Fail
2.3
Fail
—
1.5
Fail
1.2
Fail
2.0
Fail
3.4
AA Large
1.5
Fail
—
White BG
1.7Fail
2.9Fail
4.8AA
2.1Fail
1.4Fail
Black BG
12.3AAA
7.4AAA
4.4AA Large
10.0AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6BA
969691
858541
B9B969
DADA4F

Deuteranopia

C6C6BB
969592
888D44
B9B96F
D9D85B

Tritanopia

C5BDBE
939394
9A4A4C
B97D81
D4747D

Achromatopsia

C5C5C5
979797
717171
ACACAC
C8C8C8

Shades & Tints Shades & Tints

#C5C8B5

Dark
Light

#929C8D

Dark
Light

#9D6635

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5c8b5;
  --color-2: #929c8d;
  --color-3: #9d6635;
  --color-4: #b9b850;
  --color-5: #d3e320;
}

SCSS

$color-1: #c5c8b5;
$color-2: #929c8d;
$color-3: #9d6635;
$color-4: #b9b850;
$color-5: #d3e320;

TAILWIND

colors: {
  'brand-1': '#c5c8b5',
  'brand-2': '#929c8d',
  'brand-3': '#9d6635',
  'brand-4': '#b9b850',
  'brand-5': '#d3e320',
}

RGB Array

[197, 200, 181], [146, 156, 141], [157, 102, 53], [185, 184, 80], [211, 227, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5C8B5, #929C8D, #9D6635, #B9B850, #D3E320 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: #c5c8b5; --color-2: #929c8d; --color-3: #9d6635; --color-4: #b9b850; --color-5: #d3e320. 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