← Back to Editor

#C9DAC4 · #D3CAAD · #DEBC80 · #C16437 · #8C563B

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

#C9DAC4

Celadon · LightGray · Mint Green

HEX
#C9DAC4
RGB
rgb(201, 218, 196)
HSL
hsl(106, 23%, 81%)
HSB
hsb(106, 10%, 85%)
CMYK
cmyk(8%, 0%, 10%, 15%)
Oklch
oklch(86.9% 0.035 138.6)

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

#D3CAAD

Goose Yellow · Silver · Sunflower

HEX
#D3CAAD
RGB
rgb(211, 202, 173)
HSL
hsl(46, 30%, 75%)
HSB
hsb(46, 18%, 83%)
CMYK
cmyk(0%, 4%, 18%, 17%)
Oklch
oklch(83.9% 0.040 92.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#DEBC80

Ginger · BurlyWood · Warm Sun

HEX
#DEBC80
RGB
rgb(222, 188, 128)
HSL
hsl(38, 59%, 69%)
HSB
hsb(38, 42%, 87%)
CMYK
cmyk(0%, 15%, 42%, 13%)
Oklch
oklch(81.1% 0.087 81.2)

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

#C16437

Tangerine · Chocolate · Amber Brown

HEX
#C16437
RGB
rgb(193, 100, 55)
HSL
hsl(20, 56%, 49%)
HSB
hsb(20, 72%, 76%)
CMYK
cmyk(0%, 48%, 72%, 24%)
Oklch
oklch(60.4% 0.133 44.9)

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

#8C563B

Tangerine · Sienna · Amber Brown

HEX
#8C563B
RGB
rgb(140, 86, 59)
HSL
hsl(20, 41%, 39%)
HSB
hsb(20, 58%, 55%)
CMYK
cmyk(0%, 39%, 58%, 45%)
Oklch
oklch(50.8% 0.082 46.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9DAC4
D4C3DA

Analogous

D4DAC3
C9DAC4
C3DAC9

Triadic

C9DAC4
C3C9DA
DAC3C9

Split-Comp.

C9DAC4
C9C3DA
DAC3D4

Tetradic

C9DAC4
C3D4DA
D4C3DA
DAC9C3

Contrast Matrix WCAG 2.1 Contrast

C9DAC4
D3CAAD
DEBC80
C16437
8C563B
—
1.1
Fail
1.2
Fail
2.8
Fail
4.1
AA Large
1.1
Fail
—
1.1
Fail
2.5
Fail
3.7
AA Large
1.2
Fail
1.1
Fail
—
2.3
Fail
3.3
AA Large
2.8
Fail
2.5
Fail
2.3
Fail
—
1.5
Fail
4.1
AA Large
3.7
AA Large
3.3
AA Large
1.5
Fail
—
White BG
1.5Fail
1.6Fail
1.8Fail
4.1AA Large
6.0AA
Black BG
14.3AAA
12.8AAA
11.6AAA
5.1AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D1C9
CFCFB4
CFCF8F
999842
757442

Deuteranopia

CFCECB
D0D0B6
D1D492
9EA545
787C43

Tritanopia

CACECE
D3BABB
DC9A9D
BC4A4C
894748

Achromatopsia

D2D2D2
C9C9C9
BFBFBF
7B7B7B
636363

Shades & Tints Shades & Tints

#C9DAC4

Dark
Light

#D3CAAD

Dark
Light

#DEBC80

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9dac4;
  --color-2: #d3caad;
  --color-3: #debc80;
  --color-4: #c16437;
  --color-5: #8c563b;
}

SCSS

$color-1: #c9dac4;
$color-2: #d3caad;
$color-3: #debc80;
$color-4: #c16437;
$color-5: #8c563b;

TAILWIND

colors: {
  'brand-1': '#c9dac4',
  'brand-2': '#d3caad',
  'brand-3': '#debc80',
  'brand-4': '#c16437',
  'brand-5': '#8c563b',
}

RGB Array

[201, 218, 196], [211, 202, 173], [222, 188, 128], [193, 100, 55], [140, 86, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9DAC4, #D3CAAD, #DEBC80, #C16437, #8C563B 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: #c9dac4; --color-2: #d3caad; --color-3: #debc80; --color-4: #c16437; --color-5: #8c563b. 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