#A4D6BB + #FDEAA6 + #E7E4AD + #C4D3B7 + #71B4BC · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A4D6BB

Celadon · Silver · Apple Green

HEX

#A4D6BB

RGB

rgb(164, 214, 187)

HSL

hsl(148, 38%, 74%)

HSB

hsb(148, 23%, 84%)

CMYK

cmyk(23%, 0%, 13%, 16%)

Oklch

oklch(83.4% 0.064 161.0)

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

#FDEAA6

Goose Yellow · Wheat · Lemon Cream

HEX

#FDEAA6

RGB

rgb(253, 234, 166)

HSL

hsl(47, 96%, 82%)

HSB

hsb(47, 34%, 99%)

CMYK

cmyk(0%, 8%, 34%, 1%)

Oklch

oklch(93.7% 0.088 94.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E7E4AD

Fresh Green · Wheat · Lemon Cream

HEX

#E7E4AD

RGB

rgb(231, 228, 173)

HSL

hsl(57, 55%, 79%)

HSB

hsb(57, 25%, 91%)

CMYK

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

Oklch

oklch(90.8% 0.071 105.1)

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

#C4D3B7

Celadon · Silver · Apple Green

HEX

#C4D3B7

RGB

rgb(196, 211, 183)

HSL

hsl(92, 24%, 77%)

HSB

hsb(92, 13%, 83%)

CMYK

cmyk(7%, 0%, 13%, 17%)

Oklch

oklch(84.8% 0.041 130.4)

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

#71B4BC

Slate Blue · MediumAquaMarine · Lake Green

HEX

#71B4BC

RGB

rgb(113, 180, 188)

HSL

hsl(186, 36%, 59%)

HSB

hsb(186, 40%, 74%)

CMYK

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

Oklch

oklch(72.8% 0.069 205.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A4D6BB

D6A4BE

Analogous

A5D6A4

A4D6BB

A4D6D4

Triadic

A4D6BB

BBA4D6

D6BBA4

Split-Comp.

A4D6BB

D4A4D6

D6A4A5

Tetradic

A4D6BB

A4A5D6

D6A4BE

D6D4A4

Contrast Matrix WCAG 2.1 Contrast

A4D6BB	FDEAA6	E7E4AD	C4D3B7	71B4BC
—	1.4 Fail	1.2 Fail	1.0 Fail	1.4 Fail
1.4 Fail	—	1.1 Fail	1.3 Fail	2.0 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.8 Fail
1.0 Fail	1.3 Fail	1.2 Fail	—	1.5 Fail
1.4 Fail	2.0 Fail	1.8 Fail	1.5 Fail	—

White BG

1.6Fail

1.2Fail

1.3Fail

1.6Fail

2.3Fail

Black BG

12.9AAA

17.5AAA

16.1AAA

13.3AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAC2

F5F5B6

E6E6BA

CACBBE

8E8FBA

Deuteranopia

B7B3C3

F6F7BA

E6E6BE

CAC9BF

8A85BA

Tritanopia

A6C7C8

FCC3C6

E7C5C7

C5C3C4

74B9B8

Achromatopsia

C4C4C4

E8E8E8

DFDFDF

CBCBCB

A1A1A1

Shades & Tints Shades & Tints

#A4D6BB

Dark

Light

#FDEAA6

Dark

Light

#E7E4AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4d6bb;
  --color-2: #fdeaa6;
  --color-3: #e7e4ad;
  --color-4: #c4d3b7;
  --color-5: #71b4bc;
}

SCSS

$color-1: #a4d6bb;
$color-2: #fdeaa6;
$color-3: #e7e4ad;
$color-4: #c4d3b7;
$color-5: #71b4bc;

TAILWIND

colors: {
  'brand-1': '#a4d6bb',
  'brand-2': '#fdeaa6',
  'brand-3': '#e7e4ad',
  'brand-4': '#c4d3b7',
  'brand-5': '#71b4bc',
}

RGB Array

[164, 214, 187], [253, 234, 166], [231, 228, 173], [196, 211, 183], [113, 180, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #A4D6BB, #FDEAA6, #E7E4AD, #C4D3B7, #71B4BC 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: #a4d6bb; --color-2: #fdeaa6; --color-3: #e7e4ad; --color-4: #c4d3b7; --color-5: #71b4bc. 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