← Back to Editor

#656766 · #5D9477 · #BFE0AB · #E25E76 · #E9B1BE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#656766

Ink Gray · DimGray · Charcoal

HEX
#656766
RGB
rgb(101, 103, 102)
HSL
hsl(150, 1%, 40%)
HSB
hsb(150, 2%, 40%)
CMYK
cmyk(2%, 0%, 1%, 60%)
Oklch
oklch(51.2% 0.003 165.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#5D9477

Celadon · SlateGray · Olive Green

HEX
#5D9477
RGB
rgb(93, 148, 119)
HSL
hsl(148, 23%, 47%)
HSB
hsb(148, 37%, 58%)
CMYK
cmyk(37%, 0%, 20%, 42%)
Oklch
oklch(62.0% 0.074 160.2)

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

#BFE0AB

Celadon · Silver · Apple Green

HEX
#BFE0AB
RGB
rgb(191, 224, 171)
HSL
hsl(97, 46%, 77%)
HSB
hsb(97, 24%, 88%)
CMYK
cmyk(15%, 0%, 24%, 12%)
Oklch
oklch(86.9% 0.079 133.9)

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

#E25E76

Peach Pink · LightCoral · Coral Red

HEX
#E25E76
RGB
rgb(226, 94, 118)
HSL
hsl(349, 69%, 63%)
HSB
hsb(349, 58%, 89%)
CMYK
cmyk(0%, 58%, 48%, 11%)
Oklch
oklch(65.5% 0.165 11.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#E9B1BE

Peach Pink · LightPink · Coral Red

HEX
#E9B1BE
RGB
rgb(233, 177, 190)
HSL
hsl(346, 56%, 80%)
HSB
hsb(346, 24%, 91%)
CMYK
cmyk(0%, 24%, 18%, 9%)
Oklch
oklch(81.5% 0.067 3.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656766
676566

Analogous

656765
656766
656767

Triadic

656766
666567
676665

Split-Comp.

656766
676567
676565

Tetradic

656766
656567
676566
676765

Contrast Matrix WCAG 2.1 Contrast

656766
5D9477
BFE0AB
E25E76
E9B1BE
—
1.6
Fail
3.9
AA Large
1.7
Fail
3.1
AA Large
1.6
Fail
—
2.4
Fail
1.0
Fail
1.9
Fail
3.9
AA Large
2.4
Fail
—
2.4
Fail
1.3
Fail
1.7
Fail
1.0
Fail
2.4
Fail
—
1.9
Fail
3.1
AA Large
1.9
Fail
1.3
Fail
1.9
Fail
—
White BG
5.7AA
3.5AA Large
1.5Fail
3.4AA Large
1.8Fail
Black BG
3.7AA Large
6.0AA
14.5AAA
6.1AA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666666
75757E
CDCEB8
A9A870
D1D0BB

Deuteranopia

666666
726E80
CBC9BB
B1BA6F
D4D8BA

Tritanopia

656666
608485
C1C2C4
DB6C6B
E6B8B8

Achromatopsia

666666
808080
D0D0D0
888888
C3C3C3

Shades & Tints Shades & Tints

#656766

Dark
Light

#5D9477

Dark
Light

#BFE0AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656766;
  --color-2: #5d9477;
  --color-3: #bfe0ab;
  --color-4: #e25e76;
  --color-5: #e9b1be;
}

SCSS

$color-1: #656766;
$color-2: #5d9477;
$color-3: #bfe0ab;
$color-4: #e25e76;
$color-5: #e9b1be;

TAILWIND

colors: {
  'brand-1': '#656766',
  'brand-2': '#5d9477',
  'brand-3': '#bfe0ab',
  'brand-4': '#e25e76',
  'brand-5': '#e9b1be',
}

RGB Array

[101, 103, 102], [93, 148, 119], [191, 224, 171], [226, 94, 118], [233, 177, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656766, #5D9477, #BFE0AB, #E25E76, #E9B1BE 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: #656766; --color-2: #5d9477; --color-3: #bfe0ab; --color-4: #e25e76; --color-5: #e9b1be. 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