← Back to Editor

#CCC161 · #CB573E · #E89D34 · #8C9890 · #2D3941

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCC161

Autumn Sage · BurlyWood · Sunflower

HEX
#CCC161
RGB
rgb(204, 193, 97)
HSL
hsl(54, 51%, 59%)
HSB
hsb(54, 52%, 80%)
CMYK
cmyk(0%, 5%, 52%, 20%)
Oklch
oklch(80.0% 0.119 102.8)

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

#CB573E

Crimson · Chocolate · Passion Red

HEX
#CB573E
RGB
rgb(203, 87, 62)
HSL
hsl(11, 58%, 52%)
HSB
hsb(11, 69%, 80%)
CMYK
cmyk(0%, 57%, 69%, 20%)
Oklch
oklch(60.0% 0.153 33.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#E89D34

Ginger · GoldenRod · Warm Sun

HEX
#E89D34
RGB
rgb(232, 157, 52)
HSL
hsl(35, 80%, 56%)
HSB
hsb(35, 78%, 91%)
CMYK
cmyk(0%, 32%, 78%, 9%)
Oklch
oklch(75.3% 0.145 70.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#8C9890

Ash · LightSlateGray · Silver Sand

HEX
#8C9890
RGB
rgb(140, 152, 144)
HSL
hsl(140, 6%, 57%)
HSB
hsb(140, 8%, 60%)
CMYK
cmyk(8%, 0%, 5%, 40%)
Oklch
oklch(66.8% 0.018 156.7)

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

#2D3941

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#2D3941
RGB
rgb(45, 57, 65)
HSL
hsl(204, 18%, 22%)
HSB
hsb(204, 31%, 25%)
CMYK
cmyk(31%, 12%, 0%, 75%)
Oklch
oklch(33.7% 0.021 237.5)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC161
616CCC

Analogous

CC8C61
CCC161
A1CC61

Triadic

CCC161
61CCC1
C161CC

Split-Comp.

CCC161
61A1CC
8C61CC

Tetradic

CCC161
61CC8C
616CCC
CC61A1

Contrast Matrix WCAG 2.1 Contrast

CCC161
CB573E
E89D34
8C9890
2D3941
—
2.3
Fail
1.2
Fail
1.6
Fail
6.4
AA
2.3
Fail
—
1.9
Fail
1.4
Fail
2.8
Fail
1.2
Fail
1.9
Fail
—
1.3
Fail
5.2
AA
1.6
Fail
1.4
Fail
1.3
Fail
—
4.0
AA Large
6.4
AA
2.8
Fail
5.2
AA
4.0
AA Large
—
White BG
1.8Fail
4.2AA Large
2.3Fail
3.0Fail
11.8AAA
Black BG
11.4AAA
5.0AA
9.3AAA
7.0AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C778
999844
C8C74D
919192
32323F

Deuteranopia

C8C97E
A0A846
CCD154
919092
32313F

Tritanopia

CB8B8F
C5494A
E46166
8D9394
2E3E3D

Achromatopsia

B9B9B9
777777
A7A7A7
949494
363636

Shades & Tints Shades & Tints

#CCC161

Dark
Light

#CB573E

Dark
Light

#E89D34

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc161;
  --color-2: #cb573e;
  --color-3: #e89d34;
  --color-4: #8c9890;
  --color-5: #2d3941;
}

SCSS

$color-1: #ccc161;
$color-2: #cb573e;
$color-3: #e89d34;
$color-4: #8c9890;
$color-5: #2d3941;

TAILWIND

colors: {
  'brand-1': '#ccc161',
  'brand-2': '#cb573e',
  'brand-3': '#e89d34',
  'brand-4': '#8c9890',
  'brand-5': '#2d3941',
}

RGB Array

[204, 193, 97], [203, 87, 62], [232, 157, 52], [140, 152, 144], [45, 57, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC161, #CB573E, #E89D34, #8C9890, #2D3941 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: #ccc161; --color-2: #cb573e; --color-3: #e89d34; --color-4: #8c9890; --color-5: #2d3941. 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