← Back to Editor

#BEC2A5 · #B8C957 · #88AC6E · #2F8A5F · #2E423A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#BEC2A5

Fresh Green · Silver · Sunflower

HEX
#BEC2A5
RGB
rgb(190, 194, 165)
HSL
hsl(68, 19%, 70%)
HSB
hsb(68, 15%, 76%)
CMYK
cmyk(2%, 0%, 15%, 24%)
Oklch
oklch(80.3% 0.040 113.7)

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

#B8C957

Autumn Sage · Tan · Sunflower

HEX
#B8C957
RGB
rgb(184, 201, 87)
HSL
hsl(69, 51%, 56%)
HSB
hsb(69, 57%, 79%)
CMYK
cmyk(8%, 0%, 57%, 21%)
Oklch
oklch(80.0% 0.140 116.8)

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

#88AC6E

Celadon · DarkSeaGreen · Olive Green

HEX
#88AC6E
RGB
rgb(136, 172, 110)
HSL
hsl(95, 27%, 55%)
HSB
hsb(95, 36%, 67%)
CMYK
cmyk(21%, 0%, 36%, 33%)
Oklch
oklch(70.2% 0.095 132.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#2F8A5F

Mineral Blue · SeaGreen · Forest Green

HEX
#2F8A5F
RGB
rgb(47, 138, 95)
HSL
hsl(152, 49%, 36%)
HSB
hsb(152, 66%, 54%)
CMYK
cmyk(66%, 0%, 31%, 46%)
Oklch
oklch(56.8% 0.109 159.1)

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

#2E423A

Mineral Blue · DarkSlateGray · Forest Green

HEX
#2E423A
RGB
rgb(46, 66, 58)
HSL
hsl(156, 18%, 22%)
HSB
hsb(156, 30%, 26%)
CMYK
cmyk(30%, 0%, 12%, 74%)
Oklch
oklch(35.9% 0.029 168.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEC2A5
A8A4C1

Analogous

C1B6A4
BEC2A5
AFC1A4

Triadic

BEC2A5
A4BDC1
C1A4BD

Split-Comp.

BEC2A5
A4AFC1
B6A4C1

Tetradic

BEC2A5
A4C1B6
A8A4C1
C1A4AF

Contrast Matrix WCAG 2.1 Contrast

BEC2A5
B8C957
88AC6E
2F8A5F
2E423A
—
1.0
Fail
1.4
Fail
2.3
Fail
5.9
AA
1.0
Fail
—
1.4
Fail
2.3
Fail
5.9
AA
1.4
Fail
1.4
Fail
—
1.7
Fail
4.2
AA Large
2.3
Fail
2.3
Fail
1.7
Fail
—
2.5
Fail
5.9
AA
5.9
AA
4.2
AA Large
2.5
Fail
—
White BG
1.8Fail
1.8Fail
2.6Fail
4.3AA Large
10.7AAA
Black BG
11.4AAA
11.5AAA
8.2AAA
4.9AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0AC
BFC073
98987D
565769
37373C

Deuteranopia

C0BFAE
BEBD79
969381
514A6C
36343C

Tritanopia

BEB2B3
B9888D
8A898B
347273
2F3D3E

Achromatopsia

BDBDBD
B7B7B7
9A9A9A
6A6A6A
3B3B3B

Shades & Tints Shades & Tints

#BEC2A5

Dark
Light

#B8C957

Dark
Light

#88AC6E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bec2a5;
  --color-2: #b8c957;
  --color-3: #88ac6e;
  --color-4: #2f8a5f;
  --color-5: #2e423a;
}

SCSS

$color-1: #bec2a5;
$color-2: #b8c957;
$color-3: #88ac6e;
$color-4: #2f8a5f;
$color-5: #2e423a;

TAILWIND

colors: {
  'brand-1': '#bec2a5',
  'brand-2': '#b8c957',
  'brand-3': '#88ac6e',
  'brand-4': '#2f8a5f',
  'brand-5': '#2e423a',
}

RGB Array

[190, 194, 165], [184, 201, 87], [136, 172, 110], [47, 138, 95], [46, 66, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEC2A5, #B8C957, #88AC6E, #2F8A5F, #2E423A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bec2a5; --color-2: #b8c957; --color-3: #88ac6e; --color-4: #2f8a5f; --color-5: #2e423a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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