← Back to Editor

#556F48 · #C97268 · #D19149 · #C9A992 · #C2DBB4

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

#556F48

Celadon · DarkOliveGreen · Forest Green

HEX
#556F48
RGB
rgb(85, 111, 72)
HSL
hsl(100, 21%, 36%)
HSB
hsb(100, 35%, 44%)
CMYK
cmyk(23%, 0%, 35%, 56%)
Oklch
oklch(51.0% 0.067 135.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#C97268

Crimson · LightCoral · Passion Red

HEX
#C97268
RGB
rgb(201, 114, 104)
HSL
hsl(6, 47%, 60%)
HSB
hsb(6, 48%, 79%)
CMYK
cmyk(0%, 43%, 48%, 21%)
Oklch
oklch(64.6% 0.112 27.5)

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

#D19149

Ginger · SandyBrown · Warm Sun

HEX
#D19149
RGB
rgb(209, 145, 73)
HSL
hsl(32, 60%, 55%)
HSB
hsb(32, 65%, 82%)
CMYK
cmyk(0%, 31%, 65%, 18%)
Oklch
oklch(70.6% 0.117 67.0)

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

#C9A992

Apricot · Tan · Warm Sun

HEX
#C9A992
RGB
rgb(201, 169, 146)
HSL
hsl(25, 34%, 68%)
HSB
hsb(25, 27%, 79%)
CMYK
cmyk(0%, 16%, 27%, 21%)
Oklch
oklch(75.7% 0.049 57.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#C2DBB4

Celadon · Silver · Apple Green

HEX
#C2DBB4
RGB
rgb(194, 219, 180)
HSL
hsl(98, 35%, 78%)
HSB
hsb(98, 18%, 86%)
CMYK
cmyk(11%, 0%, 18%, 14%)
Oklch
oklch(86.3% 0.059 134.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

556F48
62496F

Analogous

696F49
556F48
496F4F

Triadic

556F48
49556F
6F4955

Split-Comp.

556F48
4F496F
6F4969

Tetradic

556F48
49696F
62496F
6F4F49

Contrast Matrix WCAG 2.1 Contrast

556F48
C97268
D19149
C9A992
C2DBB4
—
1.6
Fail
2.1
Fail
2.6
Fail
3.8
AA Large
1.6
Fail
—
1.3
Fail
1.6
Fail
2.3
Fail
2.1
Fail
1.3
Fail
—
1.2
Fail
1.8
Fail
2.6
Fail
1.6
Fail
1.2
Fail
—
1.5
Fail
3.8
AA Large
2.3
Fail
1.8
Fail
1.5
Fail
—
White BG
5.6AA
3.4AA Large
2.7Fail
2.2Fail
1.5Fail
Black BG
3.8AA Large
6.1AA
7.9AAA
9.6AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

606051
A3A36A
B5B55A
BBBB98
CDCDBD

Deuteranopia

5F5D54
A8AF6B
B9BE5F
BDBF99
CBCAC0

Tritanopia

56595B
C56C6D
CE686B
C79C9D
C3C5C7

Achromatopsia

636363
8B8B8B
9C9C9C
B0B0B0
CFCFCF

Shades & Tints Shades & Tints

#556F48

Dark
Light

#C97268

Dark
Light

#D19149

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #556f48;
  --color-2: #c97268;
  --color-3: #d19149;
  --color-4: #c9a992;
  --color-5: #c2dbb4;
}

SCSS

$color-1: #556f48;
$color-2: #c97268;
$color-3: #d19149;
$color-4: #c9a992;
$color-5: #c2dbb4;

TAILWIND

colors: {
  'brand-1': '#556f48',
  'brand-2': '#c97268',
  'brand-3': '#d19149',
  'brand-4': '#c9a992',
  'brand-5': '#c2dbb4',
}

RGB Array

[85, 111, 72], [201, 114, 104], [209, 145, 73], [201, 169, 146], [194, 219, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #556F48, #C97268, #D19149, #C9A992, #C2DBB4 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: #556f48; --color-2: #c97268; --color-3: #d19149; --color-4: #c9a992; --color-5: #c2dbb4. 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