#BAD4A7 + #91A88E + #7D8C75 + #DDAD87 + #E3C496 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAD4A7

Celadon · Silver · Apple Green

HEX

#BAD4A7

RGB

rgb(186, 212, 167)

HSL

hsl(95, 34%, 74%)

HSB

hsb(95, 21%, 83%)

CMYK

cmyk(12%, 0%, 21%, 17%)

Oklch

oklch(83.9% 0.067 132.2)

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

#91A88E

Celadon · DarkSeaGreen · Apple Green

HEX

#91A88E

RGB

rgb(145, 168, 142)

HSL

hsl(113, 13%, 61%)

HSB

hsb(113, 15%, 66%)

CMYK

cmyk(14%, 0%, 15%, 34%)

Oklch

oklch(70.6% 0.045 141.9)

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

#7D8C75

Celadon · Gray · Warm Gray

HEX

#7D8C75

RGB

rgb(125, 140, 117)

HSL

hsl(99, 9%, 50%)

HSB

hsb(99, 16%, 55%)

CMYK

cmyk(11%, 0%, 16%, 45%)

Oklch

oklch(62.1% 0.038 134.7)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#DDAD87

Apricot · BurlyWood · Warm Sun

HEX

#DDAD87

RGB

rgb(221, 173, 135)

HSL

hsl(27, 56%, 70%)

HSB

hsb(27, 39%, 87%)

CMYK

cmyk(0%, 22%, 39%, 13%)

Oklch

oklch(78.2% 0.076 59.7)

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

#E3C496

Goose Yellow · BurlyWood · Warm Sun

HEX

#E3C496

RGB

rgb(227, 196, 150)

HSL

hsl(36, 58%, 74%)

HSB

hsb(36, 34%, 89%)

CMYK

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

Oklch

oklch(83.6% 0.070 77.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAD4A7

C0A6D3

Analogous

CFD3A6

BAD4A7

A6D3AA

Triadic

BAD4A7

A6B9D3

D3A6B9

Split-Comp.

BAD4A7

AAA6D3

D3A6CF

Tetradic

BAD4A7

A6CFD3

C0A6D3

D3AAA6

Contrast Matrix WCAG 2.1 Contrast

BAD4A7	91A88E	7D8C75	DDAD87	E3C496
—	1.6 Fail	2.2 Fail	1.3 Fail	1.0 Fail
1.6 Fail	—	1.4 Fail	1.3 Fail	1.5 Fail
2.2 Fail	1.4 Fail	—	1.8 Fail	2.1 Fail
1.3 Fail	1.3 Fail	1.8 Fail	—	1.2 Fail
1.0 Fail	1.5 Fail	2.1 Fail	1.2 Fail	—

White BG

1.6Fail

2.6Fail

3.6AA Large

2.0Fail

1.7Fail

Black BG

13.1AAA

8.2AAA

5.9AA

10.4AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5B2

9B9B94

83847B

C8C890

D6D5A1

Deuteranopia

C4C2B5

9A9896

83827C

CBCF92

D7DAA4

Tritanopia

BBBABC

92999A

7E7F80

DB9799

E1AAAC

Achromatopsia

C7C7C7

9E9E9E

858585

B7B7B7

C8C8C8

Shades & Tints Shades & Tints

#BAD4A7

Dark

Light

#91A88E

Dark

Light

#7D8C75

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bad4a7;
  --color-2: #91a88e;
  --color-3: #7d8c75;
  --color-4: #ddad87;
  --color-5: #e3c496;
}

SCSS

$color-1: #bad4a7;
$color-2: #91a88e;
$color-3: #7d8c75;
$color-4: #ddad87;
$color-5: #e3c496;

TAILWIND

colors: {
  'brand-1': '#bad4a7',
  'brand-2': '#91a88e',
  'brand-3': '#7d8c75',
  'brand-4': '#ddad87',
  'brand-5': '#e3c496',
}

RGB Array

[186, 212, 167], [145, 168, 142], [125, 140, 117], [221, 173, 135], [227, 196, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAD4A7, #91A88E, #7D8C75, #DDAD87, #E3C496 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: #bad4a7; --color-2: #91a88e; --color-3: #7d8c75; --color-4: #ddad87; --color-5: #e3c496. 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