← Back to Editor

#B2BB8B · #BEB142 · #C8990C · #218369 · #136255

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B2BB8B

Willow Green · Tan · Apple Green

HEX
#B2BB8B
RGB
rgb(178, 187, 139)
HSL
hsl(71, 26%, 64%)
HSB
hsb(71, 26%, 73%)
CMYK
cmyk(5%, 0%, 26%, 27%)
Oklch
oklch(77.3% 0.066 116.6)

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

#BEB142

Autumn Sage · GoldenRod · Honey Gold

HEX
#BEB142
RGB
rgb(190, 177, 66)
HSL
hsl(54, 49%, 50%)
HSB
hsb(54, 65%, 75%)
CMYK
cmyk(0%, 7%, 65%, 25%)
Oklch
oklch(75.1% 0.131 102.6)

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

#C8990C

Ochre · DarkGoldenRod · Honey Gold

HEX
#C8990C
RGB
rgb(200, 153, 12)
HSL
hsl(45, 89%, 42%)
HSB
hsb(45, 94%, 78%)
CMYK
cmyk(0%, 24%, 94%, 22%)
Oklch
oklch(70.8% 0.143 86.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#218369

Mineral Blue · SeaGreen · Mint Ice

HEX
#218369
RGB
rgb(33, 131, 105)
HSL
hsl(164, 60%, 32%)
HSB
hsb(164, 75%, 51%)
CMYK
cmyk(75%, 0%, 20%, 49%)
Oklch
oklch(54.8% 0.097 170.7)

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

#136255

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#136255
RGB
rgb(19, 98, 85)
HSL
hsl(170, 68%, 23%)
HSB
hsb(170, 81%, 38%)
CMYK
cmyk(81%, 0%, 13%, 62%)
Oklch
oklch(44.7% 0.076 178.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2BB8B
948BBB

Analogous

BBAC8B
B2BB8B
9ABB8B

Triadic

B2BB8B
8BB2BB
BB8BB2

Split-Comp.

B2BB8B
8B9ABB
AC8BBB

Tetradic

B2BB8B
8BBBAC
948BBB
BB8B9A

Contrast Matrix WCAG 2.1 Contrast

B2BB8B
BEB142
C8990C
218369
136255
—
1.1
Fail
1.3
Fail
2.3
Fail
3.6
AA Large
1.1
Fail
—
1.2
Fail
2.1
Fail
3.3
AA Large
1.3
Fail
1.2
Fail
—
1.8
Fail
2.8
Fail
2.3
Fail
2.1
Fail
1.8
Fail
—
1.6
Fail
3.6
AA Large
3.3
AA Large
2.8
Fail
1.6
Fail
—
White BG
2.0Fail
2.2Fail
2.6Fail
4.7AA
7.2AAA
Black BG
10.4AAA
9.6AAA
8.0AAA
4.5AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B697
B8B85D
B4B32E
4B4C6F
353658

Deuteranopia

B5B599
B9BA63
B6BA36
463E71
312B59

Tritanopia

B2A0A2
BD7277
C6494F
267475
175B5B

Achromatopsia

B3B3B3
A8A8A8
979797
636363
494949

Shades & Tints Shades & Tints

#B2BB8B

Dark
Light

#BEB142

Dark
Light

#C8990C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2bb8b;
  --color-2: #beb142;
  --color-3: #c8990c;
  --color-4: #218369;
  --color-5: #136255;
}

SCSS

$color-1: #b2bb8b;
$color-2: #beb142;
$color-3: #c8990c;
$color-4: #218369;
$color-5: #136255;

TAILWIND

colors: {
  'brand-1': '#b2bb8b',
  'brand-2': '#beb142',
  'brand-3': '#c8990c',
  'brand-4': '#218369',
  'brand-5': '#136255',
}

RGB Array

[178, 187, 139], [190, 177, 66], [200, 153, 12], [33, 131, 105], [19, 98, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2BB8B, #BEB142, #C8990C, #218369, #136255 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: #b2bb8b; --color-2: #beb142; --color-3: #c8990c; --color-4: #218369; --color-5: #136255. 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