#BAA570 + #E8D393 + #F7B796 + #C46872 + #D66774 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BAA570

Ginger · Tan · Sunflower

HEX

#BAA570

RGB

rgb(186, 165, 112)

HSL

hsl(43, 35%, 58%)

HSB

hsb(43, 40%, 73%)

CMYK

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

Oklch

oklch(72.8% 0.075 88.8)

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

#E8D393

Goose Yellow · Khaki · Sunflower

HEX

#E8D393

RGB

rgb(232, 211, 147)

HSL

hsl(45, 65%, 74%)

HSB

hsb(45, 37%, 91%)

CMYK

cmyk(0%, 9%, 37%, 9%)

Oklch

oklch(86.9% 0.085 92.0)

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

#F7B796

Apricot · BurlyWood · Peach Orange

HEX

#F7B796

RGB

rgb(247, 183, 150)

HSL

hsl(20, 86%, 78%)

HSB

hsb(20, 39%, 97%)

CMYK

cmyk(0%, 26%, 39%, 3%)

Oklch

oklch(83.1% 0.087 48.4)

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

#C46872

Crimson · LightCoral · Passion Red

HEX

#C46872

RGB

rgb(196, 104, 114)

HSL

hsl(353, 44%, 59%)

HSB

hsb(353, 47%, 77%)

CMYK

cmyk(0%, 47%, 42%, 23%)

Oklch

oklch(62.6% 0.117 14.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D66774

Peach Pink · LightCoral · Coral Red

HEX

#D66774

RGB

rgb(214, 103, 116)

HSL

hsl(353, 58%, 62%)

HSB

hsb(353, 52%, 84%)

CMYK

cmyk(0%, 52%, 46%, 16%)

Oklch

oklch(64.9% 0.140 14.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAA570

6E84B9

Analogous

B97F6E

BAA570

A9B96E

Triadic

BAA570

6EB9A4

A46EB9

Split-Comp.

BAA570

6EA9B9

7F6EB9

Tetradic

BAA570

6EB97F

6E84B9

B96EA9

Contrast Matrix WCAG 2.1 Contrast

BAA570	E8D393	F7B796	C46872	D66774
—	1.6 Fail	1.4 Fail	1.6 Fail	1.4 Fail
1.6 Fail	—	1.2 Fail	2.5 Fail	2.3 Fail
1.4 Fail	1.2 Fail	—	2.2 Fail	2.0 Fail
1.6 Fail	2.5 Fail	2.2 Fail	—	1.1 Fail
1.4 Fail	2.3 Fail	2.0 Fail	1.1 Fail	—

White BG

2.4Fail

1.5Fail

1.7Fail

3.8AA Large

3.5AA Large

Black BG

8.7AAA

14.2AAA

12.2AAA

5.6AA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B17D

DFDFA2

DBDB9E

9C9B70

A6A571

Deuteranopia

B2B480

E0E2A6

DFE4A0

A2A86F

ACB570

Tritanopia

B98789

E7AFB1

F4A4A6

BF6E6D

D06E6E

Achromatopsia

A5A5A5

D2D2D2

C6C6C6

858585

8A8A8A

Shades & Tints Shades & Tints

#BAA570

Dark

Light

#E8D393

Dark

Light

#F7B796

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #baa570;
  --color-2: #e8d393;
  --color-3: #f7b796;
  --color-4: #c46872;
  --color-5: #d66774;
}

SCSS

$color-1: #baa570;
$color-2: #e8d393;
$color-3: #f7b796;
$color-4: #c46872;
$color-5: #d66774;

TAILWIND

colors: {
  'brand-1': '#baa570',
  'brand-2': '#e8d393',
  'brand-3': '#f7b796',
  'brand-4': '#c46872',
  'brand-5': '#d66774',
}

RGB Array

[186, 165, 112], [232, 211, 147], [247, 183, 150], [196, 104, 114], [214, 103, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAA570, #E8D393, #F7B796, #C46872, #D66774 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: #baa570; --color-2: #e8d393; --color-3: #f7b796; --color-4: #c46872; --color-5: #d66774. 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