← Back to Editor

#8F7F86 · #48A2AB · #36BDC9 · #9BF4FA · #F2F2F2

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

#8F7F86

Ash · Gray · Warm Gray

HEX
#8F7F86
RGB
rgb(143, 127, 134)
HSL
hsl(334, 7%, 53%)
HSB
hsb(334, 11%, 56%)
CMYK
cmyk(0%, 11%, 6%, 44%)
Oklch
oklch(61.3% 0.022 349.5)

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

#48A2AB

Slate Blue · CadetBlue · Mint Ice

HEX
#48A2AB
RGB
rgb(72, 162, 171)
HSL
hsl(185, 41%, 48%)
HSB
hsb(185, 58%, 67%)
CMYK
cmyk(58%, 5%, 0%, 33%)
Oklch
oklch(66.1% 0.086 204.2)

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

#36BDC9

Lake Blue · MediumTurquoise · Mint Ice

HEX
#36BDC9
RGB
rgb(54, 189, 201)
HSL
hsl(185, 58%, 50%)
HSB
hsb(185, 73%, 79%)
CMYK
cmyk(73%, 6%, 0%, 21%)
Oklch
oklch(73.3% 0.113 203.9)

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

#9BF4FA

Sky Blue · LightBlue · Glacier Blue

HEX
#9BF4FA
RGB
rgb(155, 244, 250)
HSL
hsl(184, 90%, 79%)
HSB
hsb(184, 38%, 98%)
CMYK
cmyk(38%, 2%, 0%, 2%)
Oklch
oklch(91.3% 0.086 201.2)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F7F86
7F9088

Analogous

907F8E
8F7F86
90807F

Triadic

8F7F86
86907F
7F8690

Split-Comp.

8F7F86
7F9080
7F8E90

Tetradic

8F7F86
8E907F
7F9088
807F90

Contrast Matrix WCAG 2.1 Contrast

8F7F86
48A2AB
36BDC9
9BF4FA
F2F2F2
—
1.3
Fail
1.7
Fail
3.0
AA Large
3.4
AA Large
1.3
Fail
—
1.3
Fail
2.4
Fail
2.7
Fail
1.7
Fail
1.3
Fail
—
1.8
Fail
2.0
Fail
3.0
AA Large
2.4
Fail
1.8
Fail
—
1.1
Fail
3.4
AA Large
2.7
Fail
2.0
Fail
1.1
Fail
—
White BG
3.8AA Large
3.0Fail
2.3Fail
1.3Fail
1.1Fail
Black BG
5.5AA
7.0AAA
9.3AAA
16.7AAA
18.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888884
6F70A9
7072C6
C2C2F9
F2F2F2

Deuteranopia

898A84
6A63A8
695FC5
BCB6F8
F2F2F2

Tritanopia

8E8383
4CA7A7
3DC4C3
9FF7F7
F2F2F2

Achromatopsia

858585
888888
969696
DADADA
F2F2F2

Shades & Tints Shades & Tints

#8F7F86

Dark
Light

#48A2AB

Dark
Light

#36BDC9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f7f86;
  --color-2: #48a2ab;
  --color-3: #36bdc9;
  --color-4: #9bf4fa;
  --color-5: #f2f2f2;
}

SCSS

$color-1: #8f7f86;
$color-2: #48a2ab;
$color-3: #36bdc9;
$color-4: #9bf4fa;
$color-5: #f2f2f2;

TAILWIND

colors: {
  'brand-1': '#8f7f86',
  'brand-2': '#48a2ab',
  'brand-3': '#36bdc9',
  'brand-4': '#9bf4fa',
  'brand-5': '#f2f2f2',
}

RGB Array

[143, 127, 134], [72, 162, 171], [54, 189, 201], [155, 244, 250], [242, 242, 242]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F7F86, #48A2AB, #36BDC9, #9BF4FA, #F2F2F2 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8f7f86; --color-2: #48a2ab; --color-3: #36bdc9; --color-4: #9bf4fa; --color-5: #f2f2f2. 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. 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