#D4DD42 + #ABCE7A + #9CAAB1 + #F29977 + #EFAA49 · 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

#D4DD42

Autumn Sage · GreenYellow · Sunflower

HEX

#D4DD42

RGB

rgb(212, 221, 66)

HSL

hsl(63, 70%, 56%)

HSB

hsb(63, 70%, 87%)

CMYK

cmyk(4%, 0%, 70%, 13%)

Oklch

oklch(86.4% 0.171 112.8)

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

#ABCE7A

Willow Green · DarkSeaGreen · Apple Green

HEX

#ABCE7A

RGB

rgb(171, 206, 122)

HSL

hsl(85, 46%, 64%)

HSB

hsb(85, 41%, 81%)

CMYK

cmyk(17%, 0%, 41%, 19%)

Oklch

oklch(80.6% 0.117 127.3)

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

#9CAAB1

Sky Blue · DarkGray · Cobalt Blue

HEX

#9CAAB1

RGB

rgb(156, 170, 177)

HSL

hsl(200, 12%, 65%)

HSB

hsb(200, 12%, 69%)

CMYK

cmyk(12%, 4%, 0%, 31%)

Oklch

oklch(72.9% 0.019 229.1)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#F29977

Apricot · DarkSalmon · Warm Sun

HEX

#F29977

RGB

rgb(242, 153, 119)

HSL

hsl(17, 83%, 71%)

HSB

hsb(17, 51%, 95%)

CMYK

cmyk(0%, 37%, 51%, 5%)

Oklch

oklch(76.6% 0.117 41.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#EFAA49

Ginger · SandyBrown · Warm Sun

HEX

#EFAA49

RGB

rgb(239, 170, 73)

HSL

hsl(35, 84%, 61%)

HSB

hsb(35, 69%, 94%)

CMYK

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

Oklch

oklch(78.7% 0.137 72.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4DD42

4840DD

Analogous

DD9740

D4DD42

87DD40

Triadic

D4DD42

40D5DD

DD40D5

Split-Comp.

D4DD42

4087DD

9740DD

Tetradic

D4DD42

40DD97

4840DD

DD4087

Contrast Matrix WCAG 2.1 Contrast

D4DD42	ABCE7A	9CAAB1	F29977	EFAA49
—	1.2 Fail	1.6 Fail	1.5 Fail	1.4 Fail
1.2 Fail	—	1.3 Fail	1.2 Fail	1.1 Fail
1.6 Fail	1.3 Fail	—	1.1 Fail	1.2 Fail
1.5 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.1 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

1.8Fail

2.4Fail

2.2Fail

2.0Fail

Black BG

14.2AAA

11.8AAA

8.8AAA

9.6AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D868

BABA8E

A2A2AF

CBCB7F

D1D160

Deuteranopia

D7D771

B8B693

A1A0AF

D1D781

D5DA66

Tritanopia

D4858C

AD9EA2

9DAEAE

EE8687

EC7377

Achromatopsia

C9C9C9

BABABA

A7A7A7

B0B0B0

B4B4B4

Shades & Tints Shades & Tints

#D4DD42

Dark

Light

#ABCE7A

Dark

Light

#9CAAB1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4dd42;
  --color-2: #abce7a;
  --color-3: #9caab1;
  --color-4: #f29977;
  --color-5: #efaa49;
}

SCSS

$color-1: #d4dd42;
$color-2: #abce7a;
$color-3: #9caab1;
$color-4: #f29977;
$color-5: #efaa49;

TAILWIND

colors: {
  'brand-1': '#d4dd42',
  'brand-2': '#abce7a',
  'brand-3': '#9caab1',
  'brand-4': '#f29977',
  'brand-5': '#efaa49',
}

RGB Array

[212, 221, 66], [171, 206, 122], [156, 170, 177], [242, 153, 119], [239, 170, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D4DD42, #ABCE7A, #9CAAB1, #F29977, #EFAA49 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: #d4dd42; --color-2: #abce7a; --color-3: #9caab1; --color-4: #f29977; --color-5: #efaa49. 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