#9AAFA5 + #F2EEBB + #9484A3 + #C693CC + #DFABEB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9AAFA5

Jade · DarkGray · Apple Green

HEX

#9AAFA5

RGB

rgb(154, 175, 165)

HSL

hsl(151, 12%, 65%)

HSB

hsb(151, 12%, 69%)

CMYK

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

Oklch

oklch(73.5% 0.027 165.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#F2EEBB

Fresh Green · Wheat · Lemon Cream

HEX

#F2EEBB

RGB

rgb(242, 238, 187)

HSL

hsl(56, 68%, 84%)

HSB

hsb(56, 23%, 95%)

CMYK

cmyk(0%, 2%, 23%, 5%)

Oklch

oklch(94.0% 0.066 103.9)

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

#9484A3

Dark Plum · LightSlateGray · Violet

HEX

#9484A3

RGB

rgb(148, 132, 163)

HSL

hsl(271, 14%, 58%)

HSB

hsb(271, 19%, 64%)

CMYK

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

Oklch

oklch(63.8% 0.049 308.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#C693CC

Lilac · Orchid · Lilac Purple

HEX

#C693CC

RGB

rgb(198, 147, 204)

HSL

hsl(294, 36%, 69%)

HSB

hsb(294, 28%, 80%)

CMYK

cmyk(3%, 28%, 0%, 20%)

Oklch

oklch(73.1% 0.098 322.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#DFABEB

Lilac · Violet · Lilac Purple

HEX

#DFABEB

RGB

rgb(223, 171, 235)

HSL

hsl(289, 62%, 80%)

HSB

hsb(289, 27%, 92%)

CMYK

cmyk(5%, 27%, 0%, 8%)

Oklch

oklch(81.0% 0.104 319.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AAFA5

B09BA5

Analogous

9BB09B

9AAFA5

9BB0B0

Triadic

9AAFA5

A69BB0

B0A69B

Split-Comp.

9AAFA5

B09BB0

B09B9B

Tetradic

9AAFA5

9B9BB0

B09BA5

B0B09B

Contrast Matrix WCAG 2.1 Contrast

9AAFA5	F2EEBB	9484A3	C693CC	DFABEB
—	2.0 Fail	1.5 Fail	1.1 Fail	1.2 Fail
2.0 Fail	—	2.9 Fail	2.1 Fail	1.6 Fail
1.5 Fail	2.9 Fail	—	1.4 Fail	1.8 Fail
1.1 Fail	2.1 Fail	1.4 Fail	—	1.3 Fail
1.2 Fail	1.6 Fail	1.8 Fail	1.3 Fail	—

White BG

2.3Fail

1.2Fail

3.4AA Large

2.5Fail

1.9Fail

Black BG

9.0AAA

17.7AAA

6.1AA

8.4AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3A7

F0F0C7

8D8D9B

B0AFBE

C8C8DC

Deuteranopia

A2A0A8

F1F1CA

8E8F9A

B3B7BB

CCCFD8

Tritanopia

9BA9AA

F2D1D3

939694

C3B3B1

DCCFCD

Achromatopsia

A8A8A8

E9E9E9

8C8C8C

A9A9A9

C2C2C2

Shades & Tints Shades & Tints

#9AAFA5

Dark

Light

#F2EEBB

Dark

Light

#9484A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9aafa5;
  --color-2: #f2eebb;
  --color-3: #9484a3;
  --color-4: #c693cc;
  --color-5: #dfabeb;
}

SCSS

$color-1: #9aafa5;
$color-2: #f2eebb;
$color-3: #9484a3;
$color-4: #c693cc;
$color-5: #dfabeb;

TAILWIND

colors: {
  'brand-1': '#9aafa5',
  'brand-2': '#f2eebb',
  'brand-3': '#9484a3',
  'brand-4': '#c693cc',
  'brand-5': '#dfabeb',
}

RGB Array

[154, 175, 165], [242, 238, 187], [148, 132, 163], [198, 147, 204], [223, 171, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AAFA5, #F2EEBB, #9484A3, #C693CC, #DFABEB 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: #9aafa5; --color-2: #f2eebb; --color-3: #9484a3; --color-4: #c693cc; --color-5: #dfabeb. 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