#B8B8A0 + #8AFF30 + #18C42F + #148F70 + #474654 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B8B8A0

Fresh Green · DarkGray · Sunflower

HEX

#B8B8A0

RGB

rgb(184, 184, 160)

HSL

hsl(60, 14%, 67%)

HSB

hsb(60, 13%, 72%)

CMYK

cmyk(0%, 0%, 13%, 28%)

Oklch

oklch(77.6% 0.033 107.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#8AFF30

Emerald · GreenYellow · Olive Green

HEX

#8AFF30

RGB

rgb(138, 255, 48)

HSL

hsl(94, 100%, 59%)

HSB

hsb(94, 81%, 100%)

CMYK

cmyk(46%, 0%, 81%, 0%)

Oklch

oklch(89.6% 0.250 135.6)

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

#18C42F

Pine Green · LimeGreen · Olive Green

HEX

#18C42F

RGB

rgb(24, 196, 47)

HSL

hsl(128, 78%, 43%)

HSB

hsb(128, 88%, 77%)

CMYK

cmyk(88%, 0%, 76%, 23%)

Oklch

oklch(71.4% 0.226 143.9)

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

#148F70

Mineral Blue · Teal · Mint Ice

HEX

#148F70

RGB

rgb(20, 143, 112)

HSL

hsl(165, 75%, 32%)

HSB

hsb(165, 86%, 56%)

CMYK

cmyk(86%, 0%, 22%, 44%)

Oklch

oklch(58.0% 0.111 169.8)

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

#474654

Deep Indigo · DarkSlateGray · Charcoal

HEX

#474654

RGB

rgb(71, 70, 84)

HSL

hsl(244, 9%, 30%)

HSB

hsb(244, 17%, 33%)

CMYK

cmyk(15%, 17%, 0%, 67%)

Oklch

oklch(40.1% 0.023 288.6)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B8A0

9F9FB7

Analogous

B7AB9F

B8B8A0

ABB79F

Triadic

B8B8A0

9FB7B7

B79FB7

Split-Comp.

B8B8A0

9FABB7

AB9FB7

Tetradic

B8B8A0

9FB7AB

9F9FB7

B79FAB

Contrast Matrix WCAG 2.1 Contrast

B8B8A0	8AFF30	18C42F	148F70	474654
—	1.6 Fail	1.2 Fail	2.0 Fail	4.6 AA
1.6 Fail	—	1.8 Fail	3.2 AA Large	7.2 AAA
1.2 Fail	1.8 Fail	—	1.7 Fail	4.0 AA Large
2.0 Fail	3.2 AA Large	1.7 Fail	—	2.3 Fail
4.6 AA	7.2 AAA	4.0 AA Large	2.3 Fail	—

White BG

2.0Fail

1.3Fail

2.3Fail

4.0AA Large

9.2AAA

Black BG

10.4AAA

16.4AAA

9.0AAA

5.2AA

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8A6

BDBE62

626453

494A78

474751

Deuteranopia

B8B8A7

B6AD6E

594C5C

423979

474750

Tritanopia

B8AAAB

908A92

217076

1A7D7F

474E4D

Achromatopsia

B5B5B5

C4C4C4

808080

676767

484848

Shades & Tints Shades & Tints

#B8B8A0

Dark

Light

#8AFF30

Dark

Light

#18C42F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b8a0;
  --color-2: #8aff30;
  --color-3: #18c42f;
  --color-4: #148f70;
  --color-5: #474654;
}

SCSS

$color-1: #b8b8a0;
$color-2: #8aff30;
$color-3: #18c42f;
$color-4: #148f70;
$color-5: #474654;

TAILWIND

colors: {
  'brand-1': '#b8b8a0',
  'brand-2': '#8aff30',
  'brand-3': '#18c42f',
  'brand-4': '#148f70',
  'brand-5': '#474654',
}

RGB Array

[184, 184, 160], [138, 255, 48], [24, 196, 47], [20, 143, 112], [71, 70, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B8B8A0, #8AFF30, #18C42F, #148F70, #474654 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: #b8b8a0; --color-2: #8aff30; --color-3: #18c42f; --color-4: #148f70; --color-5: #474654. 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 cool-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