#BAFA5A + #AAE3CD + #CDD7B6 + #D6A1BB + #9E9198 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAFA5A

Willow Green · GreenYellow · Apple Green

HEX

#BAFA5A

RGB

rgb(186, 250, 90)

HSL

hsl(84, 94%, 67%)

HSB

hsb(84, 64%, 98%)

CMYK

cmyk(26%, 0%, 64%, 2%)

Oklch

oklch(91.2% 0.198 128.4)

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

#AAE3CD

Jade · LightBlue · Apple Green

HEX

#AAE3CD

RGB

rgb(170, 227, 205)

HSL

hsl(157, 50%, 78%)

HSB

hsb(157, 25%, 89%)

CMYK

cmyk(25%, 0%, 10%, 11%)

Oklch

oklch(87.1% 0.066 169.0)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#CDD7B6

Willow Green · Silver · Apple Green

HEX

#CDD7B6

RGB

rgb(205, 215, 182)

HSL

hsl(78, 29%, 78%)

HSB

hsb(78, 15%, 84%)

CMYK

cmyk(5%, 0%, 15%, 16%)

Oklch

oklch(86.3% 0.046 121.1)

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

#D6A1BB

Rouge · Silver · Rose Pink

HEX

#D6A1BB

RGB

rgb(214, 161, 187)

HSL

hsl(331, 39%, 74%)

HSB

hsb(331, 25%, 84%)

CMYK

cmyk(0%, 25%, 13%, 16%)

Oklch

oklch(76.6% 0.071 347.9)

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

#9E9198

Ash · DarkGray · Silver Sand

HEX

#9E9198

RGB

rgb(158, 145, 152)

HSL

hsl(328, 6%, 59%)

HSB

hsb(328, 8%, 62%)

CMYK

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

Oklch

oklch(67.0% 0.018 343.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAFA5A

9B5CFA

Analogous

FAEA5C

BAFA5A

6CFA5C

Triadic

BAFA5A

5CBBFA

FA5CBB

Split-Comp.

BAFA5A

5C6CFA

EA5CFA

Tetradic

BAFA5A

5CFAEA

9B5CFA

FA5C6C

Contrast Matrix WCAG 2.1 Contrast

BAFA5A	AAE3CD	CDD7B6	D6A1BB	9E9198
—	1.2 Fail	1.2 Fail	1.7 Fail	2.4 Fail
1.2 Fail	—	1.0 Fail	1.5 Fail	2.1 Fail
1.2 Fail	1.0 Fail	—	1.4 Fail	2.0 Fail
1.7 Fail	1.5 Fail	1.4 Fail	—	1.4 Fail
2.4 Fail	2.1 Fail	2.0 Fail	1.4 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

2.2Fail

3.0AA Large

Black BG

16.9AAA

14.6AAA

14.0AAA

9.7AAA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D681

C3C3D2

D1D1BE

BFBFB5

989896

Deuteranopia

D2CD8A

BFBBD4

D1D0C0

C2C6B3

999A96

Tritanopia

BD9FA6

ADD7D7

CEC4C6

D3B0AF

9D9595

Achromatopsia

D5D5D5

CFCFCF

D0D0D0

B4B4B4

969696

Shades & Tints Shades & Tints

#BAFA5A

Dark

Light

#AAE3CD

Dark

Light

#CDD7B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bafa5a;
  --color-2: #aae3cd;
  --color-3: #cdd7b6;
  --color-4: #d6a1bb;
  --color-5: #9e9198;
}

SCSS

$color-1: #bafa5a;
$color-2: #aae3cd;
$color-3: #cdd7b6;
$color-4: #d6a1bb;
$color-5: #9e9198;

TAILWIND

colors: {
  'brand-1': '#bafa5a',
  'brand-2': '#aae3cd',
  'brand-3': '#cdd7b6',
  'brand-4': '#d6a1bb',
  'brand-5': '#9e9198',
}

RGB Array

[186, 250, 90], [170, 227, 205], [205, 215, 182], [214, 161, 187], [158, 145, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAFA5A, #AAE3CD, #CDD7B6, #D6A1BB, #9E9198 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: #bafa5a; --color-2: #aae3cd; --color-3: #cdd7b6; --color-4: #d6a1bb; --color-5: #9e9198. 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