#C9E9AA + #AEDFA8 + #88C59C + #AFA955 + #F24A49 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C9E9AA

Emerald · Wheat · Apple Green

HEX

#C9E9AA

RGB

rgb(201, 233, 170)

HSL

hsl(90, 59%, 79%)

HSB

hsb(90, 27%, 91%)

CMYK

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

Oklch

oklch(89.5% 0.090 129.9)

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

#AEDFA8

Celadon · LightGreen · Apple Green

HEX

#AEDFA8

RGB

rgb(174, 223, 168)

HSL

hsl(113, 46%, 77%)

HSB

hsb(113, 25%, 87%)

CMYK

cmyk(22%, 0%, 25%, 13%)

Oklch

oklch(85.5% 0.091 142.0)

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

#88C59C

Celadon · DarkSeaGreen · Apple Green

HEX

#88C59C

RGB

rgb(136, 197, 156)

HSL

hsl(140, 34%, 65%)

HSB

hsb(140, 31%, 77%)

CMYK

cmyk(31%, 0%, 21%, 23%)

Oklch

oklch(77.1% 0.086 154.5)

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

#AFA955

Autumn Sage · Tan · Sunflower

HEX

#AFA955

RGB

rgb(175, 169, 85)

HSL

hsl(56, 36%, 51%)

HSB

hsb(56, 51%, 69%)

CMYK

cmyk(0%, 3%, 51%, 31%)

Oklch

oklch(72.2% 0.107 105.1)

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

#F24A49

Peach Pink · Tomato · Coral Red

HEX

#F24A49

RGB

rgb(242, 74, 73)

HSL

hsl(0, 87%, 62%)

HSB

hsb(0, 70%, 95%)

CMYK

cmyk(0%, 69%, 70%, 5%)

Oklch

oklch(64.8% 0.205 25.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9E9AA

C9AAE9

Analogous

E9E9AA

C9E9AA

AAE9AA

Triadic

C9E9AA

AAC9E9

E9AAC9

Split-Comp.

C9E9AA

AAAAE9

E9AAE9

Tetradic

C9E9AA

AAE9E9

C9AAE9

E9AAAA

Contrast Matrix WCAG 2.1 Contrast

C9E9AA	AEDFA8	88C59C	AFA955	F24A49
—	1.1 Fail	1.5 Fail	1.8 Fail	2.7 Fail
1.1 Fail	—	1.3 Fail	1.6 Fail	2.4 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.8 Fail
1.8 Fail	1.6 Fail	1.2 Fail	—	1.5 Fail
2.7 Fail	2.4 Fail	1.8 Fail	1.5 Fail	—

White BG

1.3Fail

1.5Fail

2.0Fail

2.4Fail

3.6AA Large

Black BG

15.7AAA

13.9AAA

10.5AAA

8.6AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7B9

C3C4B5

A2A3A6

ACAC69

A9A849

Deuteranopia

D5D3BD

C0BDB9

9F9AA8

ADAD6E

B3C049

Tritanopia

CBC5C8

B0C0C2

8BAEAF

AF797D

EA4949

Achromatopsia

D8D8D8

CACACA

AEAEAE

A1A1A1

7C7C7C

Shades & Tints Shades & Tints

#C9E9AA

Dark

Light

#AEDFA8

Dark

Light

#88C59C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9e9aa;
  --color-2: #aedfa8;
  --color-3: #88c59c;
  --color-4: #afa955;
  --color-5: #f24a49;
}

SCSS

$color-1: #c9e9aa;
$color-2: #aedfa8;
$color-3: #88c59c;
$color-4: #afa955;
$color-5: #f24a49;

TAILWIND

colors: {
  'brand-1': '#c9e9aa',
  'brand-2': '#aedfa8',
  'brand-3': '#88c59c',
  'brand-4': '#afa955',
  'brand-5': '#f24a49',
}

RGB Array

[201, 233, 170], [174, 223, 168], [136, 197, 156], [175, 169, 85], [242, 74, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C9E9AA, #AEDFA8, #88C59C, #AFA955, #F24A49 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: #c9e9aa; --color-2: #aedfa8; --color-3: #88c59c; --color-4: #afa955; --color-5: #f24a49. 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 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