#B3BF8F + #D5E622 + #B2BF1D + #2D8079 + #57544B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B3BF8F

Willow Green · Tan · Apple Green

HEX

#B3BF8F

RGB

rgb(179, 191, 143)

HSL

hsl(75, 27%, 65%)

HSB

hsb(75, 25%, 75%)

CMYK

cmyk(6%, 0%, 25%, 25%)

Oklch

oklch(78.3% 0.066 119.4)

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

#D5E622

Autumn Sage · GreenYellow · Sunflower

HEX

#D5E622

RGB

rgb(213, 230, 34)

HSL

hsl(65, 80%, 52%)

HSB

hsb(65, 85%, 90%)

CMYK

cmyk(7%, 0%, 85%, 10%)

Oklch

oklch(88.2% 0.194 115.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B2BF1D

Autumn Sage · GoldenRod · Honey Gold

HEX

#B2BF1D

RGB

rgb(178, 191, 29)

HSL

hsl(65, 74%, 43%)

HSB

hsb(65, 85%, 75%)

CMYK

cmyk(7%, 0%, 85%, 25%)

Oklch

oklch(76.9% 0.167 114.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#2D8079

Mineral Blue · SeaGreen · Mint Ice

HEX

#2D8079

RGB

rgb(45, 128, 121)

HSL

hsl(175, 48%, 34%)

HSB

hsb(175, 65%, 50%)

CMYK

cmyk(65%, 0%, 5%, 50%)

Oklch

oklch(54.8% 0.080 187.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#57544B

Ink Gray · DarkOliveGreen · Charcoal

HEX

#57544B

RGB

rgb(87, 84, 75)

HSL

hsl(45, 7%, 32%)

HSB

hsb(45, 14%, 34%)

CMYK

cmyk(0%, 3%, 14%, 66%)

Oklch

oklch(44.6% 0.015 91.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3BF8F

9A8EBE

Analogous

BEB28E

B3BF8F

9ABE8E

Triadic

B3BF8F

8EB2BE

BE8EB2

Split-Comp.

B3BF8F

8E9ABE

B28EBE

Tetradic

B3BF8F

8EBEB2

9A8EBE

BE8E9A

Contrast Matrix WCAG 2.1 Contrast

B3BF8F	D5E622	B2BF1D	2D8079	57544B
—	1.4 Fail	1.0 Fail	2.4 Fail	3.9 AA Large
1.4 Fail	—	1.5 Fail	3.4 AA Large	5.5 AA
1.0 Fail	1.5 Fail	—	2.3 Fail	3.7 AA Large
2.4 Fail	3.4 AA Large	2.3 Fail	—	1.6 Fail
3.9 AA Large	5.5 AA	3.7 AA Large	1.6 Fail	—

White BG

2.0Fail

1.4Fail

2.0Fail

4.7AA

7.6AAA

Black BG

10.8AAA

15.2AAA

10.4AAA

4.5AA Large

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B89B

DCDD51

B8B844

51527B

56564D

Deuteranopia

B8B79D

DBDA5D

B7B64E

4C467B

56564E

Tritanopia

B4A4A6

D6777F

B3636A

317C7C

574F4F

Achromatopsia

B6B6B6

CBCBCB

A9A9A9

666666

545454

Shades & Tints Shades & Tints

#B3BF8F

Dark

Light

#D5E622

Dark

Light

#B2BF1D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3bf8f;
  --color-2: #d5e622;
  --color-3: #b2bf1d;
  --color-4: #2d8079;
  --color-5: #57544b;
}

SCSS

$color-1: #b3bf8f;
$color-2: #d5e622;
$color-3: #b2bf1d;
$color-4: #2d8079;
$color-5: #57544b;

TAILWIND

colors: {
  'brand-1': '#b3bf8f',
  'brand-2': '#d5e622',
  'brand-3': '#b2bf1d',
  'brand-4': '#2d8079',
  'brand-5': '#57544b',
}

RGB Array

[179, 191, 143], [213, 230, 34], [178, 191, 29], [45, 128, 121], [87, 84, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3BF8F, #D5E622, #B2BF1D, #2D8079, #57544B 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: #b3bf8f; --color-2: #d5e622; --color-3: #b2bf1d; --color-4: #2d8079; --color-5: #57544b. 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