← Back to Editor

#B1D58B · #99BE78 · #42514E · #6B867E · #87A992

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 Library

Color Details Color Details

#B1D58B

Willow Green · LightGreen · Apple Green

HEX
#B1D58B
RGB
rgb(177, 213, 139)
HSL
hsl(89, 47%, 69%)
HSB
hsb(89, 35%, 84%)
CMYK
cmyk(17%, 0%, 35%, 16%)
Oklch
oklch(82.9% 0.106 129.5)

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

#99BE78

Celadon · DarkSeaGreen · Apple Green

HEX
#99BE78
RGB
rgb(153, 190, 120)
HSL
hsl(92, 35%, 61%)
HSB
hsb(92, 37%, 75%)
CMYK
cmyk(19%, 0%, 37%, 25%)
Oklch
oklch(75.7% 0.103 131.2)

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

#42514E

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#42514E
RGB
rgb(66, 81, 78)
HSL
hsl(168, 10%, 29%)
HSB
hsb(168, 19%, 32%)
CMYK
cmyk(19%, 0%, 4%, 68%)
Oklch
oklch(42.1% 0.020 181.9)

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

#6B867E

Mineral Blue · SlateGray · Mint Ice

HEX
#6B867E
RGB
rgb(107, 134, 126)
HSL
hsl(162, 11%, 47%)
HSB
hsb(162, 20%, 53%)
CMYK
cmyk(20%, 0%, 6%, 47%)
Oklch
oklch(59.7% 0.033 175.2)

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

#87A992

Celadon · DarkSeaGreen · Olive Green

HEX
#87A992
RGB
rgb(135, 169, 146)
HSL
hsl(139, 17%, 60%)
HSB
hsb(139, 20%, 66%)
CMYK
cmyk(20%, 0%, 14%, 34%)
Oklch
oklch(70.3% 0.050 155.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1D58B
AF8BD5

Analogous

D5D48B
B1D58B
8CD58B

Triadic

B1D58B
8BB1D5
D58BB1

Split-Comp.

B1D58B
8B8CD5
D48BD5

Tetradic

B1D58B
8BD5D4
AF8BD5
D58B8C

Contrast Matrix WCAG 2.1 Contrast

B1D58B
99BE78
42514E
6B867E
87A992
—
1.3
Fail
5.1
AA
2.4
Fail
1.6
Fail
1.3
Fail
—
4.0
AA Large
1.9
Fail
1.2
Fail
5.1
AA
4.0
AA Large
—
2.1
Fail
3.2
AA Large
2.4
Fail
1.9
Fail
2.1
Fail
—
1.5
Fail
1.6
Fail
1.2
Fail
3.2
AA Large
1.5
Fail
—
White BG
1.6Fail
2.1Fail
8.3AAA
3.9AA Large
2.6Fail
Black BG
12.8AAA
10.0AAA
2.5Fail
5.3AA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C19D
A9A989
48494F
777780
969698

Deuteranopia

BFBCA1
A7A48D
48474F
757380
949199

Tritanopia

B3ABAE
9B9699
434F4F
6C8182
899C9D

Achromatopsia

C2C2C2
ABABAB
4C4C4C
7D7D7D
9C9C9C

Shades & Tints Shades & Tints

#B1D58B

Dark
Light

#99BE78

Dark
Light

#42514E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1d58b;
  --color-2: #99be78;
  --color-3: #42514e;
  --color-4: #6b867e;
  --color-5: #87a992;
}

SCSS

$color-1: #b1d58b;
$color-2: #99be78;
$color-3: #42514e;
$color-4: #6b867e;
$color-5: #87a992;

TAILWIND

colors: {
  'brand-1': '#b1d58b',
  'brand-2': '#99be78',
  'brand-3': '#42514e',
  'brand-4': '#6b867e',
  'brand-5': '#87a992',
}

RGB Array

[177, 213, 139], [153, 190, 120], [66, 81, 78], [107, 134, 126], [135, 169, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1D58B, #99BE78, #42514E, #6B867E, #87A992 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b1d58b; --color-2: #99be78; --color-3: #42514e; --color-4: #6b867e; --color-5: #87a992. 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. Restrained colors convey professionalism and trust. 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