#C0C487 + #83A39F + #B0DFD9 + #BABFA3 + #FCAF6F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C0C487

Fresh Green · Tan · Sunflower

HEX

#C0C487

RGB

rgb(192, 196, 135)

HSL

hsl(64, 34%, 65%)

HSB

hsb(64, 31%, 77%)

CMYK

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

Oklch

oklch(80.2% 0.081 111.2)

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

#83A39F

Mineral Blue · LightSlateGray · Lake Green

HEX

#83A39F

RGB

rgb(131, 163, 159)

HSL

hsl(173, 15%, 58%)

HSB

hsb(173, 20%, 64%)

CMYK

cmyk(20%, 0%, 2%, 36%)

Oklch

oklch(69.0% 0.036 187.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#B0DFD9

Jade · LightBlue · Glacier Blue

HEX

#B0DFD9

RGB

rgb(176, 223, 217)

HSL

hsl(172, 42%, 78%)

HSB

hsb(172, 21%, 87%)

CMYK

cmyk(21%, 0%, 3%, 13%)

Oklch

oklch(86.9% 0.049 186.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#BABFA3

Willow Green · DarkGray · Apple Green

HEX

#BABFA3

RGB

rgb(186, 191, 163)

HSL

hsl(71, 18%, 69%)

HSB

hsb(71, 15%, 75%)

CMYK

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

Oklch

oklch(79.3% 0.039 115.5)

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

#FCAF6F

Apricot · LightSalmon · Warm Sun

HEX

#FCAF6F

RGB

rgb(252, 175, 111)

HSL

hsl(27, 96%, 71%)

HSB

hsb(27, 56%, 99%)

CMYK

cmyk(0%, 31%, 56%, 1%)

Oklch

oklch(81.5% 0.121 59.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C0C487

8B87C4

Analogous

C4AA87

C0C487

A2C487

Triadic

C0C487

87C0C4

C487C0

Split-Comp.

C0C487

87A2C4

AA87C4

Tetradic

C0C487

87C4AA

8B87C4

C487A2

Contrast Matrix WCAG 2.1 Contrast

C0C487	83A39F	B0DFD9	BABFA3	FCAF6F
—	1.5 Fail	1.3 Fail	1.0 Fail	1.0 Fail
1.5 Fail	—	1.9 Fail	1.4 Fail	1.5 Fail
1.3 Fail	1.9 Fail	—	1.3 Fail	1.3 Fail
1.0 Fail	1.4 Fail	1.3 Fail	—	1.0 Fail
1.0 Fail	1.5 Fail	1.3 Fail	1.0 Fail	—

White BG

1.8Fail

2.7Fail

1.5Fail

1.9Fail

1.8Fail

Black BG

11.5AAA

7.7AAA

14.4AAA

11.1AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C296

9191A0

C4C5DA

BCBCAA

DBDA7E

Deuteranopia

C2C199

8F8DA0

C2BEDB

BCBCAB

DFE582

Tritanopia

C0A1A4

85A1A1

B2DCDC

BAAFB0

F88B8D

Achromatopsia

BCBCBC

999999

D0D0D0

BABABA

BFBFBF

Shades & Tints Shades & Tints

#C0C487

Dark

Light

#83A39F

Dark

Light

#B0DFD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c0c487;
  --color-2: #83a39f;
  --color-3: #b0dfd9;
  --color-4: #babfa3;
  --color-5: #fcaf6f;
}

SCSS

$color-1: #c0c487;
$color-2: #83a39f;
$color-3: #b0dfd9;
$color-4: #babfa3;
$color-5: #fcaf6f;

TAILWIND

colors: {
  'brand-1': '#c0c487',
  'brand-2': '#83a39f',
  'brand-3': '#b0dfd9',
  'brand-4': '#babfa3',
  'brand-5': '#fcaf6f',
}

RGB Array

[192, 196, 135], [131, 163, 159], [176, 223, 217], [186, 191, 163], [252, 175, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C0C487, #83A39F, #B0DFD9, #BABFA3, #FCAF6F 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: #c0c487; --color-2: #83a39f; --color-3: #b0dfd9; --color-4: #babfa3; --color-5: #fcaf6f. 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