#BC8185 + #B69FBB + #AADFE5 + #E2F5BD + #FBF3DE · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BC8185

Peach Pink · DarkSalmon · Coral Red

HEX

#BC8185

RGB

rgb(188, 129, 133)

HSL

hsl(356, 31%, 62%)

HSB

hsb(356, 31%, 74%)

CMYK

cmyk(0%, 31%, 29%, 26%)

Oklch

oklch(66.4% 0.073 14.8)

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

#B69FBB

Lilac · DarkGray · Lilac Purple

HEX

#B69FBB

RGB

rgb(182, 159, 187)

HSL

hsl(289, 17%, 68%)

HSB

hsb(289, 15%, 73%)

CMYK

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

Oklch

oklch(73.2% 0.047 320.2)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#AADFE5

Sky Blue · LightBlue · Glacier Blue

HEX

#AADFE5

RGB

rgb(170, 223, 229)

HSL

hsl(186, 53%, 78%)

HSB

hsb(186, 26%, 90%)

CMYK

cmyk(26%, 3%, 0%, 10%)

Oklch

oklch(86.9% 0.055 204.8)

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

#E2F5BD

Willow Green · Wheat · Mint Green

HEX

#E2F5BD

RGB

rgb(226, 245, 189)

HSL

hsl(80, 74%, 85%)

HSB

hsb(80, 23%, 96%)

CMYK

cmyk(8%, 0%, 23%, 4%)

Oklch

oklch(94.2% 0.076 123.1)

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

#FBF3DE

Goose Yellow · Beige · Lemon Cream

HEX

#FBF3DE

RGB

rgb(251, 243, 222)

HSL

hsl(43, 78%, 93%)

HSB

hsb(43, 12%, 98%)

CMYK

cmyk(0%, 3%, 12%, 2%)

Oklch

oklch(96.5% 0.029 89.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BC8185

80BCB8

Analogous

BC80A2

BC8185

BC9A80

Triadic

BC8185

84BC80

8084BC

Split-Comp.

BC8185

80BC9A

80A2BC

Tetradic

BC8185

A2BC80

80BCB8

9A80BC

Contrast Matrix WCAG 2.1 Contrast

BC8185	B69FBB	AADFE5	E2F5BD	FBF3DE
—	1.3 Fail	2.2 Fail	2.7 Fail	2.9 Fail
1.3 Fail	—	1.7 Fail	2.1 Fail	2.2 Fail
2.2 Fail	1.7 Fail	—	1.3 Fail	1.3 Fail
2.7 Fail	2.1 Fail	1.3 Fail	—	1.1 Fail
2.9 Fail	2.2 Fail	1.3 Fail	1.1 Fail	—

White BG

3.2AA Large

2.4Fail

1.5Fail

1.2Fail

1.1Fail

Black BG

6.6AA

8.7AAA

14.4AAA

18.0AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A284

ACACB4

C1C1E4

EAEACB

F8F7E3

Deuteranopia

A6AA84

ADAFB3

BEBAE3

E9E8CE

F8F9E4

Tritanopia

B98383

B5AFAE

ADE2E2

E3D5D8

FBE7E8

Achromatopsia

939393

A9A9A9

D0D0D0

E9E9E9

F3F3F3

Shades & Tints Shades & Tints

#BC8185

Dark

Light

#B69FBB

Dark

Light

#AADFE5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bc8185;
  --color-2: #b69fbb;
  --color-3: #aadfe5;
  --color-4: #e2f5bd;
  --color-5: #fbf3de;
}

SCSS

$color-1: #bc8185;
$color-2: #b69fbb;
$color-3: #aadfe5;
$color-4: #e2f5bd;
$color-5: #fbf3de;

TAILWIND

colors: {
  'brand-1': '#bc8185',
  'brand-2': '#b69fbb',
  'brand-3': '#aadfe5',
  'brand-4': '#e2f5bd',
  'brand-5': '#fbf3de',
}

RGB Array

[188, 129, 133], [182, 159, 187], [170, 223, 229], [226, 245, 189], [251, 243, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #BC8185, #B69FBB, #AADFE5, #E2F5BD, #FBF3DE 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: #bc8185; --color-2: #b69fbb; --color-3: #aadfe5; --color-4: #e2f5bd; --color-5: #fbf3de. 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 earth-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