#658487 + #64AC95 + #8BCE96 + #B2EC97 + #EAFCA4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#658487

Slate Blue · SlateGray · Mint Ice

HEX

#658487

RGB

rgb(101, 132, 135)

HSL

hsl(185, 14%, 46%)

HSB

hsb(185, 25%, 53%)

CMYK

cmyk(25%, 2%, 0%, 47%)

Oklch

oklch(59.1% 0.035 203.6)

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

#64AC95

Mineral Blue · CadetBlue · Lake Green

HEX

#64AC95

RGB

rgb(100, 172, 149)

HSL

hsl(161, 30%, 53%)

HSB

hsb(161, 42%, 67%)

CMYK

cmyk(42%, 0%, 13%, 33%)

Oklch

oklch(69.0% 0.081 171.3)

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

#8BCE96

Celadon · DarkSeaGreen · Apple Green

HEX

#8BCE96

RGB

rgb(139, 206, 150)

HSL

hsl(130, 41%, 68%)

HSB

hsb(130, 33%, 81%)

CMYK

cmyk(33%, 0%, 27%, 19%)

Oklch

oklch(79.2% 0.104 148.8)

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

#B2EC97

Emerald · LightGreen · Apple Green

HEX

#B2EC97

RGB

rgb(178, 236, 151)

HSL

hsl(101, 69%, 76%)

HSB

hsb(101, 36%, 93%)

CMYK

cmyk(25%, 0%, 36%, 7%)

Oklch

oklch(88.3% 0.127 136.1)

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

#EAFCA4

Willow Green · Khaki · Mint Green

HEX

#EAFCA4

RGB

rgb(234, 252, 164)

HSL

hsl(72, 94%, 82%)

HSB

hsb(72, 35%, 99%)

CMYK

cmyk(7%, 0%, 35%, 1%)

Oklch

oklch(95.8% 0.113 118.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

658487

866865

Analogous

658678

658487

657386

Triadic

658487

866583

838665

Split-Comp.

658487

866573

867865

Tetradic

658487

786586

866865

738665

Contrast Matrix WCAG 2.1 Contrast

658487	64AC95	8BCE96	B2EC97	EAFCA4
—	1.5 Fail	2.2 Fail	2.9 Fail	3.6 AA Large
1.5 Fail	—	1.4 Fail	1.9 Fail	2.4 Fail
2.2 Fail	1.4 Fail	—	1.3 Fail	1.7 Fail
2.9 Fail	1.9 Fail	1.3 Fail	—	1.2 Fail
3.6 AA Large	2.4 Fail	1.7 Fail	1.2 Fail	—

White BG

4.0AA Large

2.7Fail

1.8Fail

1.4Fail

1.1Fail

Black BG

5.2AA

7.9AAA

11.4AAA

15.3AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727386

83849B

A8A9A4

CBCCAC

F2F2B9

Deuteranopia

716E86

7F7A9C

A49FA7

C8C3B1

F1EFBE

Tritanopia

678686

689FA0

8EAEB1

B5BCBF

EBCACE

Achromatopsia

7B7B7B

949494

B4B4B4

D1D1D1

EDEDED

Shades & Tints Shades & Tints

#658487

Dark

Light

#64AC95

Dark

Light

#8BCE96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #658487;
  --color-2: #64ac95;
  --color-3: #8bce96;
  --color-4: #b2ec97;
  --color-5: #eafca4;
}

SCSS

$color-1: #658487;
$color-2: #64ac95;
$color-3: #8bce96;
$color-4: #b2ec97;
$color-5: #eafca4;

TAILWIND

colors: {
  'brand-1': '#658487',
  'brand-2': '#64ac95',
  'brand-3': '#8bce96',
  'brand-4': '#b2ec97',
  'brand-5': '#eafca4',
}

RGB Array

[101, 132, 135], [100, 172, 149], [139, 206, 150], [178, 236, 151], [234, 252, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #658487, #64AC95, #8BCE96, #B2EC97, #EAFCA4 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: #658487; --color-2: #64ac95; --color-3: #8bce96; --color-4: #b2ec97; --color-5: #eafca4. 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