← Back to Editor

#B3BA91 · #9AB999 · #81A797 · #687F7D · #707575

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

#B3BA91

Willow Green · DarkGray · Apple Green

HEX
#B3BA91
RGB
rgb(179, 186, 145)
HSL
hsl(70, 23%, 65%)
HSB
hsb(70, 22%, 73%)
CMYK
cmyk(4%, 0%, 22%, 27%)
Oklch
oklch(77.3% 0.057 115.6)

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

#9AB999

Celadon · DarkSeaGreen · Apple Green

HEX
#9AB999
RGB
rgb(154, 185, 153)
HSL
hsl(118, 19%, 66%)
HSB
hsb(118, 17%, 73%)
CMYK
cmyk(17%, 0%, 17%, 27%)
Oklch
oklch(75.4% 0.056 144.2)

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

#81A797

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#81A797
RGB
rgb(129, 167, 151)
HSL
hsl(155, 18%, 58%)
HSB
hsb(155, 23%, 65%)
CMYK
cmyk(23%, 0%, 10%, 35%)
Oklch
oklch(69.6% 0.048 167.3)

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

#687F7D

Mineral Blue · SlateGray · Mint Ice

HEX
#687F7D
RGB
rgb(104, 127, 125)
HSL
hsl(175, 10%, 45%)
HSB
hsb(175, 18%, 50%)
CMYK
cmyk(18%, 0%, 2%, 50%)
Oklch
oklch(57.8% 0.027 190.0)

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

#707575

Ink Gray · DimGray · Warm Gray

HEX
#707575
RGB
rgb(112, 117, 117)
HSL
hsl(180, 2%, 45%)
HSB
hsb(180, 4%, 46%)
CMYK
cmyk(4%, 0%, 0%, 54%)
Oklch
oklch(55.8% 0.006 197.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3BA91
9891BA

Analogous

BAAD91
B3BA91
9FBA91

Triadic

B3BA91
91B3BA
BA91B3

Split-Comp.

B3BA91
919FBA
AD91BA

Tetradic

B3BA91
91BAAD
9891BA
BA919F

Contrast Matrix WCAG 2.1 Contrast

B3BA91
9AB999
81A797
687F7D
707575
—
1.1
Fail
1.3
Fail
2.1
Fail
2.3
Fail
1.1
Fail
—
1.2
Fail
2.0
Fail
2.2
Fail
1.3
Fail
1.2
Fail
—
1.6
Fail
1.8
Fail
2.1
Fail
2.0
Fail
1.6
Fail
—
1.1
Fail
2.3
Fail
2.2
Fail
1.8
Fail
1.1
Fail
—
White BG
2.0Fail
2.1Fail
2.7Fail
4.3AA Large
4.7AA
Black BG
10.3AAA
9.8AAA
7.9AAA
4.9AA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B69B
A7A8A1
91929B
72727D
727275

Deuteranopia

B6B59D
A6A3A3
8F8C9C
716F7E
727275

Tritanopia

B3A3A4
9CA7A8
839E9F
697E7E
707575

Achromatopsia

B3B3B3
ACACAC
9A9A9A
787878
747474

Shades & Tints Shades & Tints

#B3BA91

Dark
Light

#9AB999

Dark
Light

#81A797

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3ba91;
  --color-2: #9ab999;
  --color-3: #81a797;
  --color-4: #687f7d;
  --color-5: #707575;
}

SCSS

$color-1: #b3ba91;
$color-2: #9ab999;
$color-3: #81a797;
$color-4: #687f7d;
$color-5: #707575;

TAILWIND

colors: {
  'brand-1': '#b3ba91',
  'brand-2': '#9ab999',
  'brand-3': '#81a797',
  'brand-4': '#687f7d',
  'brand-5': '#707575',
}

RGB Array

[179, 186, 145], [154, 185, 153], [129, 167, 151], [104, 127, 125], [112, 117, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3BA91, #9AB999, #81A797, #687F7D, #707575 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: #b3ba91; --color-2: #9ab999; --color-3: #81a797; --color-4: #687f7d; --color-5: #707575. 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