#ABBA92 + #CDCF61 + #84B382 + #A36B47 + #AD3502 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#ABBA92

Willow Green · DarkSeaGreen · Apple Green

HEX

#ABBA92

RGB

rgb(171, 186, 146)

HSL

hsl(83, 22%, 65%)

HSB

hsb(83, 22%, 73%)

CMYK

cmyk(8%, 0%, 22%, 27%)

Oklch

oklch(76.7% 0.058 124.4)

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

#CDCF61

Autumn Sage · BurlyWood · Sunflower

HEX

#CDCF61

RGB

rgb(205, 207, 97)

HSL

hsl(61, 53%, 60%)

HSB

hsb(61, 53%, 81%)

CMYK

cmyk(1%, 0%, 53%, 19%)

Oklch

oklch(83.1% 0.133 109.9)

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

#84B382

Celadon · DarkSeaGreen · Apple Green

HEX

#84B382

RGB

rgb(132, 179, 130)

HSL

hsl(118, 24%, 61%)

HSB

hsb(118, 27%, 70%)

CMYK

cmyk(26%, 0%, 27%, 30%)

Oklch

oklch(72.0% 0.086 143.6)

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

#A36B47

Tangerine · Sienna · Amber Brown

HEX

#A36B47

RGB

rgb(163, 107, 71)

HSL

hsl(23, 39%, 46%)

HSB

hsb(23, 56%, 64%)

CMYK

cmyk(0%, 34%, 56%, 36%)

Oklch

oklch(57.9% 0.088 52.9)

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

#AD3502

Tangerine · FireBrick · Amber Brown

HEX

#AD3502

RGB

rgb(173, 53, 2)

HSL

hsl(18, 98%, 34%)

HSB

hsb(18, 99%, 68%)

CMYK

cmyk(0%, 69%, 99%, 32%)

Oklch

oklch(50.3% 0.164 37.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABBA92

A192B9

Analogous

B9B592

ABBA92

97B992

Triadic

ABBA92

92AAB9

B992AA

Split-Comp.

ABBA92

9297B9

B592B9

Tetradic

ABBA92

92B9B5

A192B9

B99297

Contrast Matrix WCAG 2.1 Contrast

ABBA92	CDCF61	84B382	A36B47	AD3502
—	1.2 Fail	1.2 Fail	2.1 Fail	3.1 AA Large
1.2 Fail	—	1.5 Fail	2.7 Fail	3.9 AA Large
1.2 Fail	1.5 Fail	—	1.8 Fail	2.7 Fail
2.1 Fail	2.7 Fail	1.8 Fail	—	1.4 Fail
3.1 AA Large	3.9 AA Large	2.7 Fail	1.4 Fail	—

White BG

2.1Fail

1.7Fail

2.4Fail

4.4AA Large

6.4AA

Black BG

10.2AAA

12.7AAA

8.8AAA

4.8AA

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B29C

CECE7C

98998E

8B8A50

79780E

Deuteranopia

B1B09E

CECE82

969291

8E9252

808911

Tritanopia

ACA3A5

CD9195

869799

A05758

A7181A

Achromatopsia

B1B1B1

C2C2C2

9F9F9F

787878

535353

Shades & Tints Shades & Tints

#ABBA92

Dark

Light

#CDCF61

Dark

Light

#84B382

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abba92;
  --color-2: #cdcf61;
  --color-3: #84b382;
  --color-4: #a36b47;
  --color-5: #ad3502;
}

SCSS

$color-1: #abba92;
$color-2: #cdcf61;
$color-3: #84b382;
$color-4: #a36b47;
$color-5: #ad3502;

TAILWIND

colors: {
  'brand-1': '#abba92',
  'brand-2': '#cdcf61',
  'brand-3': '#84b382',
  'brand-4': '#a36b47',
  'brand-5': '#ad3502',
}

RGB Array

[171, 186, 146], [205, 207, 97], [132, 179, 130], [163, 107, 71], [173, 53, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #ABBA92, #CDCF61, #84B382, #A36B47, #AD3502 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: #abba92; --color-2: #cdcf61; --color-3: #84b382; --color-4: #a36b47; --color-5: #ad3502. 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