← Back to Editor

#CC8F60 · #B7A075 · #9EB48E · #8CC2A0 · #77D4B6

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CC8F60

Tangerine · DarkSalmon · Warm Sun

HEX
#CC8F60
RGB
rgb(204, 143, 96)
HSL
hsl(26, 51%, 59%)
HSB
hsb(26, 53%, 80%)
CMYK
cmyk(0%, 30%, 53%, 20%)
Oklch
oklch(70.0% 0.097 57.9)

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

#B7A075

Ginger · Tan · Warm Sun

HEX
#B7A075
RGB
rgb(183, 160, 117)
HSL
hsl(39, 31%, 59%)
HSB
hsb(39, 36%, 72%)
CMYK
cmyk(0%, 13%, 36%, 28%)
Oklch
oklch(71.5% 0.064 82.8)

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

#9EB48E

Celadon · DarkSeaGreen · Apple Green

HEX
#9EB48E
RGB
rgb(158, 180, 142)
HSL
hsl(95, 20%, 63%)
HSB
hsb(95, 21%, 71%)
CMYK
cmyk(12%, 0%, 21%, 29%)
Oklch
oklch(74.3% 0.058 132.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#8CC2A0

Celadon · DarkSeaGreen · Apple Green

HEX
#8CC2A0
RGB
rgb(140, 194, 160)
HSL
hsl(142, 31%, 65%)
HSB
hsb(142, 28%, 76%)
CMYK
cmyk(28%, 0%, 18%, 24%)
Oklch
oklch(76.7% 0.075 156.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#77D4B6

Jade · MediumAquaMarine · Lake Green

HEX
#77D4B6
RGB
rgb(119, 212, 182)
HSL
hsl(161, 52%, 65%)
HSB
hsb(161, 44%, 83%)
CMYK
cmyk(44%, 0%, 14%, 17%)
Oklch
oklch(80.4% 0.100 170.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC8F60
619ECC

Analogous

CC6168
CC8F60
CCC561

Triadic

CC8F60
61CC8F
8F61CC

Split-Comp.

CC8F60
61CCC5
6168CC

Tetradic

CC8F60
68CC61
619ECC
C561CC

Contrast Matrix WCAG 2.1 Contrast

CC8F60
B7A075
9EB48E
8CC2A0
77D4B6
—
1.1
Fail
1.2
Fail
1.3
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
2.7Fail
2.5Fail
2.2Fail
2.0Fail
1.8Fail
Black BG
7.7AAA
8.3AAA
9.4AAA
10.3AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B16B
ADAD7F
A8A897
A3A4A8
9FA0BD

Deuteranopia

B5BA6E
AEB082
A6A599
A09CAA
9A93BF

Tritanopia

C97476
B68889
9F9EA0
8FAFB0
7CC3C4

Achromatopsia

9C9C9C
A2A2A2
A9A9A9
AEAEAE
B5B5B5

Shades & Tints Shades & Tints

#CC8F60

Dark
Light

#B7A075

Dark
Light

#9EB48E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc8f60;
  --color-2: #b7a075;
  --color-3: #9eb48e;
  --color-4: #8cc2a0;
  --color-5: #77d4b6;
}

SCSS

$color-1: #cc8f60;
$color-2: #b7a075;
$color-3: #9eb48e;
$color-4: #8cc2a0;
$color-5: #77d4b6;

TAILWIND

colors: {
  'brand-1': '#cc8f60',
  'brand-2': '#b7a075',
  'brand-3': '#9eb48e',
  'brand-4': '#8cc2a0',
  'brand-5': '#77d4b6',
}

RGB Array

[204, 143, 96], [183, 160, 117], [158, 180, 142], [140, 194, 160], [119, 212, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CC8F60, #B7A075, #9EB48E, #8CC2A0, #77D4B6 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: #cc8f60; --color-2: #b7a075; --color-3: #9eb48e; --color-4: #8cc2a0; --color-5: #77d4b6. 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 warm-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