← Back to Editor

#CC5C00 · #3B3933 · #DE9052 · #DECD9B · #F2F1DE

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

#CC5C00

Tangerine · Chocolate · Amber Brown

HEX
#CC5C00
RGB
rgb(204, 92, 0)
HSL
hsl(27, 100%, 40%)
HSB
hsb(27, 100%, 80%)
CMYK
cmyk(0%, 55%, 100%, 20%)
Oklch
oklch(60.5% 0.163 48.5)

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

#3B3933

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3B3933
RGB
rgb(59, 57, 51)
HSL
hsl(45, 7%, 22%)
HSB
hsb(45, 14%, 23%)
CMYK
cmyk(0%, 3%, 14%, 77%)
Oklch
oklch(34.5% 0.011 91.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#DE9052

Tangerine · SandyBrown · Warm Sun

HEX
#DE9052
RGB
rgb(222, 144, 82)
HSL
hsl(27, 68%, 60%)
HSB
hsb(27, 63%, 87%)
CMYK
cmyk(0%, 35%, 63%, 13%)
Oklch
oklch(72.1% 0.123 57.6)

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

#DECD9B

Goose Yellow · BurlyWood · Sunflower

HEX
#DECD9B
RGB
rgb(222, 205, 155)
HSL
hsl(45, 50%, 74%)
HSB
hsb(45, 30%, 87%)
CMYK
cmyk(0%, 8%, 30%, 13%)
Oklch
oklch(85.0% 0.068 91.5)

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

#F2F1DE

Fresh Green · Beige · Lemon Cream

HEX
#F2F1DE
RGB
rgb(242, 241, 222)
HSL
hsl(57, 43%, 91%)
HSB
hsb(57, 8%, 95%)
CMYK
cmyk(0%, 0%, 8%, 5%)
Oklch
oklch(95.4% 0.025 104.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC5C00
0070CC

Analogous

CC000A
CC5C00
CCC200

Triadic

CC5C00
00CC5C
5C00CC

Split-Comp.

CC5C00
00CCC2
000ACC

Tetradic

CC5C00
0ACC00
0070CC
C200CC

Contrast Matrix WCAG 2.1 Contrast

CC5C00
3B3933
DE9052
DECD9B
F2F1DE
—
2.8
Fail
1.6
Fail
2.6
Fail
3.6
AA Large
2.8
Fail
—
4.5
AA
7.3
AAA
10.1
AAA
1.6
Fail
4.5
AA
—
1.6
Fail
2.2
Fail
2.6
Fail
7.3
AAA
1.6
Fail
—
1.4
Fail
3.6
AA Large
10.1
AAA
2.2
Fail
1.4
Fail
—
White BG
4.1AA Large
11.5AAA
2.6Fail
1.6Fail
1.1Fail
Black BG
5.1AA
1.8Fail
8.2AAA
13.3AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9A16
3A3A34
BCBC61
D7D6A7
F2F2E3

Deuteranopia

A2AA1C
3A3A35
C1C765
D8D9AA
F2F2E4

Tritanopia

C6282C
3B3636
DA6D6F
DDB1B3
F2E6E7

Achromatopsia

737373
393939
A0A0A0
CCCCCC
EFEFEF

Shades & Tints Shades & Tints

#CC5C00

Dark
Light

#3B3933

Dark
Light

#DE9052

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc5c00;
  --color-2: #3b3933;
  --color-3: #de9052;
  --color-4: #decd9b;
  --color-5: #f2f1de;
}

SCSS

$color-1: #cc5c00;
$color-2: #3b3933;
$color-3: #de9052;
$color-4: #decd9b;
$color-5: #f2f1de;

TAILWIND

colors: {
  'brand-1': '#cc5c00',
  'brand-2': '#3b3933',
  'brand-3': '#de9052',
  'brand-4': '#decd9b',
  'brand-5': '#f2f1de',
}

RGB Array

[204, 92, 0], [59, 57, 51], [222, 144, 82], [222, 205, 155], [242, 241, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC5C00, #3B3933, #DE9052, #DECD9B, #F2F1DE 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: #cc5c00; --color-2: #3b3933; --color-3: #de9052; --color-4: #decd9b; --color-5: #f2f1de. 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