#9CBCBA + #FD7D3C + #CFA0CC + #BFD79D + #B3E479 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CBCBA

Jade · DarkGray · Lake Green

HEX

#9CBCBA

RGB

rgb(156, 188, 186)

HSL

hsl(176, 19%, 67%)

HSB

hsb(176, 17%, 74%)

CMYK

cmyk(17%, 0%, 1%, 26%)

Oklch

oklch(77.1% 0.035 191.8)

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

#FD7D3C

Apricot · Coral · Warm Sun

HEX

#FD7D3C

RGB

rgb(253, 125, 60)

HSL

hsl(20, 98%, 61%)

HSB

hsb(20, 76%, 99%)

CMYK

cmyk(0%, 51%, 76%, 1%)

Oklch

oklch(72.7% 0.174 45.0)

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

#CFA0CC

Mauve · Silver · Lilac Purple

HEX

#CFA0CC

RGB

rgb(207, 160, 204)

HSL

hsl(304, 33%, 72%)

HSB

hsb(304, 23%, 81%)

CMYK

cmyk(0%, 23%, 1%, 19%)

Oklch

oklch(76.3% 0.081 328.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#BFD79D

Willow Green · Silver · Apple Green

HEX

#BFD79D

RGB

rgb(191, 215, 157)

HSL

hsl(85, 42%, 73%)

HSB

hsb(85, 27%, 84%)

CMYK

cmyk(11%, 0%, 27%, 16%)

Oklch

oklch(84.7% 0.082 126.3)

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

#B3E479

Willow Green · LightGreen · Apple Green

HEX

#B3E479

RGB

rgb(179, 228, 121)

HSL

hsl(87, 66%, 68%)

HSB

hsb(87, 47%, 89%)

CMYK

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

Oklch

oklch(86.1% 0.146 129.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CBCBA

BB9B9D

Analogous

9BBBA9

9CBCBA

9BADBB

Triadic

9CBCBA

B99BBB

BBB99B

Split-Comp.

9CBCBA

BB9BAD

BBA99B

Tetradic

9CBCBA

A99BBB

BB9B9D

ADBB9B

Contrast Matrix WCAG 2.1 Contrast

9CBCBA	FD7D3C	CFA0CC	BFD79D	B3E479
—	1.3 Fail	1.1 Fail	1.3 Fail	1.4 Fail
1.3 Fail	—	1.2 Fail	1.6 Fail	1.7 Fail
1.1 Fail	1.2 Fail	—	1.4 Fail	1.5 Fail
1.3 Fail	1.6 Fail	1.4 Fail	—	1.1 Fail
1.4 Fail	1.7 Fail	1.5 Fail	1.1 Fail	—

White BG

2.0Fail

2.6Fail

2.2Fail

1.6Fail

1.5Fail

Black BG

10.3AAA

8.2AAA

9.6AAA

13.4AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAABA

C6C44C

BBBAC1

C9CAAB

C8C993

Deuteranopia

A8A6BB

CDD750

BDC1BF

C8C6AE

C5C299

Tritanopia

9EBBBB

F7585B

CDB9B7

C0B6B9

B5A7AC

Achromatopsia

B2B2B2

9C9C9C

B3B3B3

C9C9C9

Shades & Tints Shades & Tints

#9CBCBA

Dark

Light

#FD7D3C

Dark

Light

#CFA0CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cbcba;
  --color-2: #fd7d3c;
  --color-3: #cfa0cc;
  --color-4: #bfd79d;
  --color-5: #b3e479;
}

SCSS

$color-1: #9cbcba;
$color-2: #fd7d3c;
$color-3: #cfa0cc;
$color-4: #bfd79d;
$color-5: #b3e479;

TAILWIND

colors: {
  'brand-1': '#9cbcba',
  'brand-2': '#fd7d3c',
  'brand-3': '#cfa0cc',
  'brand-4': '#bfd79d',
  'brand-5': '#b3e479',
}

RGB Array

[156, 188, 186], [253, 125, 60], [207, 160, 204], [191, 215, 157], [179, 228, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CBCBA, #FD7D3C, #CFA0CC, #BFD79D, #B3E479 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: #9cbcba; --color-2: #fd7d3c; --color-3: #cfa0cc; --color-4: #bfd79d; --color-5: #b3e479. 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