#8B7253 + #B9A163 + #99DEA8 + #D1F0AA + #F6D9A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8B7253

Ochre · DimGray · Amber Brown

HEX

#8B7253

RGB

rgb(139, 114, 83)

HSL

hsl(33, 25%, 44%)

HSB

hsb(33, 40%, 55%)

CMYK

cmyk(0%, 18%, 40%, 45%)

Oklch

oklch(56.8% 0.054 72.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B9A163

Ginger · Tan · Sunflower

HEX

#B9A163

RGB

rgb(185, 161, 99)

HSL

hsl(43, 38%, 56%)

HSB

hsb(43, 46%, 73%)

CMYK

cmyk(0%, 13%, 46%, 27%)

Oklch

oklch(71.6% 0.086 89.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#99DEA8

Emerald · LightGreen · Apple Green

HEX

#99DEA8

RGB

rgb(153, 222, 168)

HSL

hsl(133, 51%, 74%)

HSB

hsb(133, 31%, 87%)

CMYK

cmyk(31%, 0%, 24%, 13%)

Oklch

oklch(84.0% 0.102 150.5)

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

#D1F0AA

Willow Green · Wheat · Apple Green

HEX

#D1F0AA

RGB

rgb(209, 240, 170)

HSL

hsl(87, 70%, 80%)

HSB

hsb(87, 29%, 94%)

CMYK

cmyk(13%, 0%, 29%, 6%)

Oklch

oklch(91.6% 0.097 127.6)

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

#F6D9A1

Goose Yellow · Wheat · Lemon Cream

HEX

#F6D9A1

RGB

rgb(246, 217, 161)

HSL

hsl(40, 83%, 80%)

HSB

hsb(40, 35%, 96%)

CMYK

cmyk(0%, 12%, 35%, 4%)

Oklch

oklch(89.6% 0.079 83.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B7253

546D8C

Analogous

8C5754

8B7253

898C54

Triadic

8B7253

548C73

73548C

Split-Comp.

8B7253

54898C

57548C

Tetradic

8B7253

548C57

546D8C

8C5489

Contrast Matrix WCAG 2.1 Contrast

8B7253	B9A163	99DEA8	D1F0AA	F6D9A1
—	1.8 Fail	2.9 Fail	3.6 AA Large	3.3 AA Large
1.8 Fail	—	1.6 Fail	2.0 Fail	1.8 Fail
2.9 Fail	1.6 Fail	—	1.3 Fail	1.1 Fail
3.6 AA Large	2.0 Fail	1.3 Fail	—	1.1 Fail
3.3 AA Large	1.8 Fail	1.1 Fail	1.1 Fail	—

White BG

4.5AA

2.5Fail

1.6Fail

1.3Fail

1.4Fail

Black BG

4.6AA

8.3AAA

13.4AAA

16.8AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80805B

AFAE72

B7B7B5

DEDFBB

E9E9AF

Deuteranopia

82845C

B0B276

B3AEB8

DDDABF

EBEDB2

Tritanopia

8A6062

B87E80

9CBFC2

D3C8CB

F5B9BC

Achromatopsia

767676

A1A1A1

C3C3C3

DFDFDF

DBDBDB

Shades & Tints Shades & Tints

#8B7253

Dark

Light

#B9A163

Dark

Light

#99DEA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b7253;
  --color-2: #b9a163;
  --color-3: #99dea8;
  --color-4: #d1f0aa;
  --color-5: #f6d9a1;
}

SCSS

$color-1: #8b7253;
$color-2: #b9a163;
$color-3: #99dea8;
$color-4: #d1f0aa;
$color-5: #f6d9a1;

TAILWIND

colors: {
  'brand-1': '#8b7253',
  'brand-2': '#b9a163',
  'brand-3': '#99dea8',
  'brand-4': '#d1f0aa',
  'brand-5': '#f6d9a1',
}

RGB Array

[139, 114, 83], [185, 161, 99], [153, 222, 168], [209, 240, 170], [246, 217, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B7253, #B9A163, #99DEA8, #D1F0AA, #F6D9A1 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: #8b7253; --color-2: #b9a163; --color-3: #99dea8; --color-4: #d1f0aa; --color-5: #f6d9a1. 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