← Back to Editor

#748077 · #637278 · #8999A1 · #DCE3E0 · #B0C1B5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#748077

Ink Gray · Gray · Warm Gray

HEX
#748077
RGB
rgb(116, 128, 119)
HSL
hsl(135, 5%, 48%)
HSB
hsb(135, 9%, 50%)
CMYK
cmyk(9%, 0%, 7%, 50%)
Oklch
oklch(58.7% 0.020 153.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#637278

Slate Blue · DimGray · Mint Ice

HEX
#637278
RGB
rgb(99, 114, 120)
HSL
hsl(197, 10%, 43%)
HSB
hsb(197, 17%, 47%)
CMYK
cmyk(18%, 5%, 0%, 53%)
Oklch
oklch(54.2% 0.020 223.8)

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

#8999A1

Slate Blue · LightSlateGray · Navy Blue

HEX
#8999A1
RGB
rgb(137, 153, 161)
HSL
hsl(200, 11%, 58%)
HSB
hsb(200, 15%, 63%)
CMYK
cmyk(15%, 5%, 0%, 37%)
Oklch
oklch(67.3% 0.022 229.2)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#DCE3E0

Jade · LightGray · Mint Green

HEX
#DCE3E0
RGB
rgb(220, 227, 224)
HSL
hsl(154, 11%, 88%)
HSB
hsb(154, 3%, 89%)
CMYK
cmyk(3%, 0%, 1%, 11%)
Oklch
oklch(91.0% 0.009 168.7)

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

#B0C1B5

Celadon · Silver · Apple Green

HEX
#B0C1B5
RGB
rgb(176, 193, 181)
HSL
hsl(138, 12%, 72%)
HSB
hsb(138, 9%, 76%)
CMYK
cmyk(9%, 0%, 6%, 24%)
Oklch
oklch(79.4% 0.025 155.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

748077
81747D

Analogous

778174
748077
74817D

Triadic

748077
777481
817774

Split-Comp.

748077
7D7481
817477

Tetradic

748077
747781
81747D
817D74

Contrast Matrix WCAG 2.1 Contrast

748077
637278
8999A1
DCE3E0
B0C1B5
—
1.2
Fail
1.4
Fail
3.2
AA Large
2.2
Fail
1.2
Fail
—
1.7
Fail
3.8
AA Large
2.6
Fail
1.4
Fail
1.7
Fail
—
2.3
Fail
1.6
Fail
3.2
AA Large
3.8
AA Large
2.3
Fail
—
1.4
Fail
2.2
Fail
2.6
Fail
1.6
Fail
1.4
Fail
—
White BG
4.1AA Large
5.0AA
2.9Fail
1.3Fail
1.9Fail
Black BG
5.1AA
4.2AA Large
7.1AAA
16.1AAA
11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797979
696A77
90909F
DFDFE1
B7B8B8

Deuteranopia

79787A
696876
8F8E9F
DFDEE1
B6B5B9

Tritanopia

757B7B
647575
8A9E9D
DCE1E1
B1BABB

Achromatopsia

7B7B7B
6E6E6E
959595
E1E1E1
BBBBBB

Shades & Tints Shades & Tints

#748077

Dark
Light

#637278

Dark
Light

#8999A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #748077;
  --color-2: #637278;
  --color-3: #8999a1;
  --color-4: #dce3e0;
  --color-5: #b0c1b5;
}

SCSS

$color-1: #748077;
$color-2: #637278;
$color-3: #8999a1;
$color-4: #dce3e0;
$color-5: #b0c1b5;

TAILWIND

colors: {
  'brand-1': '#748077',
  'brand-2': '#637278',
  'brand-3': '#8999a1',
  'brand-4': '#dce3e0',
  'brand-5': '#b0c1b5',
}

RGB Array

[116, 128, 119], [99, 114, 120], [137, 153, 161], [220, 227, 224], [176, 193, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #748077, #637278, #8999A1, #DCE3E0, #B0C1B5 is ideal for: brand design, premium product pages, magazine layouts, 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: #748077; --color-2: #637278; --color-3: #8999a1; --color-4: #dce3e0; --color-5: #b0c1b5. 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. 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 tech, SaaS, healthcare, eco 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