#9CBE9B + #BFB436 + #FC906C + #BBAFA3 + #B7B4DF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CBE9B

Celadon · DarkSeaGreen · Apple Green

HEX

#9CBE9B

RGB

rgb(156, 190, 155)

HSL

hsl(118, 21%, 68%)

HSB

hsb(118, 18%, 75%)

CMYK

cmyk(18%, 0%, 18%, 25%)

Oklch

oklch(76.7% 0.061 144.2)

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

#BFB436

Autumn Sage · GoldenRod · Honey Gold

HEX

#BFB436

RGB

rgb(191, 180, 54)

HSL

hsl(55, 56%, 48%)

HSB

hsb(55, 72%, 75%)

CMYK

cmyk(0%, 6%, 72%, 25%)

Oklch

oklch(75.7% 0.142 104.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FC906C

Apricot · Salmon · Warm Sun

HEX

#FC906C

RGB

rgb(252, 144, 108)

HSL

hsl(15, 96%, 71%)

HSB

hsb(15, 57%, 99%)

CMYK

cmyk(0%, 43%, 57%, 1%)

Oklch

oklch(76.1% 0.140 39.1)

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

#BBAFA3

Ginger · DarkGray · Warm Sun

HEX

#BBAFA3

RGB

rgb(187, 175, 163)

HSL

hsl(30, 15%, 69%)

HSB

hsb(30, 13%, 73%)

CMYK

cmyk(0%, 6%, 13%, 27%)

Oklch

oklch(76.1% 0.022 67.5)

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

#B7B4DF

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B7B4DF

RGB

rgb(183, 180, 223)

HSL

hsl(244, 40%, 79%)

HSB

hsb(244, 19%, 87%)

CMYK

cmyk(18%, 19%, 0%, 13%)

Oklch

oklch(78.7% 0.061 288.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CBE9B

BD9CBF

Analogous

AFBF9C

9CBE9B

9CBFAC

Triadic

9CBE9B

9C9DBF

BF9C9D

Split-Comp.

9CBE9B

AC9CBF

BF9CAF

Tetradic

9CBE9B

9CAFBF

BD9CBF

BFAC9C

Contrast Matrix WCAG 2.1 Contrast

9CBE9B	BFB436	FC906C	BBAFA3	B7B4DF
—	1.0 Fail	1.1 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.1 Fail
1.0 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

2.0Fail

2.1Fail

2.2Fail

2.1Fail

2.0Fail

Black BG

10.3AAA

9.8AAA

9.3AAA

9.8AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABABA3

BABA54

CDCC75

B6B6A6

B6B6D5

Deuteranopia

A9A6A6

BBBC5C

D4DC77

B7B7A7

B6B6D2

Tritanopia

9EAAAC

BE6D72

F77C7D

BAA8A9

B7CCCB

Achromatopsia

B0B0B0

A9A9A9

ACACAC

B1B1B1

BABABA

Shades & Tints Shades & Tints

#9CBE9B

Dark

Light

#BFB436

Dark

Light

#FC906C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cbe9b;
  --color-2: #bfb436;
  --color-3: #fc906c;
  --color-4: #bbafa3;
  --color-5: #b7b4df;
}

SCSS

$color-1: #9cbe9b;
$color-2: #bfb436;
$color-3: #fc906c;
$color-4: #bbafa3;
$color-5: #b7b4df;

TAILWIND

colors: {
  'brand-1': '#9cbe9b',
  'brand-2': '#bfb436',
  'brand-3': '#fc906c',
  'brand-4': '#bbafa3',
  'brand-5': '#b7b4df',
}

RGB Array

[156, 190, 155], [191, 180, 54], [252, 144, 108], [187, 175, 163], [183, 180, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CBE9B, #BFB436, #FC906C, #BBAFA3, #B7B4DF 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: #9cbe9b; --color-2: #bfb436; --color-3: #fc906c; --color-4: #bbafa3; --color-5: #b7b4df. 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