#9196A8 + #9BB893 + #A5D97E + #BFD59A + #D9D1B6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9196A8

Azure · DarkGray · Cobalt Blue

HEX

#9196A8

RGB

rgb(145, 150, 168)

HSL

hsl(227, 12%, 61%)

HSB

hsb(227, 14%, 66%)

CMYK

cmyk(14%, 11%, 0%, 34%)

Oklch

oklch(67.5% 0.027 273.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#9BB893

Celadon · DarkSeaGreen · Apple Green

HEX

#9BB893

RGB

rgb(155, 184, 147)

HSL

hsl(107, 21%, 65%)

HSB

hsb(107, 20%, 72%)

CMYK

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

Oklch

oklch(75.1% 0.061 138.9)

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

#A5D97E

Emerald · LightGreen · Apple Green

HEX

#A5D97E

RGB

rgb(165, 217, 126)

HSL

hsl(94, 54%, 67%)

HSB

hsb(94, 42%, 85%)

CMYK

cmyk(24%, 0%, 42%, 15%)

Oklch

oklch(82.8% 0.132 132.9)

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

#BFD59A

Willow Green · Tan · Apple Green

HEX

#BFD59A

RGB

rgb(191, 213, 154)

HSL

hsl(82, 41%, 72%)

HSB

hsb(82, 28%, 84%)

CMYK

cmyk(10%, 0%, 28%, 16%)

Oklch

oklch(84.2% 0.082 124.7)

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

#D9D1B6

Goose Yellow · LightGray · Lemon Cream

HEX

#D9D1B6

RGB

rgb(217, 209, 182)

HSL

hsl(46, 32%, 78%)

HSB

hsb(46, 16%, 85%)

CMYK

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

Oklch

oklch(86.0% 0.037 93.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9196A8

A7A290

Analogous

90A1A7

9196A8

9690A7

Triadic

9196A8

A79095

95A790

Split-Comp.

9196A8

A79690

A1A790

Tetradic

9196A8

A790A1

A7A290

90A796

Contrast Matrix WCAG 2.1 Contrast

9196A8	9BB893	A5D97E	BFD59A	D9D1B6
—	1.4 Fail	1.8 Fail	1.9 Fail	1.9 Fail
1.4 Fail	—	1.3 Fail	1.4 Fail	1.4 Fail
1.8 Fail	1.3 Fail	—	1.0 Fail	1.1 Fail
1.9 Fail	1.4 Fail	1.0 Fail	—	1.0 Fail
1.9 Fail	1.4 Fail	1.1 Fail	1.0 Fail	—

White BG

2.9Fail

2.2Fail

1.6Fail

1.5Fail

Black BG

7.1AAA

9.7AAA

12.8AAA

13.2AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9393A4

A8A89C

BCBC94

C9C9A8

D6D5BD

Deuteranopia

9393A3

A6A49E

B9B599

C7C6AC

D6D7BE

Tritanopia

91A09F

9CA3A5

A8A5A9

C0B4B6

D9C2C3

Achromatopsia

979797

ABABAB

BFBFBF

C8C8C8

D0D0D0

Shades & Tints Shades & Tints

#9196A8

Dark

Light

#9BB893

Dark

Light

#A5D97E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9196a8;
  --color-2: #9bb893;
  --color-3: #a5d97e;
  --color-4: #bfd59a;
  --color-5: #d9d1b6;
}

SCSS

$color-1: #9196a8;
$color-2: #9bb893;
$color-3: #a5d97e;
$color-4: #bfd59a;
$color-5: #d9d1b6;

TAILWIND

colors: {
  'brand-1': '#9196a8',
  'brand-2': '#9bb893',
  'brand-3': '#a5d97e',
  'brand-4': '#bfd59a',
  'brand-5': '#d9d1b6',
}

RGB Array

[145, 150, 168], [155, 184, 147], [165, 217, 126], [191, 213, 154], [217, 209, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9196A8, #9BB893, #A5D97E, #BFD59A, #D9D1B6 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: #9196a8; --color-2: #9bb893; --color-3: #a5d97e; --color-4: #bfd59a; --color-5: #d9d1b6. 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