#B4B895 + #64C3AD + #D1B04D + #FF9966 + #5C493F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4B895

Fresh Green · DarkGray · Sunflower

HEX

#B4B895

RGB

rgb(180, 184, 149)

HSL

hsl(67, 20%, 65%)

HSB

hsb(67, 19%, 72%)

CMYK

cmyk(2%, 0%, 19%, 28%)

Oklch

oklch(77.0% 0.048 112.8)

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

#64C3AD

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#64C3AD

RGB

rgb(100, 195, 173)

HSL

hsl(166, 44%, 58%)

HSB

hsb(166, 49%, 76%)

CMYK

cmyk(49%, 0%, 11%, 24%)

Oklch

oklch(75.3% 0.097 176.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D1B04D

Ginger · SandyBrown · Sunflower

HEX

#D1B04D

RGB

rgb(209, 176, 77)

HSL

hsl(45, 59%, 56%)

HSB

hsb(45, 63%, 82%)

CMYK

cmyk(0%, 16%, 63%, 18%)

Oklch

oklch(76.7% 0.123 90.7)

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

#FF9966

Apricot · SandyBrown · Warm Sun

HEX

#FF9966

RGB

rgb(255, 153, 102)

HSL

hsl(20, 100%, 70%)

HSB

hsb(20, 60%, 100%)

CMYK

cmyk(0%, 40%, 60%, 0%)

Oklch

oklch(77.9% 0.139 46.6)

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

#5C493F

Tangerine · DarkOliveGreen · Amber Brown

HEX

#5C493F

RGB

rgb(92, 73, 63)

HSL

hsl(21, 19%, 30%)

HSB

hsb(21, 32%, 36%)

CMYK

cmyk(0%, 21%, 32%, 64%)

Oklch

oklch(42.2% 0.031 49.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4B895

9894B8

Analogous

B8AA94

B4B895

A2B894

Triadic

B4B895

94B3B8

B894B3

Split-Comp.

B4B895

94A2B8

AA94B8

Tetradic

B4B895

94B8AA

9894B8

B894A2

Contrast Matrix WCAG 2.1 Contrast

B4B895	64C3AD	D1B04D	FF9966	5C493F
—	1.0 Fail	1.0 Fail	1.0 Fail	4.1 AA Large
1.0 Fail	—	1.0 Fail	1.0 Fail	4.0 AA Large
1.0 Fail	1.0 Fail	—	1.0 Fail	4.0 AA Large
1.0 Fail	1.0 Fail	1.0 Fail	—	4.0 AA Large
4.1 AA Large	4.0 AA Large	4.0 AA Large	4.0 AA Large	—

White BG

2.1Fail

8.5AAA

Black BG

10.2AAA

10.0AAA

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B69D

8D8EB2

C3C265

D3D272

545441

Deuteranopia

B6B5A0

8881B4

C5C76B

D9E075

555642

Tritanopia

B4A4A6

69B7B7

CF787C

FA7C7E

5B4344

Achromatopsia

B3B3B3

A4A4A4

AFAFAF

B2B2B2

4E4E4E

Shades & Tints Shades & Tints

#B4B895

Dark

Light

#64C3AD

Dark

Light

#D1B04D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4b895;
  --color-2: #64c3ad;
  --color-3: #d1b04d;
  --color-4: #ff9966;
  --color-5: #5c493f;
}

SCSS

$color-1: #b4b895;
$color-2: #64c3ad;
$color-3: #d1b04d;
$color-4: #ff9966;
$color-5: #5c493f;

TAILWIND

colors: {
  'brand-1': '#b4b895',
  'brand-2': '#64c3ad',
  'brand-3': '#d1b04d',
  'brand-4': '#ff9966',
  'brand-5': '#5c493f',
}

RGB Array

[180, 184, 149], [100, 195, 173], [209, 176, 77], [255, 153, 102], [92, 73, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4B895, #64C3AD, #D1B04D, #FF9966, #5C493F is ideal for: corporate websites, product showcases, portfolios. 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: #b4b895; --color-2: #64c3ad; --color-3: #d1b04d; --color-4: #ff9966; --color-5: #5c493f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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