#B7C45F + #85CCA7 + #4E5C5D + #56C4B7 + #5796A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B7C45F

Autumn Sage · Tan · Sunflower

HEX

#B7C45F

RGB

rgb(183, 196, 95)

HSL

hsl(68, 46%, 57%)

HSB

hsb(68, 52%, 77%)

CMYK

cmyk(7%, 0%, 52%, 23%)

Oklch

oklch(78.9% 0.127 115.4)

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

#85CCA7

Celadon · DarkSeaGreen · Apple Green

HEX

#85CCA7

RGB

rgb(133, 204, 167)

HSL

hsl(149, 41%, 66%)

HSB

hsb(149, 35%, 80%)

CMYK

cmyk(35%, 0%, 18%, 20%)

Oklch

oklch(78.8% 0.089 160.7)

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

#4E5C5D

Slate Blue · DimGray · Charcoal

HEX

#4E5C5D

RGB

rgb(78, 92, 93)

HSL

hsl(184, 9%, 34%)

HSB

hsb(184, 16%, 36%)

CMYK

cmyk(16%, 1%, 0%, 64%)

Oklch

oklch(46.3% 0.017 201.9)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#56C4B7

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#56C4B7

RGB

rgb(86, 196, 183)

HSL

hsl(173, 48%, 55%)

HSB

hsb(173, 56%, 77%)

CMYK

cmyk(56%, 0%, 7%, 23%)

Oklch

oklch(75.3% 0.102 184.8)

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

#5796A1

Slate Blue · CadetBlue · Mint Ice

HEX

#5796A1

RGB

rgb(87, 150, 161)

HSL

hsl(189, 30%, 49%)

HSB

hsb(189, 46%, 63%)

CMYK

cmyk(46%, 7%, 0%, 37%)

Oklch

oklch(63.5% 0.067 209.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7C45F

6C5FC4

Analogous

C49F5F

B7C45F

84C45F

Triadic

B7C45F

5FB6C4

C45FB6

Split-Comp.

B7C45F

5F84C4

9F5FC4

Tetradic

B7C45F

5FC49F

6C5FC4

C45F84

Contrast Matrix WCAG 2.1 Contrast

B7C45F	85CCA7	4E5C5D	56C4B7	5796A1
—	1.0 Fail	3.7 AA Large	1.1 Fail	1.8 Fail
1.0 Fail	—	3.7 AA Large	1.1 Fail	1.8 Fail
3.7 AA Large	3.7 AA Large	—	3.3 AA Large	2.1 Fail
1.1 Fail	1.1 Fail	3.3 AA Large	—	1.6 Fail
1.8 Fail	1.8 Fail	2.1 Fail	1.6 Fail	—

White BG

1.9Fail

7.0AA

2.1Fail

3.3AA Large

Black BG

11.1AAA

11.2AAA

3.0AA Large

10.0AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBD77

A4A4B0

54545D

8687BA

72739E

Deuteranopia

BCBB7D

A09AB2

53525D

7F77BB

6F6A9E

Tritanopia

B88B8F

89B7B9

4F5D5D

5CBDBD

5A9C9C

Achromatopsia

B5B5B5

B3B3B3

585858

A2A2A2

848484

Shades & Tints Shades & Tints

#B7C45F

Dark

Light

#85CCA7

Dark

Light

#4E5C5D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7c45f;
  --color-2: #85cca7;
  --color-3: #4e5c5d;
  --color-4: #56c4b7;
  --color-5: #5796a1;
}

SCSS

$color-1: #b7c45f;
$color-2: #85cca7;
$color-3: #4e5c5d;
$color-4: #56c4b7;
$color-5: #5796a1;

TAILWIND

colors: {
  'brand-1': '#b7c45f',
  'brand-2': '#85cca7',
  'brand-3': '#4e5c5d',
  'brand-4': '#56c4b7',
  'brand-5': '#5796a1',
}

RGB Array

[183, 196, 95], [133, 204, 167], [78, 92, 93], [86, 196, 183], [87, 150, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7C45F, #85CCA7, #4E5C5D, #56C4B7, #5796A1 is ideal for: corporate websites, product showcases, portfolios. 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: #b7c45f; --color-2: #85cca7; --color-3: #4e5c5d; --color-4: #56c4b7; --color-5: #5796a1. 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. 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