#C3CC9E + #A7CCAC + #8BCCB9 + #91BEA8 + #C04F22 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C3CC9E

Willow Green · Tan · Apple Green

HEX

#C3CC9E

RGB

rgb(195, 204, 158)

HSL

hsl(72, 31%, 71%)

HSB

hsb(72, 23%, 80%)

CMYK

cmyk(4%, 0%, 23%, 20%)

Oklch

oklch(82.7% 0.063 116.8)

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

#A7CCAC

Celadon · Silver · Apple Green

HEX

#A7CCAC

RGB

rgb(167, 204, 172)

HSL

hsl(128, 27%, 73%)

HSB

hsb(128, 18%, 80%)

CMYK

cmyk(18%, 0%, 16%, 20%)

Oklch

oklch(81.0% 0.060 148.8)

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

#8BCCB9

Jade · MediumAquaMarine · Lake Green

HEX

#8BCCB9

RGB

rgb(139, 204, 185)

HSL

hsl(162, 39%, 67%)

HSB

hsb(162, 32%, 80%)

CMYK

cmyk(32%, 0%, 9%, 20%)

Oklch

oklch(79.6% 0.072 174.2)

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

#91BEA8

Jade · DarkSeaGreen · Apple Green

HEX

#91BEA8

RGB

rgb(145, 190, 168)

HSL

hsl(151, 26%, 66%)

HSB

hsb(151, 24%, 75%)

CMYK

cmyk(24%, 0%, 12%, 25%)

Oklch

oklch(76.3% 0.057 163.5)

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

#C04F22

Tangerine · Chocolate · Amber Brown

HEX

#C04F22

RGB

rgb(192, 79, 34)

HSL

hsl(17, 70%, 44%)

HSB

hsb(17, 82%, 75%)

CMYK

cmyk(0%, 59%, 82%, 25%)

Oklch

oklch(56.9% 0.156 40.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3CC9E

A79ECC

Analogous

CCBE9E

C3CC9E

ACCC9E

Triadic

C3CC9E

9EC3CC

CC9EC3

Split-Comp.

C3CC9E

9EACCC

BE9ECC

Tetradic

C3CC9E

9ECCBE

A79ECC

CC9EAC

Contrast Matrix WCAG 2.1 Contrast

C3CC9E	A7CCAC	8BCCB9	91BEA8	C04F22
—	1.0 Fail	1.1 Fail	1.2 Fail	2.8 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	2.7 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	2.6 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	2.3 Fail
2.8 Fail	2.7 Fail	2.6 Fail	2.3 Fail	—

White BG

1.7Fail

1.8Fail

2.1Fail

4.8AA

Black BG

12.5AAA

11.9AAA

11.4AAA

10.1AAA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7A9

B7B7B4

A7A8BE

A4A5AD

8F8E2D

Deuteranopia

C6C6AC

B5B2B6

A39FBF

A29FAF

969E30

Tritanopia

C3B2B4

A9BABB

8EC1C2

93B2B2

BA3537

Achromatopsia

C4C4C4

BDBDBD

B6B6B6

AEAEAE

6C6C6C

Shades & Tints Shades & Tints

#C3CC9E

Dark

Light

#A7CCAC

Dark

Light

#8BCCB9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3cc9e;
  --color-2: #a7ccac;
  --color-3: #8bccb9;
  --color-4: #91bea8;
  --color-5: #c04f22;
}

SCSS

$color-1: #c3cc9e;
$color-2: #a7ccac;
$color-3: #8bccb9;
$color-4: #91bea8;
$color-5: #c04f22;

TAILWIND

colors: {
  'brand-1': '#c3cc9e',
  'brand-2': '#a7ccac',
  'brand-3': '#8bccb9',
  'brand-4': '#91bea8',
  'brand-5': '#c04f22',
}

RGB Array

[195, 204, 158], [167, 204, 172], [139, 204, 185], [145, 190, 168], [192, 79, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C3CC9E, #A7CCAC, #8BCCB9, #91BEA8, #C04F22 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: #c3cc9e; --color-2: #a7ccac; --color-3: #8bccb9; --color-4: #91bea8; --color-5: #c04f22. 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