#ABB590 + #899B73 + #D38243 + #CA320B + #F0DEAE · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ABB590

Willow Green · DarkGray · Apple Green

HEX

#ABB590

RGB

rgb(171, 181, 144)

HSL

hsl(76, 20%, 64%)

HSB

hsb(76, 20%, 71%)

CMYK

cmyk(6%, 0%, 20%, 29%)

Oklch

oklch(75.5% 0.052 119.9)

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

#899B73

Grass Green · Gray · Olive Green

HEX

#899B73

RGB

rgb(137, 155, 115)

HSL

hsl(87, 17%, 53%)

HSB

hsb(87, 26%, 61%)

CMYK

cmyk(12%, 0%, 26%, 39%)

Oklch

oklch(66.5% 0.061 127.7)

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

#D38243

Tangerine · Chocolate · Warm Sun

HEX

#D38243

RGB

rgb(211, 130, 67)

HSL

hsl(26, 62%, 55%)

HSB

hsb(26, 68%, 83%)

CMYK

cmyk(0%, 38%, 68%, 17%)

Oklch

oklch(68.1% 0.127 56.3)

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

#CA320B

Vermilion · FireBrick · Passion Red

HEX

#CA320B

RGB

rgb(202, 50, 11)

HSL

hsl(12, 90%, 42%)

HSB

hsb(12, 95%, 79%)

CMYK

cmyk(0%, 75%, 95%, 21%)

Oklch

oklch(55.2% 0.194 33.8)

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

#F0DEAE

Goose Yellow · Wheat · Lemon Cream

HEX

#F0DEAE

RGB

rgb(240, 222, 174)

HSL

hsl(44, 69%, 81%)

HSB

hsb(44, 27%, 94%)

CMYK

cmyk(0%, 7%, 27%, 6%)

Oklch

oklch(90.3% 0.065 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABB590

9B91B6

Analogous

B6AD91

ABB590

99B691

Triadic

ABB590

91ACB6

B691AC

Split-Comp.

ABB590

9199B6

AD91B6

Tetradic

ABB590

91B6AD

9B91B6

B69199

Contrast Matrix WCAG 2.1 Contrast

ABB590	899B73	D38243	CA320B	F0DEAE
—	1.4 Fail	1.4 Fail	2.5 Fail	1.6 Fail
1.4 Fail	—	1.0 Fail	1.8 Fail	2.3 Fail
1.4 Fail	1.0 Fail	—	1.8 Fail	2.2 Fail
2.5 Fail	1.8 Fail	1.8 Fail	—	4.0 AA Large
1.6 Fail	2.3 Fail	2.2 Fail	4.0 AA Large	—

White BG

2.2Fail

3.0AA Large

3.0Fail

5.3AA

1.3Fail

Black BG

9.7AAA

7.0AA

7.0AAA

4.0AA Large

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAF99

91917D

B0AF52

888714

E8E8BA

Deuteranopia

AFAE9B

908E7F

B5BB56

919C17

E9EBBC

Tritanopia

ACA0A2

8A8486

CF5E61

C21C1E

EFC3C5

Achromatopsia

AEAEAE

919191

939393

5B5B5B

DEDEDE

Shades & Tints Shades & Tints

#ABB590

Dark

Light

#899B73

Dark

Light

#D38243

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abb590;
  --color-2: #899b73;
  --color-3: #d38243;
  --color-4: #ca320b;
  --color-5: #f0deae;
}

SCSS

$color-1: #abb590;
$color-2: #899b73;
$color-3: #d38243;
$color-4: #ca320b;
$color-5: #f0deae;

TAILWIND

colors: {
  'brand-1': '#abb590',
  'brand-2': '#899b73',
  'brand-3': '#d38243',
  'brand-4': '#ca320b',
  'brand-5': '#f0deae',
}

RGB Array

[171, 181, 144], [137, 155, 115], [211, 130, 67], [202, 50, 11], [240, 222, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #ABB590, #899B73, #D38243, #CA320B, #F0DEAE 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: #abb590; --color-2: #899b73; --color-3: #d38243; --color-4: #ca320b; --color-5: #f0deae. 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 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