← Back to Editor

#B0C49C · #80AF92 · #6A9796 · #60626F · #473D40

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

#B0C49C

Celadon · DarkGray · Apple Green

HEX
#B0C49C
RGB
rgb(176, 196, 156)
HSL
hsl(90, 25%, 69%)
HSB
hsb(90, 20%, 77%)
CMYK
cmyk(10%, 0%, 20%, 23%)
Oklch
oklch(79.4% 0.059 129.3)

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

#80AF92

Celadon · DarkSeaGreen · Olive Green

HEX
#80AF92
RGB
rgb(128, 175, 146)
HSL
hsl(143, 23%, 59%)
HSB
hsb(143, 27%, 69%)
CMYK
cmyk(27%, 0%, 17%, 31%)
Oklch
oklch(71.2% 0.066 157.2)

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

#6A9796

Mineral Blue · CadetBlue · Mint Ice

HEX
#6A9796
RGB
rgb(106, 151, 150)
HSL
hsl(179, 18%, 50%)
HSB
hsb(179, 30%, 59%)
CMYK
cmyk(30%, 0%, 1%, 41%)
Oklch
oklch(64.4% 0.049 194.3)

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

#60626F

Ink Gray · DimGray · Warm Gray

HEX
#60626F
RGB
rgb(96, 98, 111)
HSL
hsl(232, 7%, 41%)
HSB
hsb(232, 14%, 44%)
CMYK
cmyk(14%, 12%, 0%, 56%)
Oklch
oklch(49.9% 0.021 278.7)

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

#473D40

Dark Violet · DarkSlateGray · Charcoal

HEX
#473D40
RGB
rgb(71, 61, 64)
HSL
hsl(342, 8%, 26%)
HSB
hsb(342, 14%, 28%)
CMYK
cmyk(0%, 14%, 10%, 72%)
Oklch
oklch(37.1% 0.015 357.8)

Traditional「Dark Violet」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0C49C
B09CC4

Analogous

C4C49C
B0C49C
9CC49C

Triadic

B0C49C
9CB0C4
C49CB0

Split-Comp.

B0C49C
9C9CC4
C49CC4

Tetradic

B0C49C
9CC4C4
B09CC4
C49C9C

Contrast Matrix WCAG 2.1 Contrast

B0C49C
80AF92
6A9796
60626F
473D40
—
1.3
Fail
1.7
Fail
3.2
AA Large
5.6
AA
1.3
Fail
—
1.3
Fail
2.4
Fail
4.2
AA Large
1.7
Fail
1.3
Fail
—
1.9
Fail
3.2
AA Large
3.2
AA Large
2.4
Fail
1.9
Fail
—
1.7
Fail
5.6
AA
4.2
AA Large
3.2
AA Large
1.7
Fail
—
White BG
1.9Fail
2.5Fail
3.2AA Large
6.0AA
10.5AAA
Black BG
11.2AAA
8.5AAA
6.5AA
3.5AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9A6
949599
7D7E96
61616C
43433F

Deuteranopia

B8B6A8
928E9B
7B7796
61616B
43443F

Tritanopia

B1ADAF
829FA0
6C9696
606969
473F3F

Achromatopsia

B9B9B9
9E9E9E
898989
636363
404040

Shades & Tints Shades & Tints

#B0C49C

Dark
Light

#80AF92

Dark
Light

#6A9796

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0c49c;
  --color-2: #80af92;
  --color-3: #6a9796;
  --color-4: #60626f;
  --color-5: #473d40;
}

SCSS

$color-1: #b0c49c;
$color-2: #80af92;
$color-3: #6a9796;
$color-4: #60626f;
$color-5: #473d40;

TAILWIND

colors: {
  'brand-1': '#b0c49c',
  'brand-2': '#80af92',
  'brand-3': '#6a9796',
  'brand-4': '#60626f',
  'brand-5': '#473d40',
}

RGB Array

[176, 196, 156], [128, 175, 146], [106, 151, 150], [96, 98, 111], [71, 61, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0C49C, #80AF92, #6A9796, #60626F, #473D40 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #b0c49c; --color-2: #80af92; --color-3: #6a9796; --color-4: #60626f; --color-5: #473d40. 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. 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