#A3A17A + #76CE84 + #D0D89F + #BAFAA6 + #DFF4B3 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A3A17A

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A3A17A

RGB

rgb(163, 161, 122)

HSL

hsl(57, 18%, 56%)

HSB

hsb(57, 25%, 64%)

CMYK

cmyk(0%, 1%, 25%, 36%)

Oklch

oklch(70.1% 0.054 105.3)

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

#76CE84

Celadon · DarkSeaGreen · Apple Green

HEX

#76CE84

RGB

rgb(118, 206, 132)

HSL

hsl(130, 47%, 64%)

HSB

hsb(130, 43%, 81%)

CMYK

cmyk(43%, 0%, 36%, 19%)

Oklch

oklch(77.7% 0.135 147.9)

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

#D0D89F

Fresh Green · Khaki · Sunflower

HEX

#D0D89F

RGB

rgb(208, 216, 159)

HSL

hsl(68, 42%, 74%)

HSB

hsb(68, 26%, 85%)

CMYK

cmyk(4%, 0%, 26%, 15%)

Oklch

oklch(86.2% 0.076 114.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#BAFAA6

Emerald · LightGreen · Mint Green

HEX

#BAFAA6

RGB

rgb(186, 250, 166)

HSL

hsl(106, 89%, 82%)

HSB

hsb(106, 34%, 98%)

CMYK

cmyk(26%, 0%, 34%, 2%)

Oklch

oklch(92.2% 0.128 138.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#DFF4B3

Willow Green · Wheat · Mint Green

HEX

#DFF4B3

RGB

rgb(223, 244, 179)

HSL

hsl(79, 75%, 83%)

HSB

hsb(79, 27%, 96%)

CMYK

cmyk(9%, 0%, 27%, 4%)

Oklch

oklch(93.6% 0.087 122.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3A17A

7B7DA3

Analogous

A38D7B

A3A17A

91A37B

Triadic

A3A17A

7BA3A1

A17BA3

Split-Comp.

A3A17A

7B91A3

8D7BA3

Tetradic

A3A17A

7BA38D

7B7DA3

A37B91

Contrast Matrix WCAG 2.1 Contrast

A3A17A	76CE84	D0D89F	BAFAA6	DFF4B3
—	1.4 Fail	1.8 Fail	2.2 Fail	2.2 Fail
1.4 Fail	—	1.3 Fail	1.6 Fail	1.6 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
2.2 Fail	1.6 Fail	1.2 Fail	—	1.0 Fail
2.2 Fail	1.6 Fail	1.3 Fail	1.0 Fail	—

White BG

2.6Fail

1.9Fail

1.5Fail

1.2Fail

Black BG

7.9AAA

10.9AAA

14.0AAA

17.3AAA

17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A283

9C9D96

D3D4AD

D6D6BA

E8E8C3

Deuteranopia

A2A286

97909A

D3D2B0

D2CDBF

E7E5C7

Tritanopia

A38B8D

7AA4A7

D0B8BA

BDCACE

E0CFD2

Achromatopsia

9D9D9D

ABABAB

CFCFCF

DDDDDD

E6E6E6

Shades & Tints Shades & Tints

#A3A17A

Dark

Light

#76CE84

Dark

Light

#D0D89F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3a17a;
  --color-2: #76ce84;
  --color-3: #d0d89f;
  --color-4: #bafaa6;
  --color-5: #dff4b3;
}

SCSS

$color-1: #a3a17a;
$color-2: #76ce84;
$color-3: #d0d89f;
$color-4: #bafaa6;
$color-5: #dff4b3;

TAILWIND

colors: {
  'brand-1': '#a3a17a',
  'brand-2': '#76ce84',
  'brand-3': '#d0d89f',
  'brand-4': '#bafaa6',
  'brand-5': '#dff4b3',
}

RGB Array

[163, 161, 122], [118, 206, 132], [208, 216, 159], [186, 250, 166], [223, 244, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A3A17A, #76CE84, #D0D89F, #BAFAA6, #DFF4B3 is ideal for: health products, baby brands, fresh-style blogs. 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: #a3a17a; --color-2: #76ce84; --color-3: #d0d89f; --color-4: #bafaa6; --color-5: #dff4b3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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