← Back to Editor

#302927 · #E83B0C · #C4735C · #B8C495 · #CCD9A9

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 LibraryData Visualization

Color Details Color Details

#302927

Crimson · DarkSlateGray · Deep Berry

HEX
#302927
RGB
rgb(48, 41, 39)
HSL
hsl(13, 10%, 17%)
HSB
hsb(13, 19%, 19%)
CMYK
cmyk(0%, 15%, 19%, 81%)
Oklch
oklch(28.8% 0.011 36.5)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#E83B0C

Vermilion · OrangeRed · Passion Red

HEX
#E83B0C
RGB
rgb(232, 59, 12)
HSL
hsl(13, 90%, 48%)
HSB
hsb(13, 95%, 91%)
CMYK
cmyk(0%, 75%, 95%, 9%)
Oklch
oklch(61.2% 0.215 34.0)

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

#C4735C

Crimson · LightCoral · Passion Red

HEX
#C4735C
RGB
rgb(196, 115, 92)
HSL
hsl(13, 47%, 56%)
HSB
hsb(13, 53%, 77%)
CMYK
cmyk(0%, 41%, 53%, 23%)
Oklch
oklch(63.9% 0.108 36.7)

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

#B8C495

Willow Green · Tan · Apple Green

HEX
#B8C495
RGB
rgb(184, 196, 149)
HSL
hsl(75, 28%, 68%)
HSB
hsb(75, 24%, 77%)
CMYK
cmyk(6%, 0%, 24%, 23%)
Oklch
oklch(79.9% 0.065 119.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#CCD9A9

Willow Green · Silver · Apple Green

HEX
#CCD9A9
RGB
rgb(204, 217, 169)
HSL
hsl(76, 39%, 76%)
HSB
hsb(76, 22%, 85%)
CMYK
cmyk(6%, 0%, 22%, 15%)
Oklch
oklch(86.3% 0.065 120.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302927
272E30

Analogous

302729
302927
302D27

Triadic

302927
273029
292730

Split-Comp.

302927
27302D
272930

Tetradic

302927
293027
272E30
2D2730

Contrast Matrix WCAG 2.1 Contrast

302927
E83B0C
C4735C
B8C495
CCD9A9
—
3.4
AA Large
4.0
AA Large
7.7
AAA
9.6
AAA
3.4
AA Large
—
1.2
Fail
2.2
Fail
2.8
Fail
4.0
AA Large
1.2
Fail
—
1.9
Fail
2.4
Fail
7.7
AAA
2.2
Fail
1.9
Fail
—
1.2
Fail
9.6
AAA
2.8
Fail
2.4
Fail
1.2
Fail
—
White BG
14.3AAA
4.1AA Large
3.5AA Large
1.8Fail
1.5Fail
Black BG
1.5Fail
5.1AA
6.0AA
11.4AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D27
9D9C17
A1A062
BDBDA0
D2D2B5

Deuteranopia

2D2E28
A7B41A
A6AC63
BDBCA3
D1D0B7

Tritanopia

302828
DF2022
C06667
B9A9AB
CDBEC0

Achromatopsia

2B2B2B
696969
898989
BBBBBB
D0D0D0

Shades & Tints Shades & Tints

#302927

Dark
Light

#E83B0C

Dark
Light

#C4735C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302927;
  --color-2: #e83b0c;
  --color-3: #c4735c;
  --color-4: #b8c495;
  --color-5: #ccd9a9;
}

SCSS

$color-1: #302927;
$color-2: #e83b0c;
$color-3: #c4735c;
$color-4: #b8c495;
$color-5: #ccd9a9;

TAILWIND

colors: {
  'brand-1': '#302927',
  'brand-2': '#e83b0c',
  'brand-3': '#c4735c',
  'brand-4': '#b8c495',
  'brand-5': '#ccd9a9',
}

RGB Array

[48, 41, 39], [232, 59, 12], [196, 115, 92], [184, 196, 149], [204, 217, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302927, #E83B0C, #C4735C, #B8C495, #CCD9A9 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #302927; --color-2: #e83b0c; --color-3: #c4735c; --color-4: #b8c495; --color-5: #ccd9a9. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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