← Back to Editor

#CCB488 · #9B8259 · #51371E · #DD7A51 · #EEA582

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

#CCB488

Ginger · Tan · Warm Sun

HEX
#CCB488
RGB
rgb(204, 180, 136)
HSL
hsl(39, 40%, 67%)
HSB
hsb(39, 33%, 80%)
CMYK
cmyk(0%, 12%, 33%, 20%)
Oklch
oklch(78.0% 0.065 82.4)

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

#9B8259

Ochre · Gray · Amber Brown

HEX
#9B8259
RGB
rgb(155, 130, 89)
HSL
hsl(37, 27%, 48%)
HSB
hsb(37, 43%, 61%)
CMYK
cmyk(0%, 16%, 43%, 39%)
Oklch
oklch(62.0% 0.065 79.5)

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

#51371E

Tangerine · DarkOliveGreen · Cinnamon

HEX
#51371E
RGB
rgb(81, 55, 30)
HSL
hsl(29, 46%, 22%)
HSB
hsb(29, 63%, 32%)
CMYK
cmyk(0%, 32%, 63%, 68%)
Oklch
oklch(36.1% 0.053 63.7)

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

#DD7A51

Tangerine · Coral · Warm Sun

HEX
#DD7A51
RGB
rgb(221, 122, 81)
HSL
hsl(18, 67%, 59%)
HSB
hsb(18, 63%, 87%)
CMYK
cmyk(0%, 45%, 63%, 13%)
Oklch
oklch(68.2% 0.135 42.6)

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

#EEA582

Apricot · DarkSalmon · Warm Sun

HEX
#EEA582
RGB
rgb(238, 165, 130)
HSL
hsl(19, 76%, 72%)
HSB
hsb(19, 45%, 93%)
CMYK
cmyk(0%, 31%, 45%, 7%)
Oklch
oklch(78.4% 0.099 46.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCB488
89A1CD

Analogous

CD9389
CCB488
C2CD89

Triadic

CCB488
89CDB5
B589CD

Split-Comp.

CCB488
89C2CD
9389CD

Tetradic

CCB488
89CD93
89A1CD
CD89C2

Contrast Matrix WCAG 2.1 Contrast

CCB488
9B8259
51371E
DD7A51
EEA582
—
1.8
Fail
5.5
AA
1.5
Fail
1.0
Fail
1.8
Fail
—
3.0
Fail
1.2
Fail
1.8
Fail
5.5
AA
3.0
Fail
—
3.6
AA Large
5.4
AA
1.5
Fail
1.2
Fail
3.6
AA Large
—
1.5
Fail
1.0
Fail
1.8
Fail
5.4
AA
1.5
Fail
—
White BG
2.0Fail
3.7AA Large
11.0AAA
3.0AA Large
2.0Fail
Black BG
10.5AAA
5.7AA
1.9Fail
7.0AA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C193
909063
464624
B2B15B
CECE8A

Deuteranopia

C3C595
929465
474926
B8BF5D
D3D88D

Tritanopia

CB9B9D
9A6B6C
50292A
D86364
EA9193

Achromatopsia

B6B6B6
858585
3C3C3C
939393
B7B7B7

Shades & Tints Shades & Tints

#CCB488

Dark
Light

#9B8259

Dark
Light

#51371E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccb488;
  --color-2: #9b8259;
  --color-3: #51371e;
  --color-4: #dd7a51;
  --color-5: #eea582;
}

SCSS

$color-1: #ccb488;
$color-2: #9b8259;
$color-3: #51371e;
$color-4: #dd7a51;
$color-5: #eea582;

TAILWIND

colors: {
  'brand-1': '#ccb488',
  'brand-2': '#9b8259',
  'brand-3': '#51371e',
  'brand-4': '#dd7a51',
  'brand-5': '#eea582',
}

RGB Array

[204, 180, 136], [155, 130, 89], [81, 55, 30], [221, 122, 81], [238, 165, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCB488, #9B8259, #51371E, #DD7A51, #EEA582 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: #ccb488; --color-2: #9b8259; --color-3: #51371e; --color-4: #dd7a51; --color-5: #eea582. 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