← Back to Editor

#CC6C42 · #CDC395 · #9D9E6F · #697F4A · #495B2A

cool

A 5-color cool 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

#CC6C42

Tangerine · Chocolate · Warm Sun

HEX
#CC6C42
RGB
rgb(204, 108, 66)
HSL
hsl(18, 58%, 53%)
HSB
hsb(18, 68%, 80%)
CMYK
cmyk(0%, 47%, 68%, 20%)
Oklch
oklch(63.4% 0.134 43.4)

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

#CDC395

Ginger · Tan · Sunflower

HEX
#CDC395
RGB
rgb(205, 195, 149)
HSL
hsl(49, 36%, 69%)
HSB
hsb(49, 27%, 80%)
CMYK
cmyk(0%, 5%, 27%, 20%)
Oklch
oklch(81.4% 0.062 97.3)

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

#9D9E6F

Autumn Sage · Gray · Sunflower

HEX
#9D9E6F
RGB
rgb(157, 158, 111)
HSL
hsl(61, 20%, 53%)
HSB
hsb(61, 30%, 62%)
CMYK
cmyk(1%, 0%, 30%, 38%)
Oklch
oklch(68.7% 0.065 109.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#697F4A

Grass Green · DimGray · Forest Green

HEX
#697F4A
RGB
rgb(105, 127, 74)
HSL
hsl(85, 26%, 39%)
HSB
hsb(85, 42%, 50%)
CMYK
cmyk(17%, 0%, 42%, 50%)
Oklch
oklch(56.5% 0.081 127.2)

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

#495B2A

Grass Green · DarkOliveGreen · Forest Green

HEX
#495B2A
RGB
rgb(73, 91, 42)
HSL
hsl(82, 37%, 26%)
HSB
hsb(82, 54%, 36%)
CMYK
cmyk(20%, 0%, 54%, 64%)
Oklch
oklch(44.4% 0.076 126.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC6C42
42A3CD

Analogous

CD425D
CC6C42
CDB142

Triadic

CC6C42
42CD6B
6B42CD

Split-Comp.

CC6C42
42CDB1
425DCD

Tetradic

CC6C42
5DCD42
42A3CD
B142CD

Contrast Matrix WCAG 2.1 Contrast

CC6C42
CDC395
9D9E6F
697F4A
495B2A
—
2.0
Fail
1.3
Fail
1.2
Fail
2.1
Fail
2.0
Fail
—
1.6
Fail
2.5
Fail
4.2
AA Large
1.3
Fail
1.6
Fail
—
1.6
Fail
2.7
Fail
1.2
Fail
2.5
Fail
1.6
Fail
—
1.7
Fail
2.1
Fail
4.2
AA Large
2.7
Fail
1.7
Fail
—
White BG
3.6AA Large
1.8Fail
2.8Fail
4.4AA Large
7.5AAA
Black BG
5.8AA
11.8AAA
7.6AAA
4.7AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A24C
C9C9A0
9D9D7A
737357
515136

Deuteranopia

A8AF4F
C9CAA3
9D9D7D
71705A
504E39

Tritanopia

C75456
CDA9AB
9D8385
6A6163
4A3F41

Achromatopsia

848484
C1C1C1
989898
727272
505050

Shades & Tints Shades & Tints

#CC6C42

Dark
Light

#CDC395

Dark
Light

#9D9E6F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc6c42;
  --color-2: #cdc395;
  --color-3: #9d9e6f;
  --color-4: #697f4a;
  --color-5: #495b2a;
}

SCSS

$color-1: #cc6c42;
$color-2: #cdc395;
$color-3: #9d9e6f;
$color-4: #697f4a;
$color-5: #495b2a;

TAILWIND

colors: {
  'brand-1': '#cc6c42',
  'brand-2': '#cdc395',
  'brand-3': '#9d9e6f',
  'brand-4': '#697f4a',
  'brand-5': '#495b2a',
}

RGB Array

[204, 108, 66], [205, 195, 149], [157, 158, 111], [105, 127, 74], [73, 91, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CC6C42, #CDC395, #9D9E6F, #697F4A, #495B2A 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: #cc6c42; --color-2: #cdc395; --color-3: #9d9e6f; --color-4: #697f4a; --color-5: #495b2a. 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 cool-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