← Back to Editor

#98B1B5 · #82A3AA · #486761 · #272D39 · #62495E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#98B1B5

Sky Blue · DarkGray · Lake Green

HEX
#98B1B5
RGB
rgb(152, 177, 181)
HSL
hsl(188, 16%, 65%)
HSB
hsb(188, 16%, 71%)
CMYK
cmyk(16%, 2%, 0%, 29%)
Oklch
oklch(74.3% 0.028 208.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#82A3AA

Slate Blue · LightSlateGray · Lake Green

HEX
#82A3AA
RGB
rgb(130, 163, 170)
HSL
hsl(191, 19%, 59%)
HSB
hsb(191, 24%, 67%)
CMYK
cmyk(24%, 4%, 0%, 33%)
Oklch
oklch(69.3% 0.038 212.0)

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

#486761

Mineral Blue · DimGray · Mint Ice

HEX
#486761
RGB
rgb(72, 103, 97)
HSL
hsl(168, 18%, 34%)
HSB
hsb(168, 30%, 40%)
CMYK
cmyk(30%, 0%, 6%, 60%)
Oklch
oklch(48.8% 0.037 181.3)

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

#272D39

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#272D39
RGB
rgb(39, 45, 57)
HSL
hsl(220, 19%, 19%)
HSB
hsb(220, 32%, 22%)
CMYK
cmyk(32%, 21%, 0%, 78%)
Oklch
oklch(29.7% 0.023 264.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#62495E

Rose Purple · DimGray · Eggplant

HEX
#62495E
RGB
rgb(98, 73, 94)
HSL
hsl(310, 15%, 34%)
HSB
hsb(310, 26%, 38%)
CMYK
cmyk(0%, 26%, 4%, 62%)
Oklch
oklch(44.0% 0.047 331.9)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98B1B5
B49B97

Analogous

97B4AA
98B1B5
97A2B4

Triadic

98B1B5
B497B0
B0B497

Split-Comp.

98B1B5
B497A2
B4AA97

Tetradic

98B1B5
AA97B4
B49B97
A2B497

Contrast Matrix WCAG 2.1 Contrast

98B1B5
82A3AA
486761
272D39
62495E
—
1.2
Fail
2.7
Fail
6.1
AA
3.5
AA Large
1.2
Fail
—
2.3
Fail
5.1
AA
2.9
Fail
2.7
Fail
2.3
Fail
—
2.2
Fail
1.3
Fail
6.1
AA
5.1
AA
2.2
Fail
—
1.7
Fail
3.5
AA Large
2.9
Fail
1.3
Fail
1.7
Fail
—
White BG
2.3Fail
2.7Fail
6.2AA
13.8AAA
8.0AAA
Black BG
9.3AAA
7.8AAA
3.4AA Large
1.5Fail
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3B4
9091A8
555662
2A2A36
575759

Deuteranopia

A1A0B4
8E8CA8
545163
292935
595B58

Tritanopia

99B3B3
84A7A7
4A6464
273433
615554

Achromatopsia

AAAAAA
9A9A9A
5D5D5D
2D2D2D
535353

Shades & Tints Shades & Tints

#98B1B5

Dark
Light

#82A3AA

Dark
Light

#486761

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98b1b5;
  --color-2: #82a3aa;
  --color-3: #486761;
  --color-4: #272d39;
  --color-5: #62495e;
}

SCSS

$color-1: #98b1b5;
$color-2: #82a3aa;
$color-3: #486761;
$color-4: #272d39;
$color-5: #62495e;

TAILWIND

colors: {
  'brand-1': '#98b1b5',
  'brand-2': '#82a3aa',
  'brand-3': '#486761',
  'brand-4': '#272d39',
  'brand-5': '#62495e',
}

RGB Array

[152, 177, 181], [130, 163, 170], [72, 103, 97], [39, 45, 57], [98, 73, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98B1B5, #82A3AA, #486761, #272D39, #62495E 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: #98b1b5; --color-2: #82a3aa; --color-3: #486761; --color-4: #272d39; --color-5: #62495e. 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