← Back to Editor

#BFE98B · #B7CC84 · #B0AF7D · #A89275 · #A0756E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BFE98B

Willow Green · LightGreen · Apple Green

HEX
#BFE98B
RGB
rgb(191, 233, 139)
HSL
hsl(87, 68%, 73%)
HSB
hsb(87, 40%, 91%)
CMYK
cmyk(18%, 0%, 40%, 9%)
Oklch
oklch(88.3% 0.129 128.4)

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

#B7CC84

Willow Green · Tan · Apple Green

HEX
#B7CC84
RGB
rgb(183, 204, 132)
HSL
hsl(78, 41%, 66%)
HSB
hsb(78, 35%, 80%)
CMYK
cmyk(10%, 0%, 35%, 20%)
Oklch
oklch(81.2% 0.098 121.8)

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

#B0AF7D

Autumn Sage · Tan · Sunflower

HEX
#B0AF7D
RGB
rgb(176, 175, 125)
HSL
hsl(59, 24%, 59%)
HSB
hsb(59, 29%, 69%)
CMYK
cmyk(0%, 1%, 29%, 31%)
Oklch
oklch(74.2% 0.068 107.0)

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

#A89275

Ginger · Gray · Warm Sun

HEX
#A89275
RGB
rgb(168, 146, 117)
HSL
hsl(34, 23%, 56%)
HSB
hsb(34, 30%, 66%)
CMYK
cmyk(0%, 13%, 30%, 34%)
Oklch
oklch(67.2% 0.049 74.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#A0756E

Crimson · Gray · Passion Red

HEX
#A0756E
RGB
rgb(160, 117, 110)
HSL
hsl(8, 21%, 53%)
HSB
hsb(8, 31%, 63%)
CMYK
cmyk(0%, 27%, 31%, 37%)
Oklch
oklch(60.3% 0.056 29.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFE98B
B58BE9

Analogous

E9E48B
BFE98B
90E98B

Triadic

BFE98B
8BBFE9
E98BBF

Split-Comp.

BFE98B
8B90E9
E48BE9

Tetradic

BFE98B
8BE9E4
B58BE9
E98B90

Contrast Matrix WCAG 2.1 Contrast

BFE98B
B7CC84
B0AF7D
A89275
A0756E
—
1.3
Fail
1.6
Fail
2.2
Fail
2.9
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.2
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.9
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
White BG
1.4Fail
1.8Fail
2.3Fail
3.0Fail
4.0AA Large
Black BG
15.2AAA
12.0AAA
9.3AAA
7.0AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D2A2
C0C095
B0B089
9E9E7C
8D8D70

Deuteranopia

CFCCA7
BFBD9A
B0B08C
A0A17E
909370

Tritanopia

C1B4B8
B8A3A6
B09395
A78283
9E7171

Achromatopsia

D2D2D2
BEBEBE
AAAAAA
959595
818181

Shades & Tints Shades & Tints

#BFE98B

Dark
Light

#B7CC84

Dark
Light

#B0AF7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfe98b;
  --color-2: #b7cc84;
  --color-3: #b0af7d;
  --color-4: #a89275;
  --color-5: #a0756e;
}

SCSS

$color-1: #bfe98b;
$color-2: #b7cc84;
$color-3: #b0af7d;
$color-4: #a89275;
$color-5: #a0756e;

TAILWIND

colors: {
  'brand-1': '#bfe98b',
  'brand-2': '#b7cc84',
  'brand-3': '#b0af7d',
  'brand-4': '#a89275',
  'brand-5': '#a0756e',
}

RGB Array

[191, 233, 139], [183, 204, 132], [176, 175, 125], [168, 146, 117], [160, 117, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFE98B, #B7CC84, #B0AF7D, #A89275, #A0756E 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: #bfe98b; --color-2: #b7cc84; --color-3: #b0af7d; --color-4: #a89275; --color-5: #a0756e. 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