#8B7253 + #FFAC87 + #EBDEAA + #B2D2A1 + #83B4A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

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

#FFAC87

Apricot · LightSalmon · Peach Orange

HEX

#FFAC87

RGB

rgb(255, 172, 135)

HSL

hsl(19, 100%, 76%)

HSB

hsb(19, 47%, 100%)

CMYK

cmyk(0%, 33%, 47%, 0%)

Oklch

oklch(81.7% 0.110 44.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EBDEAA

Goose Yellow · Wheat · Lemon Cream

HEX

#EBDEAA

RGB

rgb(235, 222, 170)

HSL

hsl(48, 62%, 79%)

HSB

hsb(48, 28%, 92%)

CMYK

cmyk(0%, 6%, 28%, 8%)

Oklch

oklch(89.8% 0.069 95.7)

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

#B2D2A1

Celadon · Silver · Apple Green

HEX

#B2D2A1

RGB

rgb(178, 210, 161)

HSL

hsl(99, 35%, 73%)

HSB

hsb(99, 23%, 82%)

CMYK

cmyk(15%, 0%, 23%, 18%)

Oklch

oklch(82.8% 0.075 134.9)

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

#83B4A1

Jade · DarkSeaGreen · Apple Green

HEX

#83B4A1

RGB

rgb(131, 180, 161)

HSL

hsl(157, 25%, 61%)

HSB

hsb(157, 27%, 71%)

CMYK

cmyk(27%, 0%, 11%, 29%)

Oklch

oklch(73.0% 0.059 168.7)

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

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	FFAC87	EBDEAA	B2D2A1	83B4A1
—	2.5 Fail	3.4 AA Large	2.7 Fail	1.9 Fail
2.5 Fail	—	1.4 Fail	1.1 Fail	1.3 Fail
3.4 AA Large	1.4 Fail	—	1.2 Fail	1.7 Fail
2.7 Fail	1.1 Fail	1.2 Fail	—	1.4 Fail
1.9 Fail	1.3 Fail	1.7 Fail	1.4 Fail	—

White BG

4.5AA

1.8Fail

1.3Fail

1.7Fail

2.3Fail

Black BG

4.6AA

11.5AAA

15.6AAA

12.6AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80805B

DBDA90

E5E5B7

C0C0AD

9899A6

Deuteranopia

82845C

E0E692

E6E7BA

BEBCB0

9592A7

Tritanopia

8A6062

FB9799

EAC1C3

B4B6B8

85A9AA

Achromatopsia

767676

C1C1C1

DCDCDC

C3C3C3

A3A3A3

Shades & Tints Shades & Tints

#8B7253

Dark

Light

#FFAC87

Dark

Light

#EBDEAA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b7253;
  --color-2: #ffac87;
  --color-3: #ebdeaa;
  --color-4: #b2d2a1;
  --color-5: #83b4a1;
}

SCSS

$color-1: #8b7253;
$color-2: #ffac87;
$color-3: #ebdeaa;
$color-4: #b2d2a1;
$color-5: #83b4a1;

TAILWIND

colors: {
  'brand-1': '#8b7253',
  'brand-2': '#ffac87',
  'brand-3': '#ebdeaa',
  'brand-4': '#b2d2a1',
  'brand-5': '#83b4a1',
}

RGB Array

[139, 114, 83], [255, 172, 135], [235, 222, 170], [178, 210, 161], [131, 180, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B7253, #FFAC87, #EBDEAA, #B2D2A1, #83B4A1 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: #ffac87; --color-3: #ebdeaa; --color-4: #b2d2a1; --color-5: #83b4a1. 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