#BAED6C + #D7CF7C + #E5AA82 + #B7A68A + #89A392 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAED6C

Willow Green · LightGreen · Apple Green

HEX

#BAED6C

RGB

rgb(186, 237, 108)

HSL

hsl(84, 78%, 68%)

HSB

hsb(84, 54%, 93%)

CMYK

cmyk(22%, 0%, 54%, 7%)

Oklch

oklch(88.4% 0.167 127.5)

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

#D7CF7C

Fresh Green · BurlyWood · Sunflower

HEX

#D7CF7C

RGB

rgb(215, 207, 124)

HSL

hsl(55, 53%, 66%)

HSB

hsb(55, 42%, 84%)

CMYK

cmyk(0%, 4%, 42%, 16%)

Oklch

oklch(84.3% 0.105 103.6)

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

#E5AA82

Apricot · BurlyWood · Warm Sun

HEX

#E5AA82

RGB

rgb(229, 170, 130)

HSL

hsl(24, 66%, 70%)

HSB

hsb(24, 43%, 90%)

CMYK

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

Oklch

oklch(78.4% 0.088 55.2)

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

#B7A68A

Ginger · Tan · Warm Sun

HEX

#B7A68A

RGB

rgb(183, 166, 138)

HSL

hsl(37, 24%, 63%)

HSB

hsb(37, 25%, 72%)

CMYK

cmyk(0%, 9%, 25%, 28%)

Oklch

oklch(73.2% 0.044 80.2)

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

#89A392

Celadon · DarkSeaGreen · Olive Green

HEX

#89A392

RGB

rgb(137, 163, 146)

HSL

hsl(141, 12%, 59%)

HSB

hsb(141, 16%, 64%)

CMYK

cmyk(16%, 0%, 10%, 36%)

Oklch

oklch(69.1% 0.038 156.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAED6C

A16EED

Analogous

EDE06E

BAED6C

7AED6E

Triadic

BAED6C

6EBAED

ED6EBA

Split-Comp.

BAED6C

6E7AED

E06EED

Tetradic

BAED6C

6EEDE0

A16EED

ED6E7A

Contrast Matrix WCAG 2.1 Contrast

BAED6C	D7CF7C	E5AA82	B7A68A	89A392
—	1.2 Fail	1.5 Fail	1.7 Fail	2.0 Fail
1.2 Fail	—	1.3 Fail	1.5 Fail	1.7 Fail
1.5 Fail	1.3 Fail	—	1.2 Fail	1.3 Fail
1.7 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.6Fail

2.0Fail

2.4Fail

2.7Fail

Black BG

15.4AAA

13.1AAA

10.4AAA

8.8AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D18B

D4D390

CBCB8C

B0AF91

949496

Deuteranopia

CDC993

D4D595

CFD38E

B1B292

939197

Tritanopia

BDA4A9

D7A0A3

E29395

B69697

8A999A

Achromatopsia

CFCFCF

C8C8C8

B7B7B7

A8A8A8

999999

Shades & Tints Shades & Tints

#BAED6C

Dark

Light

#D7CF7C

Dark

Light

#E5AA82

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #baed6c;
  --color-2: #d7cf7c;
  --color-3: #e5aa82;
  --color-4: #b7a68a;
  --color-5: #89a392;
}

SCSS

$color-1: #baed6c;
$color-2: #d7cf7c;
$color-3: #e5aa82;
$color-4: #b7a68a;
$color-5: #89a392;

TAILWIND

colors: {
  'brand-1': '#baed6c',
  'brand-2': '#d7cf7c',
  'brand-3': '#e5aa82',
  'brand-4': '#b7a68a',
  'brand-5': '#89a392',
}

RGB Array

[186, 237, 108], [215, 207, 124], [229, 170, 130], [183, 166, 138], [137, 163, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAED6C, #D7CF7C, #E5AA82, #B7A68A, #89A392 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: #baed6c; --color-2: #d7cf7c; --color-3: #e5aa82; --color-4: #b7a68a; --color-5: #89a392. 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