← Back to Editor

#CC9C66 · #AD7658 · #965C50 · #855450 · #614D4D

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 Library

Color Details Color Details

#CC9C66

Ginger · DarkSalmon · Warm Sun

HEX
#CC9C66
RGB
rgb(204, 156, 102)
HSL
hsl(32, 50%, 60%)
HSB
hsb(32, 50%, 80%)
CMYK
cmyk(0%, 24%, 50%, 20%)
Oklch
oklch(72.6% 0.091 68.9)

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

#AD7658

Tangerine · Sienna · Warm Sun

HEX
#AD7658
RGB
rgb(173, 118, 88)
HSL
hsl(21, 34%, 51%)
HSB
hsb(21, 49%, 68%)
CMYK
cmyk(0%, 32%, 49%, 32%)
Oklch
oklch(61.5% 0.082 49.3)

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

#965C50

Crimson · Sienna · Passion Red

HEX
#965C50
RGB
rgb(150, 92, 80)
HSL
hsl(10, 30%, 45%)
HSB
hsb(10, 47%, 59%)
CMYK
cmyk(0%, 39%, 47%, 41%)
Oklch
oklch(53.6% 0.079 32.4)

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

#855450

Crimson · DimGray · Passion Red

HEX
#855450
RGB
rgb(133, 84, 80)
HSL
hsl(5, 25%, 42%)
HSB
hsb(5, 40%, 52%)
CMYK
cmyk(0%, 37%, 40%, 48%)
Oklch
oklch(50.0% 0.066 24.8)

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

#614D4D

Crimson · DimGray · Wine Red

HEX
#614D4D
RGB
rgb(97, 77, 77)
HSL
hsl(0, 11%, 34%)
HSB
hsb(0, 21%, 38%)
CMYK
cmyk(0%, 21%, 21%, 62%)
Oklch
oklch(44.1% 0.027 18.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC9C66
6696CC

Analogous

CC6966
CC9C66
C9CC66

Triadic

CC9C66
66CC9C
9C66CC

Split-Comp.

CC9C66
66C9CC
6966CC

Tetradic

CC9C66
66CC69
6696CC
CC66C9

Contrast Matrix WCAG 2.1 Contrast

CC9C66
AD7658
965C50
855450
614D4D
—
1.5
Fail
2.2
Fail
2.5
Fail
3.2
AA Large
1.5
Fail
—
1.4
Fail
1.6
Fail
2.1
Fail
2.2
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
2.5
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
3.2
AA Large
2.1
Fail
1.5
Fail
1.3
Fail
—
White BG
2.5Fail
3.8AA Large
5.3AA
6.2AA
7.8AAA
Black BG
8.5AAA
5.5AA
3.9AA Large
3.4AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B773
95955F
7D7C53
706F51
58584D

Deuteranopia

BABE76
989D61
808554
737651
5A5B4D

Tritanopia

CA7D80
AA6566
935556
835252
604D4D

Achromatopsia

A4A4A4
838383
6C6C6C
626262
535353

Shades & Tints Shades & Tints

#CC9C66

Dark
Light

#AD7658

Dark
Light

#965C50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc9c66;
  --color-2: #ad7658;
  --color-3: #965c50;
  --color-4: #855450;
  --color-5: #614d4d;
}

SCSS

$color-1: #cc9c66;
$color-2: #ad7658;
$color-3: #965c50;
$color-4: #855450;
$color-5: #614d4d;

TAILWIND

colors: {
  'brand-1': '#cc9c66',
  'brand-2': '#ad7658',
  'brand-3': '#965c50',
  'brand-4': '#855450',
  'brand-5': '#614d4d',
}

RGB Array

[204, 156, 102], [173, 118, 88], [150, 92, 80], [133, 84, 80], [97, 77, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC9C66, #AD7658, #965C50, #855450, #614D4D is ideal for: corporate websites, product showcases, portfolios. 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: #cc9c66; --color-2: #ad7658; --color-3: #965c50; --color-4: #855450; --color-5: #614d4d. 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. 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