#B7A081 + #889780 + #77C19E + #FDCB8E + #FFEB98 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B7A081

Ginger · Tan · Warm Sun

HEX

#B7A081

RGB

rgb(183, 160, 129)

HSL

hsl(34, 27%, 61%)

HSB

hsb(34, 30%, 72%)

CMYK

cmyk(0%, 13%, 30%, 28%)

Oklch

oklch(71.8% 0.051 75.1)

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

#889780

Celadon · Gray · Olive Green

HEX

#889780

RGB

rgb(136, 151, 128)

HSL

hsl(99, 10%, 55%)

HSB

hsb(99, 15%, 59%)

CMYK

cmyk(10%, 0%, 15%, 41%)

Oklch

oklch(65.8% 0.038 134.6)

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

#77C19E

Jade · MediumAquaMarine · Apple Green

HEX

#77C19E

RGB

rgb(119, 193, 158)

HSL

hsl(152, 37%, 61%)

HSB

hsb(152, 38%, 76%)

CMYK

cmyk(38%, 0%, 18%, 24%)

Oklch

oklch(75.3% 0.090 162.7)

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

#FDCB8E

Goose Yellow · Khaki · Peach Orange

HEX

#FDCB8E

RGB

rgb(253, 203, 142)

HSL

hsl(33, 97%, 77%)

HSB

hsb(33, 44%, 99%)

CMYK

cmyk(0%, 20%, 44%, 1%)

Oklch

oklch(87.2% 0.096 71.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFEB98

Goose Yellow · Khaki · Lemon Cream

HEX

#FFEB98

RGB

rgb(255, 235, 152)

HSL

hsl(48, 100%, 80%)

HSB

hsb(48, 40%, 100%)

CMYK

cmyk(0%, 8%, 40%, 0%)

Oklch

oklch(93.8% 0.105 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7A081

8198B6

Analogous

B68481

B7A081

B3B681

Triadic

B7A081

81B69F

9F81B6

Split-Comp.

B7A081

81B3B6

8481B6

Tetradic

B7A081

81B684

8198B6

B681B3

Contrast Matrix WCAG 2.1 Contrast

B7A081	889780	77C19E	FDCB8E	FFEB98
—	1.2 Fail	1.2 Fail	1.7 Fail	2.1 Fail
1.2 Fail	—	1.5 Fail	2.1 Fail	2.6 Fail
1.2 Fail	1.5 Fail	—	1.4 Fail	1.8 Fail
1.7 Fail	2.1 Fail	1.4 Fail	—	1.2 Fail
2.1 Fail	2.6 Fail	1.8 Fail	1.2 Fail	—

White BG

2.5Fail

3.1AA Large

2.1Fail

1.5Fail

1.2Fail

Black BG

8.4AAA

6.8AA

9.9AAA

14.1AAA

17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADAD89

8E8F86

9798A6

E7E79D

F6F6AC

Deuteranopia

AEB08A

8E8D87

938DA9

EAEEA0

F8F9B1

Tritanopia

B68E90

898A8B

7BADAF

FBA8AB

FEBCBF

Achromatopsia

A3A3A3

909090

A7A7A7

D3D3D3

E8E8E8

Shades & Tints Shades & Tints

#B7A081

Dark

Light

#889780

Dark

Light

#77C19E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7a081;
  --color-2: #889780;
  --color-3: #77c19e;
  --color-4: #fdcb8e;
  --color-5: #ffeb98;
}

SCSS

$color-1: #b7a081;
$color-2: #889780;
$color-3: #77c19e;
$color-4: #fdcb8e;
$color-5: #ffeb98;

TAILWIND

colors: {
  'brand-1': '#b7a081',
  'brand-2': '#889780',
  'brand-3': '#77c19e',
  'brand-4': '#fdcb8e',
  'brand-5': '#ffeb98',
}

RGB Array

[183, 160, 129], [136, 151, 128], [119, 193, 158], [253, 203, 142], [255, 235, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7A081, #889780, #77C19E, #FDCB8E, #FFEB98 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: #b7a081; --color-2: #889780; --color-3: #77c19e; --color-4: #fdcb8e; --color-5: #ffeb98. 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