#9490A2 + #AFA3A9 + #D8BBC1 + #DFEEB2 + #ECFAC4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9490A2

Deep Indigo · LightSlateGray · Silver Sand

HEX

#9490A2

RGB

rgb(148, 144, 162)

HSL

hsl(253, 9%, 60%)

HSB

hsb(253, 11%, 64%)

CMYK

cmyk(9%, 11%, 0%, 36%)

Oklch

oklch(66.3% 0.027 295.8)

Traditional「Deep Indigo」· Paint「Silver Sand」· Creative Urban Concrete

#AFA3A9

Ash · DarkGray · Silver Sand

HEX

#AFA3A9

RGB

rgb(175, 163, 169)

HSL

hsl(330, 7%, 66%)

HSB

hsb(330, 7%, 69%)

CMYK

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

Oklch

oklch(72.7% 0.016 345.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D8BBC1

Peach Pink · Silver · Coral Red

HEX

#D8BBC1

RGB

rgb(216, 187, 193)

HSL

hsl(348, 27%, 79%)

HSB

hsb(348, 13%, 85%)

CMYK

cmyk(0%, 13%, 11%, 15%)

Oklch

oklch(81.9% 0.034 3.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DFEEB2

Willow Green · Wheat · Mint Green

HEX

#DFEEB2

RGB

rgb(223, 238, 178)

HSL

hsl(75, 64%, 82%)

HSB

hsb(75, 25%, 93%)

CMYK

cmyk(6%, 0%, 25%, 7%)

Oklch

oklch(92.3% 0.080 119.4)

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

#ECFAC4

Willow Green · Beige · Mint Green

HEX

#ECFAC4

RGB

rgb(236, 250, 196)

HSL

hsl(76, 84%, 87%)

HSB

hsb(76, 22%, 98%)

CMYK

cmyk(6%, 0%, 22%, 2%)

Oklch

oklch(96.1% 0.072 119.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9490A2

9EA290

Analogous

9095A2

9490A2

9D90A2

Triadic

9490A2

A29490

90A294

Split-Comp.

9490A2

A29D90

95A290

Tetradic

9490A2

A29095

9EA290

90A29D

Contrast Matrix WCAG 2.1 Contrast

9490A2	AFA3A9	D8BBC1	DFEEB2	ECFAC4
—	1.3 Fail	1.7 Fail	2.5 Fail	2.8 Fail
1.3 Fail	—	1.4 Fail	2.0 Fail	2.2 Fail
1.7 Fail	1.4 Fail	—	1.4 Fail	1.6 Fail
2.5 Fail	2.0 Fail	1.4 Fail	—	1.1 Fail
2.8 Fail	2.2 Fail	1.6 Fail	1.1 Fail	—

White BG

3.1AA Large

2.4Fail

1.8Fail

1.2Fail

1.1Fail

Black BG

6.8AA

8.6AAA

11.8AAA

17.0AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

92929E

AAAAA8

CBCBC0

E5E6C1

F2F2D1

Deuteranopia

93939D

ABABA7

CDCFBF

E5E4C4

F1F0D4

Tritanopia

949A99

AEA6A6

D7BEBE

E0CCCF

EDDBDE

Achromatopsia

939393

A7A7A7

C4C4C4

E3E3E3

F0F0F0

Shades & Tints Shades & Tints

#9490A2

Dark

Light

#AFA3A9

Dark

Light

#D8BBC1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9490a2;
  --color-2: #afa3a9;
  --color-3: #d8bbc1;
  --color-4: #dfeeb2;
  --color-5: #ecfac4;
}

SCSS

$color-1: #9490a2;
$color-2: #afa3a9;
$color-3: #d8bbc1;
$color-4: #dfeeb2;
$color-5: #ecfac4;

TAILWIND

colors: {
  'brand-1': '#9490a2',
  'brand-2': '#afa3a9',
  'brand-3': '#d8bbc1',
  'brand-4': '#dfeeb2',
  'brand-5': '#ecfac4',
}

RGB Array

[148, 144, 162], [175, 163, 169], [216, 187, 193], [223, 238, 178], [236, 250, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9490A2, #AFA3A9, #D8BBC1, #DFEEB2, #ECFAC4 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: #9490a2; --color-2: #afa3a9; --color-3: #d8bbc1; --color-4: #dfeeb2; --color-5: #ecfac4. 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 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