← Back to Editor

#7FE4FF · #80C5D9 · #86A9B3 · #838E91 · #858585

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 Library

Color Details Color Details

#7FE4FF

Sky Blue · LightSkyBlue · Lake Green

HEX
#7FE4FF
RGB
rgb(127, 228, 255)
HSL
hsl(193, 100%, 75%)
HSB
hsb(193, 50%, 100%)
CMYK
cmyk(50%, 11%, 0%, 0%)
Oklch
oklch(86.7% 0.102 217.2)

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

#80C5D9

Sky Blue · SkyBlue · Lake Green

HEX
#80C5D9
RGB
rgb(128, 197, 217)
HSL
hsl(193, 54%, 68%)
HSB
hsb(193, 41%, 85%)
CMYK
cmyk(41%, 9%, 0%, 15%)
Oklch
oklch(78.5% 0.075 218.1)

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

#86A9B3

Sky Blue · DarkGray · Lake Green

HEX
#86A9B3
RGB
rgb(134, 169, 179)
HSL
hsl(193, 23%, 61%)
HSB
hsb(193, 25%, 70%)
CMYK
cmyk(25%, 6%, 0%, 30%)
Oklch
oklch(71.2% 0.041 217.1)

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

#838E91

Ash · LightSlateGray · Warm Gray

HEX
#838E91
RGB
rgb(131, 142, 145)
HSL
hsl(193, 6%, 54%)
HSB
hsb(193, 10%, 57%)
CMYK
cmyk(10%, 2%, 0%, 43%)
Oklch
oklch(63.9% 0.014 215.9)

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

#858585

Ash · Gray · Warm Gray

HEX
#858585
RGB
rgb(133, 133, 133)
HSL
hsl(0, 0%, 52%)
HSB
hsb(0, 0%, 52%)
CMYK
cmyk(0%, 0%, 0%, 48%)
Oklch
oklch(61.7% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FE4FF
FF9B80

Analogous

80FFDB
7FE4FF
80A4FF

Triadic

7FE4FF
FF80E3
E3FF80

Split-Comp.

7FE4FF
FF80A4
FFDB80

Tetradic

7FE4FF
DB80FF
FF9B80
A4FF80

Contrast Matrix WCAG 2.1 Contrast

7FE4FF
80C5D9
86A9B3
838E91
858585
—
1.3
Fail
1.7
Fail
2.3
Fail
2.5
Fail
1.3
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.1
Fail
2.5
Fail
1.9
Fail
1.5
Fail
1.1
Fail
—
White BG
1.5Fail
1.9Fail
2.5Fail
3.4AA Large
3.7AA Large
Black BG
14.4AAA
10.9AAA
8.3AAA
6.2AA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABACF8
9E9ED4
9595B1
888890
858585

Deuteranopia

A59DF7
9A95D3
9391B0
878690
858585

Tritanopia

84F3F2
83D0D0
88AFAE
849090
858585

Achromatopsia

C9C9C9
B3B3B3
A0A0A0
8B8B8B
858585

Shades & Tints Shades & Tints

#7FE4FF

Dark
Light

#80C5D9

Dark
Light

#86A9B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fe4ff;
  --color-2: #80c5d9;
  --color-3: #86a9b3;
  --color-4: #838e91;
  --color-5: #858585;
}

SCSS

$color-1: #7fe4ff;
$color-2: #80c5d9;
$color-3: #86a9b3;
$color-4: #838e91;
$color-5: #858585;

TAILWIND

colors: {
  'brand-1': '#7fe4ff',
  'brand-2': '#80c5d9',
  'brand-3': '#86a9b3',
  'brand-4': '#838e91',
  'brand-5': '#858585',
}

RGB Array

[127, 228, 255], [128, 197, 217], [134, 169, 179], [131, 142, 145], [133, 133, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7FE4FF, #80C5D9, #86A9B3, #838E91, #858585 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: #7fe4ff; --color-2: #80c5d9; --color-3: #86a9b3; --color-4: #838e91; --color-5: #858585. 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