← Back to Editor

#CC5537 · #A16831 · #B79D3E · #EDCD92 · #C4C488

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

#CC5537

Crimson · Chocolate · Passion Red

HEX
#CC5537
RGB
rgb(204, 85, 55)
HSL
hsl(12, 59%, 51%)
HSB
hsb(12, 73%, 80%)
CMYK
cmyk(0%, 58%, 73%, 20%)
Oklch
oklch(59.8% 0.158 35.3)

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

#A16831

Tangerine · Sienna · Amber Brown

HEX
#A16831
RGB
rgb(161, 104, 49)
HSL
hsl(29, 53%, 41%)
HSB
hsb(29, 70%, 63%)
CMYK
cmyk(0%, 35%, 70%, 37%)
Oklch
oklch(56.8% 0.102 62.1)

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

#B79D3E

Ochre · GoldenRod · Honey Gold

HEX
#B79D3E
RGB
rgb(183, 157, 62)
HSL
hsl(47, 49%, 48%)
HSB
hsb(47, 66%, 72%)
CMYK
cmyk(0%, 14%, 66%, 28%)
Oklch
oklch(70.1% 0.117 93.8)

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

#EDCD92

Goose Yellow · Khaki · Warm Sun

HEX
#EDCD92
RGB
rgb(237, 205, 146)
HSL
hsl(39, 72%, 75%)
HSB
hsb(39, 38%, 93%)
CMYK
cmyk(0%, 14%, 38%, 7%)
Oklch
oklch(86.2% 0.084 82.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C4C488

Fresh Green · Tan · Sunflower

HEX
#C4C488
RGB
rgb(196, 196, 136)
HSL
hsl(60, 34%, 65%)
HSB
hsb(60, 31%, 77%)
CMYK
cmyk(0%, 0%, 31%, 23%)
Oklch
oklch(80.6% 0.079 108.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC5537
38AECC

Analogous

CC3865
CC5537
CCA038

Triadic

CC5537
38CC56
5638CC

Split-Comp.

CC5537
38CCA0
3865CC

Tetradic

CC5537
65CC38
38AECC
A038CC

Contrast Matrix WCAG 2.1 Contrast

CC5537
A16831
B79D3E
EDCD92
C4C488
—
1.1
Fail
1.6
Fail
2.8
Fail
2.4
Fail
1.1
Fail
—
1.7
Fail
3.0
AA Large
2.6
Fail
1.6
Fail
1.7
Fail
—
1.7
Fail
1.5
Fail
2.8
Fail
3.0
AA Large
1.7
Fail
—
1.2
Fail
2.4
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
White BG
4.3AA Large
4.6AA
2.7Fail
1.5Fail
1.8Fail
Black BG
4.9AA
4.5AA
7.9AAA
13.7AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

98973E
88883E
ACAC55
DFDFA0
C4C497

Deuteranopia

9FA840
8C9042
ADAF5B
E1E3A4
C4C49A

Tritanopia

C64445
9E494B
B6676B
EBACAE
C4A2A5

Achromatopsia

757575
737373
9A9A9A
D0D0D0
BDBDBD

Shades & Tints Shades & Tints

#CC5537

Dark
Light

#A16831

Dark
Light

#B79D3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc5537;
  --color-2: #a16831;
  --color-3: #b79d3e;
  --color-4: #edcd92;
  --color-5: #c4c488;
}

SCSS

$color-1: #cc5537;
$color-2: #a16831;
$color-3: #b79d3e;
$color-4: #edcd92;
$color-5: #c4c488;

TAILWIND

colors: {
  'brand-1': '#cc5537',
  'brand-2': '#a16831',
  'brand-3': '#b79d3e',
  'brand-4': '#edcd92',
  'brand-5': '#c4c488',
}

RGB Array

[204, 85, 55], [161, 104, 49], [183, 157, 62], [237, 205, 146], [196, 196, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC5537, #A16831, #B79D3E, #EDCD92, #C4C488 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: #cc5537; --color-2: #a16831; --color-3: #b79d3e; --color-4: #edcd92; --color-5: #c4c488. 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