#D9D777 + #ABC791 + #72C2A7 + #22B59A + #704E49 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D9D777

Fresh Green · Khaki · Sunflower

HEX

#D9D777

RGB

rgb(217, 215, 119)

HSL

hsl(59, 56%, 66%)

HSB

hsb(59, 45%, 85%)

CMYK

cmyk(0%, 1%, 45%, 15%)

Oklch

oklch(86.0% 0.119 107.6)

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

#ABC791

Celadon · DarkSeaGreen · Apple Green

HEX

#ABC791

RGB

rgb(171, 199, 145)

HSL

hsl(91, 33%, 67%)

HSB

hsb(91, 27%, 78%)

CMYK

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

Oklch

oklch(79.5% 0.080 130.3)

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

#72C2A7

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#72C2A7

RGB

rgb(114, 194, 167)

HSL

hsl(160, 40%, 60%)

HSB

hsb(160, 41%, 76%)

CMYK

cmyk(41%, 0%, 14%, 24%)

Oklch

oklch(75.5% 0.089 170.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#22B59A

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#22B59A

RGB

rgb(34, 181, 154)

HSL

hsl(169, 68%, 42%)

HSB

hsb(169, 81%, 71%)

CMYK

cmyk(81%, 0%, 15%, 29%)

Oklch

oklch(69.4% 0.123 176.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#704E49

Crimson · DimGray · Wine Red

HEX

#704E49

RGB

rgb(112, 78, 73)

HSL

hsl(8, 21%, 36%)

HSB

hsb(8, 35%, 44%)

CMYK

cmyk(0%, 30%, 35%, 56%)

Oklch

oklch(45.9% 0.047 28.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9D777

7879D9

Analogous

D9A778

D9D777

AAD978

Triadic

D9D777

78D9D7

D778D9

Split-Comp.

D9D777

78AAD9

A778D9

Tetradic

D9D777

78D9A7

7879D9

D978AA

Contrast Matrix WCAG 2.1 Contrast

D9D777	ABC791	72C2A7	22B59A	704E49
—	1.2 Fail	1.4 Fail	1.7 Fail	4.8 AA
1.2 Fail	—	1.1 Fail	1.4 Fail	3.9 AA Large
1.4 Fail	1.1 Fail	—	1.2 Fail	3.5 AA Large
1.7 Fail	1.4 Fail	1.2 Fail	—	2.8 Fail
4.8 AA	3.9 AA Large	3.5 AA Large	2.8 Fail	—

White BG

1.5Fail

1.9Fail

2.1Fail

2.6Fail

7.3AAA

Black BG

13.9AAA

11.3AAA

10.0AAA

8.1AAA

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D88E

B7B79E

9595AE

6263A1

61614A

Deuteranopia

D8D894

B6B3A1

908AAF

594EA2

63664B

Tritanopia

D9A1A5

ACA8AB

76B3B4

29A6A7

6E4B4B

Achromatopsia

CDCDCD

B8B8B8

A7A7A7

868686

585858

Shades & Tints Shades & Tints

#D9D777

Dark

Light

#ABC791

Dark

Light

#72C2A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9d777;
  --color-2: #abc791;
  --color-3: #72c2a7;
  --color-4: #22b59a;
  --color-5: #704e49;
}

SCSS

$color-1: #d9d777;
$color-2: #abc791;
$color-3: #72c2a7;
$color-4: #22b59a;
$color-5: #704e49;

TAILWIND

colors: {
  'brand-1': '#d9d777',
  'brand-2': '#abc791',
  'brand-3': '#72c2a7',
  'brand-4': '#22b59a',
  'brand-5': '#704e49',
}

RGB Array

[217, 215, 119], [171, 199, 145], [114, 194, 167], [34, 181, 154], [112, 78, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9D777, #ABC791, #72C2A7, #22B59A, #704E49 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: #d9d777; --color-2: #abc791; --color-3: #72c2a7; --color-4: #22b59a; --color-5: #704e49. 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 general-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