#B2A597 + #BDB578 + #D5D683 + #F6FCBB + #F9C4BF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B2A597

Ginger · DarkGray · Warm Sun

HEX

#B2A597

RGB

rgb(178, 165, 151)

HSL

hsl(31, 15%, 65%)

HSB

hsb(31, 15%, 70%)

CMYK

cmyk(0%, 7%, 15%, 30%)

Oklch

oklch(72.9% 0.025 69.5)

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

#BDB578

Fresh Green · Tan · Sunflower

HEX

#BDB578

RGB

rgb(189, 181, 120)

HSL

hsl(53, 34%, 61%)

HSB

hsb(53, 37%, 74%)

CMYK

cmyk(0%, 4%, 37%, 26%)

Oklch

oklch(76.5% 0.081 101.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D5D683

Fresh Green · BurlyWood · Sunflower

HEX

#D5D683

RGB

rgb(213, 214, 131)

HSL

hsl(61, 50%, 68%)

HSB

hsb(61, 39%, 84%)

CMYK

cmyk(0%, 0%, 39%, 16%)

Oklch

oklch(85.7% 0.105 109.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F6FCBB

Fresh Green · Bisque · Lemon Cream

HEX

#F6FCBB

RGB

rgb(246, 252, 187)

HSL

hsl(66, 92%, 86%)

HSB

hsb(66, 26%, 99%)

CMYK

cmyk(2%, 0%, 26%, 1%)

Oklch

oklch(97.1% 0.083 112.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9C4BF

Peach Pink · Pink · Cherry Blossom

HEX

#F9C4BF

RGB

rgb(249, 196, 191)

HSL

hsl(5, 83%, 86%)

HSB

hsb(5, 23%, 98%)

CMYK

cmyk(0%, 21%, 23%, 2%)

Oklch

oklch(86.6% 0.061 24.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2A597

98A5B3

Analogous

B39998

B2A597

B3B398

Triadic

B2A597

98B3A6

A698B3

Split-Comp.

B2A597

98B3B3

9998B3

Tetradic

B2A597

98B399

98A5B3

B398B3

Contrast Matrix WCAG 2.1 Contrast

B2A597	BDB578	D5D683	F6FCBB	F9C4BF
—	1.2 Fail	1.6 Fail	2.2 Fail	1.6 Fail
1.2 Fail	—	1.4 Fail	1.9 Fail	1.4 Fail
1.6 Fail	1.4 Fail	—	1.4 Fail	1.0 Fail
2.2 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
1.6 Fail	1.4 Fail	1.0 Fail	1.4 Fail	—

White BG

2.4Fail

2.1Fail

1.5Fail

1.1Fail

1.5Fail

Black BG

8.7AAA

10.0AAA

13.8AAA

19.6AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC9A

BAB987

D5D597

F9F9CB

E2E2C0

Deuteranopia

ADAE9B

BABB8A

D5D59C

F8F8CF

E5E9C1

Tritanopia

B19D9E

BD9295

D5A7AA

F6D7DA

F6C1C1

Achromatopsia

A7A7A7

B0B0B0

CCCCCC

F3F3F3

D3D3D3

Shades & Tints Shades & Tints

#B2A597

Dark

Light

#BDB578

Dark

Light

#D5D683

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2a597;
  --color-2: #bdb578;
  --color-3: #d5d683;
  --color-4: #f6fcbb;
  --color-5: #f9c4bf;
}

SCSS

$color-1: #b2a597;
$color-2: #bdb578;
$color-3: #d5d683;
$color-4: #f6fcbb;
$color-5: #f9c4bf;

TAILWIND

colors: {
  'brand-1': '#b2a597',
  'brand-2': '#bdb578',
  'brand-3': '#d5d683',
  'brand-4': '#f6fcbb',
  'brand-5': '#f9c4bf',
}

RGB Array

[178, 165, 151], [189, 181, 120], [213, 214, 131], [246, 252, 187], [249, 196, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2A597, #BDB578, #D5D683, #F6FCBB, #F9C4BF 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: #b2a597; --color-2: #bdb578; --color-3: #d5d683; --color-4: #f6fcbb; --color-5: #f9c4bf. 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