← Back to Editor

#625B5E · #9C8AAC · #BEB3C0 · #CECF64 · #D8F756

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

#625B5E

Ink Gray · DimGray · Charcoal

HEX
#625B5E
RGB
rgb(98, 91, 94)
HSL
hsl(334, 4%, 37%)
HSB
hsb(334, 7%, 38%)
CMYK
cmyk(0%, 7%, 4%, 62%)
Oklch
oklch(47.9% 0.010 349.6)

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

#9C8AAC

Lilac · DarkGray · Lilac Purple

HEX
#9C8AAC
RGB
rgb(156, 138, 172)
HSL
hsl(272, 17%, 61%)
HSB
hsb(272, 20%, 67%)
CMYK
cmyk(9%, 20%, 0%, 33%)
Oklch
oklch(66.1% 0.054 308.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#BEB3C0

Lilac · Silver · Pearl Gray

HEX
#BEB3C0
RGB
rgb(190, 179, 192)
HSL
hsl(291, 9%, 73%)
HSB
hsb(291, 7%, 75%)
CMYK
cmyk(1%, 7%, 0%, 25%)
Oklch
oklch(78.0% 0.022 321.0)

Traditional「Lilac」· Paint「Pearl Gray」· Creative Silver Lining

#CECF64

Autumn Sage · BurlyWood · Sunflower

HEX
#CECF64
RGB
rgb(206, 207, 100)
HSL
hsl(61, 53%, 60%)
HSB
hsb(61, 52%, 81%)
CMYK
cmyk(0%, 0%, 52%, 19%)
Oklch
oklch(83.2% 0.130 109.4)

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

#D8F756

Willow Green · GreenYellow · Apple Green

HEX
#D8F756
RGB
rgb(216, 247, 86)
HSL
hsl(72, 91%, 65%)
HSB
hsb(72, 65%, 97%)
CMYK
cmyk(13%, 0%, 65%, 3%)
Oklch
oklch(92.5% 0.185 119.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

625B5E
5B625F

Analogous

625B62
625B5E
625B5B

Triadic

625B5E
5E625B
5B5E62

Split-Comp.

625B5E
5B625B
5B6262

Tetradic

625B5E
62625B
5B625F
5B5B62

Contrast Matrix WCAG 2.1 Contrast

625B5E
9C8AAC
BEB3C0
CECF64
D8F756
—
2.1
Fail
3.3
AA Large
4.0
AA Large
5.5
AA
2.1
Fail
—
1.6
Fail
1.9
Fail
2.6
Fail
3.3
AA Large
1.6
Fail
—
1.2
Fail
1.7
Fail
4.0
AA Large
1.9
Fail
1.2
Fail
—
1.4
Fail
5.5
AA
2.6
Fail
1.7
Fail
1.4
Fail
—
White BG
6.6AA
3.2AA Large
2.0Fail
1.6Fail
1.2Fail
Black BG
3.2AA Large
6.6AA
10.4AAA
12.7AAA
17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F5D
9494A4
B9B9BD
CECE7E
E5E67D

Deuteranopia

5F605D
9597A2
BABBBC
CECE84
E4E186

Tritanopia

625D5D
9B9D9C
BDBABA
CE9297
DA9CA2

Achromatopsia

5D5D5D
939393
B8B8B8
C3C3C3
DBDBDB

Shades & Tints Shades & Tints

#625B5E

Dark
Light

#9C8AAC

Dark
Light

#BEB3C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #625b5e;
  --color-2: #9c8aac;
  --color-3: #beb3c0;
  --color-4: #cecf64;
  --color-5: #d8f756;
}

SCSS

$color-1: #625b5e;
$color-2: #9c8aac;
$color-3: #beb3c0;
$color-4: #cecf64;
$color-5: #d8f756;

TAILWIND

colors: {
  'brand-1': '#625b5e',
  'brand-2': '#9c8aac',
  'brand-3': '#beb3c0',
  'brand-4': '#cecf64',
  'brand-5': '#d8f756',
}

RGB Array

[98, 91, 94], [156, 138, 172], [190, 179, 192], [206, 207, 100], [216, 247, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #625B5E, #9C8AAC, #BEB3C0, #CECF64, #D8F756 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: #625b5e; --color-2: #9c8aac; --color-3: #beb3c0; --color-4: #cecf64; --color-5: #d8f756. 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