← Back to Editor

#CCBE99 · #DA887C · #BD411D · #607E4C · #1D1C1A

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

#CCBE99

Ginger · Tan · Sunflower

HEX
#CCBE99
RGB
rgb(204, 190, 153)
HSL
hsl(44, 33%, 70%)
HSB
hsb(44, 25%, 80%)
CMYK
cmyk(0%, 7%, 25%, 20%)
Oklch
oklch(80.4% 0.052 89.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DA887C

Peach Pink · DarkSalmon · Coral Red

HEX
#DA887C
RGB
rgb(218, 136, 124)
HSL
hsl(8, 56%, 67%)
HSB
hsb(8, 43%, 85%)
CMYK
cmyk(0%, 38%, 43%, 15%)
Oklch
oklch(70.9% 0.103 28.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BD411D

Vermilion · FireBrick · Passion Red

HEX
#BD411D
RGB
rgb(189, 65, 29)
HSL
hsl(14, 73%, 43%)
HSB
hsb(14, 85%, 74%)
CMYK
cmyk(0%, 66%, 85%, 26%)
Oklch
oklch(54.6% 0.166 36.1)

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

#607E4C

Celadon · DarkOliveGreen · Forest Green

HEX
#607E4C
RGB
rgb(96, 126, 76)
HSL
hsl(96, 25%, 40%)
HSB
hsb(96, 40%, 49%)
CMYK
cmyk(24%, 0%, 40%, 51%)
Oklch
oklch(55.7% 0.081 133.6)

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

#1D1C1A

Ink Black · Black · Dark Stone

HEX
#1D1C1A
RGB
rgb(29, 28, 26)
HSL
hsl(40, 5%, 11%)
HSB
hsb(40, 10%, 11%)
CMYK
cmyk(0%, 3%, 10%, 89%)
Oklch
oklch(22.7% 0.004 84.6)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCBE99
99A7CC

Analogous

CCA599
CCBE99
C0CC99

Triadic

CCBE99
99CCBE
BE99CC

Split-Comp.

CCBE99
99C0CC
A599CC

Tetradic

CCBE99
99CCA5
99A7CC
CC99C0

Contrast Matrix WCAG 2.1 Contrast

CCBE99
DA887C
BD411D
607E4C
1D1C1A
—
1.5
Fail
2.9
Fail
2.5
Fail
9.2
AAA
1.5
Fail
—
2.0
Fail
1.7
Fail
6.3
AA
2.9
Fail
2.0
Fail
—
1.2
Fail
3.2
AA Large
2.5
Fail
1.7
Fail
1.2
Fail
—
3.7
AA Large
9.2
AAA
6.3
AA
3.2
AA Large
3.7
AA Large
—
White BG
1.8Fail
2.7Fail
5.3AA
4.6AA
17.0AAA
Black BG
11.4AAA
7.8AAA
3.9AA Large
4.6AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6A2
B6B67F
878626
6D6D58
1D1D1A

Deuteranopia

C7C8A4
BBC180
8F9828
6B695B
1D1D1B

Tritanopia

CBA9AB
D68182
B72D2E
616264
1D1B1B

Achromatopsia

BEBEBE
9F9F9F
626262
6F6F6F
1C1C1C

Shades & Tints Shades & Tints

#CCBE99

Dark
Light

#DA887C

Dark
Light

#BD411D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccbe99;
  --color-2: #da887c;
  --color-3: #bd411d;
  --color-4: #607e4c;
  --color-5: #1d1c1a;
}

SCSS

$color-1: #ccbe99;
$color-2: #da887c;
$color-3: #bd411d;
$color-4: #607e4c;
$color-5: #1d1c1a;

TAILWIND

colors: {
  'brand-1': '#ccbe99',
  'brand-2': '#da887c',
  'brand-3': '#bd411d',
  'brand-4': '#607e4c',
  'brand-5': '#1d1c1a',
}

RGB Array

[204, 190, 153], [218, 136, 124], [189, 65, 29], [96, 126, 76], [29, 28, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCBE99, #DA887C, #BD411D, #607E4C, #1D1C1A 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: #ccbe99; --color-2: #da887c; --color-3: #bd411d; --color-4: #607e4c; --color-5: #1d1c1a. 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