#9C5F91 + #AAC986 + #AFE3D6 + #D0F4D2 + #DED3DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9C5F91

Rose Purple · Gray · Violet

HEX

#9C5F91

RGB

rgb(156, 95, 145)

HSL

hsl(311, 24%, 49%)

HSB

hsb(311, 39%, 61%)

CMYK

cmyk(0%, 39%, 7%, 39%)

Oklch

oklch(57.0% 0.104 333.7)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#AAC986

Willow Green · DarkSeaGreen · Apple Green

HEX

#AAC986

RGB

rgb(170, 201, 134)

HSL

hsl(88, 38%, 66%)

HSB

hsb(88, 33%, 79%)

CMYK

cmyk(15%, 0%, 33%, 21%)

Oklch

oklch(79.7% 0.096 128.6)

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

#AFE3D6

Jade · LightBlue · Glacier Blue

HEX

#AFE3D6

RGB

rgb(175, 227, 214)

HSL

hsl(165, 48%, 79%)

HSB

hsb(165, 23%, 89%)

CMYK

cmyk(23%, 0%, 6%, 11%)

Oklch

oklch(87.6% 0.056 177.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D0F4D2

Emerald · LightGray · Mint Green

HEX

#D0F4D2

RGB

rgb(208, 244, 210)

HSL

hsl(123, 62%, 89%)

HSB

hsb(123, 15%, 96%)

CMYK

cmyk(15%, 0%, 14%, 4%)

Oklch

oklch(93.2% 0.059 146.6)

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

#DED3DB

Mauve · LightGray · Lavender

HEX

#DED3DB

RGB

rgb(222, 211, 219)

HSL

hsl(316, 14%, 85%)

HSB

hsb(316, 5%, 87%)

CMYK

cmyk(0%, 5%, 1%, 13%)

Oklch

oklch(87.8% 0.016 335.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C5F91

5F9B6A

Analogous

885F9B

9C5F91

9B5F72

Triadic

9C5F91

909B5F

5F909B

Split-Comp.

9C5F91

729B5F

5F9B88

Tetradic

9C5F91

9B885F

5F9B6A

5F729B

Contrast Matrix WCAG 2.1 Contrast

9C5F91	AAC986	AFE3D6	D0F4D2	DED3DB
—	2.6 Fail	3.3 AA Large	3.9 AA Large	3.2 AA Large
2.6 Fail	—	1.3 Fail	1.5 Fail	1.3 Fail
3.3 AA Large	1.3 Fail	—	1.2 Fail	1.0 Fail
3.9 AA Large	1.5 Fail	1.2 Fail	—	1.2 Fail
3.2 AA Large	1.3 Fail	1.0 Fail	1.2 Fail	—

White BG

4.7AA

1.8Fail

1.4Fail

1.2Fail

1.5Fail

Black BG

4.5AA Large

11.4AAA

14.8AAA

17.6AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

828185

B7B896

C6C6D9

E0E0DA

D9D9D9

Deuteranopia

858A82

B6B39A

C3BFDA

DEDBDC

DADBD9

Tritanopia

997B79

ACA3A6

B2DCDC

D2E1E2

DDD8D7

Achromatopsia

777777

B8B8B8

D2D2D2

E5E5E5

D7D7D7

Shades & Tints Shades & Tints

#9C5F91

Dark

Light

#AAC986

Dark

Light

#AFE3D6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c5f91;
  --color-2: #aac986;
  --color-3: #afe3d6;
  --color-4: #d0f4d2;
  --color-5: #ded3db;
}

SCSS

$color-1: #9c5f91;
$color-2: #aac986;
$color-3: #afe3d6;
$color-4: #d0f4d2;
$color-5: #ded3db;

TAILWIND

colors: {
  'brand-1': '#9c5f91',
  'brand-2': '#aac986',
  'brand-3': '#afe3d6',
  'brand-4': '#d0f4d2',
  'brand-5': '#ded3db',
}

RGB Array

[156, 95, 145], [170, 201, 134], [175, 227, 214], [208, 244, 210], [222, 211, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C5F91, #AAC986, #AFE3D6, #D0F4D2, #DED3DB 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: #9c5f91; --color-2: #aac986; --color-3: #afe3d6; --color-4: #d0f4d2; --color-5: #ded3db. 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