#966C80 + #96BDA8 + #BFD4AD + #F7D3A3 + #ECA36C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#966C80

Dark Violet · Gray · Rose Pink

HEX

#966C80

RGB

rgb(150, 108, 128)

HSL

hsl(331, 17%, 51%)

HSB

hsb(331, 28%, 59%)

CMYK

cmyk(0%, 28%, 15%, 41%)

Oklch

oklch(58.0% 0.060 349.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#96BDA8

Celadon · DarkSeaGreen · Apple Green

HEX

#96BDA8

RGB

rgb(150, 189, 168)

HSL

hsl(148, 23%, 66%)

HSB

hsb(148, 21%, 74%)

CMYK

cmyk(21%, 0%, 11%, 26%)

Oklch

oklch(76.4% 0.051 161.4)

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

#BFD4AD

Celadon · Silver · Apple Green

HEX

#BFD4AD

RGB

rgb(191, 212, 173)

HSL

hsl(92, 31%, 75%)

HSB

hsb(92, 18%, 83%)

CMYK

cmyk(10%, 0%, 18%, 17%)

Oklch

oklch(84.4% 0.057 130.7)

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

#F7D3A3

Goose Yellow · Wheat · Peach Orange

HEX

#F7D3A3

RGB

rgb(247, 211, 163)

HSL

hsl(34, 84%, 80%)

HSB

hsb(34, 34%, 97%)

CMYK

cmyk(0%, 15%, 34%, 3%)

Oklch

oklch(88.6% 0.074 74.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#ECA36C

Apricot · SandyBrown · Warm Sun

HEX

#ECA36C

RGB

rgb(236, 163, 108)

HSL

hsl(26, 77%, 67%)

HSB

hsb(26, 54%, 93%)

CMYK

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

Oklch

oklch(77.5% 0.112 57.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

966C80

6D9783

Analogous

976D97

966C80

976E6D

Triadic

966C80

81976D

6D8197

Split-Comp.

966C80

6D976E

6D9797

Tetradic

966C80

97976D

6D9783

6E6D97

Contrast Matrix WCAG 2.1 Contrast

966C80	96BDA8	BFD4AD	F7D3A3	ECA36C
—	2.1 Fail	2.8 Fail	3.1 AA Large	2.1 Fail
2.1 Fail	—	1.3 Fail	1.5 Fail	1.0 Fail
2.8 Fail	1.3 Fail	—	1.1 Fail	1.3 Fail
3.1 AA Large	1.5 Fail	1.1 Fail	—	1.5 Fail
2.1 Fail	1.0 Fail	1.3 Fail	1.5 Fail	—

White BG

4.4AA Large

2.1Fail

1.6Fail

1.4Fail

2.1Fail

Black BG

4.8AA

10.1AAA

13.2AAA

14.8AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

84837B

A7A7AD

C8C8B6

E7E7AF

CCCC79

Deuteranopia

86897A

A5A2AE

C7C5B9

EAECB1

D1D67D

Tritanopia

947777

98B1B2

C0BEC0

F5B8BA

E88486

Achromatopsia

7B7B7B

AFAFAF

C9C9C9

D8D8D8

B3B3B3

Shades & Tints Shades & Tints

#966C80

Dark

Light

#96BDA8

Dark

Light

#BFD4AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #966c80;
  --color-2: #96bda8;
  --color-3: #bfd4ad;
  --color-4: #f7d3a3;
  --color-5: #eca36c;
}

SCSS

$color-1: #966c80;
$color-2: #96bda8;
$color-3: #bfd4ad;
$color-4: #f7d3a3;
$color-5: #eca36c;

TAILWIND

colors: {
  'brand-1': '#966c80',
  'brand-2': '#96bda8',
  'brand-3': '#bfd4ad',
  'brand-4': '#f7d3a3',
  'brand-5': '#eca36c',
}

RGB Array

[150, 108, 128], [150, 189, 168], [191, 212, 173], [247, 211, 163], [236, 163, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #966C80, #96BDA8, #BFD4AD, #F7D3A3, #ECA36C 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: #966c80; --color-2: #96bda8; --color-3: #bfd4ad; --color-4: #f7d3a3; --color-5: #eca36c. 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