#B0CA6C + #D1B471 + #E09D80 + #E38195 + #D17BA1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0CA6C

Willow Green · DarkSeaGreen · Apple Green

HEX

#B0CA6C

RGB

rgb(176, 202, 108)

HSL

hsl(77, 47%, 61%)

HSB

hsb(77, 47%, 79%)

CMYK

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

Oklch

oklch(79.9% 0.124 121.9)

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

#D1B471

Ginger · BurlyWood · Sunflower

HEX

#D1B471

RGB

rgb(209, 180, 113)

HSL

hsl(42, 51%, 63%)

HSB

hsb(42, 46%, 82%)

CMYK

cmyk(0%, 14%, 46%, 18%)

Oklch

oklch(78.0% 0.092 86.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E09D80

Apricot · DarkSalmon · Warm Sun

HEX

#E09D80

RGB

rgb(224, 157, 128)

HSL

hsl(18, 61%, 69%)

HSB

hsb(18, 43%, 88%)

CMYK

cmyk(0%, 30%, 43%, 12%)

Oklch

oklch(75.4% 0.090 44.3)

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

#E38195

Peach Pink · LightCoral · Coral Red

HEX

#E38195

RGB

rgb(227, 129, 149)

HSL

hsl(348, 64%, 70%)

HSB

hsb(348, 43%, 89%)

CMYK

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

Oklch

oklch(71.5% 0.122 7.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D17BA1

Rouge · LightCoral · Rose Pink

HEX

#D17BA1

RGB

rgb(209, 123, 161)

HSL

hsl(333, 48%, 65%)

HSB

hsb(333, 41%, 82%)

CMYK

cmyk(0%, 41%, 23%, 18%)

Oklch

oklch(68.7% 0.116 352.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0CA6C

876DCA

Analogous

CAB66D

B0CA6C

81CA6D

Triadic

B0CA6C

6DB0CA

CA6DB0

Split-Comp.

B0CA6C

6D81CA

B66DCA

Tetradic

B0CA6C

6DCAB6

876DCA

CA6D81

Contrast Matrix WCAG 2.1 Contrast

B0CA6C	D1B471	E09D80	E38195	D17BA1
—	1.1 Fail	1.2 Fail	1.5 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.3 Fail
1.5 Fail	1.3 Fail	1.2 Fail	—	1.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.1 Fail	—

White BG

1.8Fail

2.0Fail

2.3Fail

2.7Fail

3.0Fail

Black BG

11.5AAA

10.5AAA

9.3AAA

7.8AAA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBB83

C4C481

C3C287

B9B890

ACAB98

Deuteranopia

BAB888

C6C885

C7CC89

BEC68F

B1B796

Tritanopia

B19599

D08E91

DD8D8E

DE8C8C

CD918F

Achromatopsia

B8B8B8

B5B5B5

AEAEAE

A1A1A1

999999

Shades & Tints Shades & Tints

#B0CA6C

Dark

Light

#D1B471

Dark

Light

#E09D80

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0ca6c;
  --color-2: #d1b471;
  --color-3: #e09d80;
  --color-4: #e38195;
  --color-5: #d17ba1;
}

SCSS

$color-1: #b0ca6c;
$color-2: #d1b471;
$color-3: #e09d80;
$color-4: #e38195;
$color-5: #d17ba1;

TAILWIND

colors: {
  'brand-1': '#b0ca6c',
  'brand-2': '#d1b471',
  'brand-3': '#e09d80',
  'brand-4': '#e38195',
  'brand-5': '#d17ba1',
}

RGB Array

[176, 202, 108], [209, 180, 113], [224, 157, 128], [227, 129, 149], [209, 123, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0CA6C, #D1B471, #E09D80, #E38195, #D17BA1 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: #b0ca6c; --color-2: #d1b471; --color-3: #e09d80; --color-4: #e38195; --color-5: #d17ba1. 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