← Back to Editor

#625F67 · #93BDAA · #B0D2BE · #E1F7D0 · #D8D8D6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#625F67

Ink Gray · DimGray · Charcoal

HEX
#625F67
RGB
rgb(98, 95, 103)
HSL
hsl(263, 4%, 39%)
HSB
hsb(263, 8%, 40%)
CMYK
cmyk(5%, 8%, 0%, 60%)
Oklch
oklch(49.1% 0.013 302.9)

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

#93BDAA

Jade · DarkSeaGreen · Apple Green

HEX
#93BDAA
RGB
rgb(147, 189, 170)
HSL
hsl(153, 24%, 66%)
HSB
hsb(153, 22%, 74%)
CMYK
cmyk(22%, 0%, 10%, 26%)
Oklch
oklch(76.3% 0.052 165.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#B0D2BE

Celadon · Silver · Apple Green

HEX
#B0D2BE
RGB
rgb(176, 210, 190)
HSL
hsl(145, 27%, 76%)
HSB
hsb(145, 16%, 82%)
CMYK
cmyk(16%, 0%, 10%, 18%)
Oklch
oklch(83.3% 0.046 159.4)

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

#E1F7D0

Emerald · Beige · Mint Green

HEX
#E1F7D0
RGB
rgb(225, 247, 208)
HSL
hsl(94, 71%, 89%)
HSB
hsb(94, 16%, 97%)
CMYK
cmyk(9%, 0%, 16%, 3%)
Oklch
oklch(95.0% 0.056 131.5)

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

#D8D8D6

Silver Gray · LightGray · Pearl Gray

HEX
#D8D8D6
RGB
rgb(216, 216, 214)
HSL
hsl(60, 2%, 84%)
HSB
hsb(60, 1%, 85%)
CMYK
cmyk(0%, 0%, 1%, 15%)
Oklch
oklch(88.2% 0.003 106.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

625F67
64675F

Analogous

5F6067
625F67
665F67

Triadic

625F67
67635F
5F6763

Split-Comp.

625F67
67665F
60675F

Tetradic

625F67
675F60
64675F
5F6766

Contrast Matrix WCAG 2.1 Contrast

625F67
93BDAA
B0D2BE
E1F7D0
D8D8D6
—
3.0
AA Large
3.8
AA Large
5.5
AA
4.4
AA Large
3.0
AA Large
—
1.3
Fail
1.8
Fail
1.5
Fail
3.8
AA Large
1.3
Fail
—
1.4
Fail
1.1
Fail
5.5
AA
1.8
Fail
1.4
Fail
—
1.3
Fail
4.4
AA Large
1.5
Fail
1.1
Fail
1.3
Fail
—
White BG
6.3AA
2.1Fail
1.6Fail
1.1Fail
1.4Fail
Black BG
3.4AA Large
10.1AAA
12.8AAA
18.4AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

616165
A5A6AF
BFBFC3
EBEBD9
D8D8D6

Deuteranopia

616165
A3A0B0
BDBAC4
E9E8DC
D8D8D7

Tritanopia

626463
95B2B3
B2C7C8
E2E1E3
D8D7D7

Achromatopsia

616161
AEAEAE
C6C6C6
ECECEC
D8D8D8

Shades & Tints Shades & Tints

#625F67

Dark
Light

#93BDAA

Dark
Light

#B0D2BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #625f67;
  --color-2: #93bdaa;
  --color-3: #b0d2be;
  --color-4: #e1f7d0;
  --color-5: #d8d8d6;
}

SCSS

$color-1: #625f67;
$color-2: #93bdaa;
$color-3: #b0d2be;
$color-4: #e1f7d0;
$color-5: #d8d8d6;

TAILWIND

colors: {
  'brand-1': '#625f67',
  'brand-2': '#93bdaa',
  'brand-3': '#b0d2be',
  'brand-4': '#e1f7d0',
  'brand-5': '#d8d8d6',
}

RGB Array

[98, 95, 103], [147, 189, 170], [176, 210, 190], [225, 247, 208], [216, 216, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #625F67, #93BDAA, #B0D2BE, #E1F7D0, #D8D8D6 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #625f67; --color-2: #93bdaa; --color-3: #b0d2be; --color-4: #e1f7d0; --color-5: #d8d8d6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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