← Back to Editor

#CCBDA8 · #20180B · #A3743C · #62390D · #462712

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

#CCBDA8

Goose Yellow · Silver · Warm Sun

HEX
#CCBDA8
RGB
rgb(204, 189, 168)
HSL
hsl(35, 26%, 73%)
HSB
hsb(35, 18%, 80%)
CMYK
cmyk(0%, 7%, 18%, 20%)
Oklch
oklch(80.5% 0.033 76.4)

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

#20180B

Ochre · Black · Cinnamon

HEX
#20180B
RGB
rgb(32, 24, 11)
HSL
hsl(37, 49%, 8%)
HSB
hsb(37, 66%, 13%)
CMYK
cmyk(0%, 25%, 66%, 87%)
Oklch
oklch(21.5% 0.026 78.8)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#A3743C

Ochre · Sienna · Amber Brown

HEX
#A3743C
RGB
rgb(163, 116, 60)
HSL
hsl(33, 46%, 44%)
HSB
hsb(33, 63%, 64%)
CMYK
cmyk(0%, 29%, 63%, 36%)
Oklch
oklch(59.5% 0.094 69.1)

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

#62390D

Ochre · DarkOliveGreen · Cinnamon

HEX
#62390D
RGB
rgb(98, 57, 13)
HSL
hsl(31, 77%, 22%)
HSB
hsb(31, 87%, 38%)
CMYK
cmyk(0%, 42%, 87%, 62%)
Oklch
oklch(38.7% 0.080 62.2)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#462712

Tangerine · Maroon · Cinnamon

HEX
#462712
RGB
rgb(70, 39, 18)
HSL
hsl(24, 59%, 17%)
HSB
hsb(24, 74%, 27%)
CMYK
cmyk(0%, 44%, 74%, 73%)
Oklch
oklch(30.8% 0.057 53.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCBDA8
A8B7CC

Analogous

CCABA8
CCBDA8
C9CCA8

Triadic

CCBDA8
A8CCBD
BDA8CC

Split-Comp.

CCBDA8
A8C9CC
ABA8CC

Tetradic

CCBDA8
A8CCAB
A8B7CC
CCA8C9

Contrast Matrix WCAG 2.1 Contrast

CCBDA8
20180B
A3743C
62390D
462712
—
9.5
AAA
2.2
Fail
5.4
AA
7.3
AAA
9.5
AAA
—
4.3
AA Large
1.8
Fail
1.3
Fail
2.2
Fail
4.3
AA Large
—
2.4
Fail
3.3
AA Large
5.4
AA
1.8
Fail
2.4
Fail
—
1.4
Fail
7.3
AAA
1.3
Fail
3.3
AA Large
1.4
Fail
—
White BG
1.8Fail
17.5AAA
4.1AA Large
10.0AAA
13.5AAA
Black BG
11.4AAA
1.2Fail
5.1AA
2.1Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C5AD
1D1C0E
8F8E4A
505018
393817

Deuteranopia

C6C7AE
1D1E0F
91954D
53561A
3A3D18

Tritanopia

CBB1B2
201111
A15457
602022
441B1C

Achromatopsia

BFBFBF
191919
7C7C7C
404040
2E2E2E

Shades & Tints Shades & Tints

#CCBDA8

Dark
Light

#20180B

Dark
Light

#A3743C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccbda8;
  --color-2: #20180b;
  --color-3: #a3743c;
  --color-4: #62390d;
  --color-5: #462712;
}

SCSS

$color-1: #ccbda8;
$color-2: #20180b;
$color-3: #a3743c;
$color-4: #62390d;
$color-5: #462712;

TAILWIND

colors: {
  'brand-1': '#ccbda8',
  'brand-2': '#20180b',
  'brand-3': '#a3743c',
  'brand-4': '#62390d',
  'brand-5': '#462712',
}

RGB Array

[204, 189, 168], [32, 24, 11], [163, 116, 60], [98, 57, 13], [70, 39, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCBDA8, #20180B, #A3743C, #62390D, #462712 is ideal for: tech websites, dark mode UIs, game UIs, 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: #ccbda8; --color-2: #20180b; --color-3: #a3743c; --color-4: #62390d; --color-5: #462712. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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