#5F565F + #A5CACA + #78D6DC + #94ABEB + #A399E3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5F565F

Ink Gray · DimGray · Charcoal

HEX

#5F565F

RGB

rgb(95, 86, 95)

HSL

hsl(300, 5%, 35%)

HSB

hsb(300, 9%, 37%)

CMYK

cmyk(0%, 9%, 0%, 63%)

Oklch

oklch(46.5% 0.018 325.9)

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

#A5CACA

Sky Blue · LightSteelBlue · Lake Green

HEX

#A5CACA

RGB

rgb(165, 202, 202)

HSL

hsl(180, 26%, 72%)

HSB

hsb(180, 18%, 79%)

CMYK

cmyk(18%, 0%, 0%, 21%)

Oklch

oklch(81.2% 0.039 196.4)

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

#78D6DC

Sky Blue · SkyBlue · Lake Green

HEX

#78D6DC

RGB

rgb(120, 214, 220)

HSL

hsl(184, 59%, 67%)

HSB

hsb(184, 45%, 86%)

CMYK

cmyk(45%, 3%, 0%, 14%)

Oklch

oklch(82.0% 0.090 200.9)

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

#94ABEB

Azure · SkyBlue · Cobalt Blue

HEX

#94ABEB

RGB

rgb(148, 171, 235)

HSL

hsl(224, 69%, 75%)

HSB

hsb(224, 37%, 92%)

CMYK

cmyk(37%, 27%, 0%, 8%)

Oklch

oklch(74.8% 0.096 268.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A399E3

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#A399E3

RGB

rgb(163, 153, 227)

HSL

hsl(248, 57%, 75%)

HSB

hsb(248, 33%, 89%)

CMYK

cmyk(28%, 33%, 0%, 11%)

Oklch

oklch(72.0% 0.107 289.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F565F

555E55

Analogous

59555E

5F565F

5E5559

Triadic

5F565F

5E5E55

555E5E

Split-Comp.

5F565F

595E55

555E59

Tetradic

5F565F

5E5955

555E55

55595E

Contrast Matrix WCAG 2.1 Contrast

5F565F	A5CACA	78D6DC	94ABEB	A399E3
—	4.0 AA Large	4.2 AA Large	3.1 AA Large	2.8 Fail
4.0 AA Large	—	1.0 Fail	1.3 Fail	1.4 Fail
4.2 AA Large	1.0 Fail	—	1.3 Fail	1.5 Fail
3.1 AA Large	1.3 Fail	1.3 Fail	—	1.1 Fail
2.8 Fail	1.4 Fail	1.5 Fail	1.1 Fail	—

White BG

7.0AAA

1.8Fail

1.7Fail

2.3Fail

2.6Fail

Black BG

3.0Fail

11.9AAA

12.5AAA

9.3AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B5D

B5B5CA

A1A2DB

9E9EDC

9F9FD1

Deuteranopia

5C5C5C

B3B0CA

9B94DA

9D9BD8

9FA0CD

Tritanopia

5F5B5B

A7CACA

7DD9D9

95CFCD

A3C3C0

Achromatopsia

5A5A5A

BFBFBF

BBBBBB

ABABAB

A4A4A4

Shades & Tints Shades & Tints

#5F565F

Dark

Light

#A5CACA

Dark

Light

#78D6DC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f565f;
  --color-2: #a5caca;
  --color-3: #78d6dc;
  --color-4: #94abeb;
  --color-5: #a399e3;
}

SCSS

$color-1: #5f565f;
$color-2: #a5caca;
$color-3: #78d6dc;
$color-4: #94abeb;
$color-5: #a399e3;

TAILWIND

colors: {
  'brand-1': '#5f565f',
  'brand-2': '#a5caca',
  'brand-3': '#78d6dc',
  'brand-4': '#94abeb',
  'brand-5': '#a399e3',
}

RGB Array

[95, 86, 95], [165, 202, 202], [120, 214, 220], [148, 171, 235], [163, 153, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F565F, #A5CACA, #78D6DC, #94ABEB, #A399E3 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: #5f565f; --color-2: #a5caca; --color-3: #78d6dc; --color-4: #94abeb; --color-5: #a399e3. 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