← Back to Editor

#164EF8 · #68848C · #818386 · #FC5470 · #807871

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

#164EF8

Azure · DodgerBlue · Navy Blue

HEX
#164EF8
RGB
rgb(22, 78, 248)
HSL
hsl(225, 94%, 53%)
HSB
hsb(225, 91%, 97%)
CMYK
cmyk(91%, 69%, 0%, 3%)
Oklch
oklch(51.7% 0.257 264.3)

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

#68848C

Slate Blue · SlateGray · Mint Ice

HEX
#68848C
RGB
rgb(104, 132, 140)
HSL
hsl(193, 15%, 48%)
HSB
hsb(193, 26%, 55%)
CMYK
cmyk(26%, 6%, 0%, 45%)
Oklch
oklch(59.4% 0.034 217.1)

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

#818386

Ash · Gray · Warm Gray

HEX
#818386
RGB
rgb(129, 131, 134)
HSL
hsl(216, 2%, 52%)
HSB
hsb(216, 4%, 53%)
CMYK
cmyk(4%, 2%, 0%, 47%)
Oklch
oklch(60.9% 0.005 258.3)

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

#FC5470

Peach Pink · Tomato · Coral Red

HEX
#FC5470
RGB
rgb(252, 84, 112)
HSL
hsl(350, 97%, 66%)
HSB
hsb(350, 67%, 99%)
CMYK
cmyk(0%, 67%, 56%, 1%)
Oklch
oklch(68.1% 0.203 14.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#807871

Ink Gray · Gray · Warm Gray

HEX
#807871
RGB
rgb(128, 120, 113)
HSL
hsl(28, 6%, 47%)
HSB
hsb(28, 12%, 50%)
CMYK
cmyk(0%, 6%, 12%, 50%)
Oklch
oklch(57.8% 0.014 63.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

164EF8
F8BF16

Analogous

16BFF8
164EF8
4F16F8

Triadic

164EF8
F8164F
4FF816

Split-Comp.

164EF8
F84F16
BFF816

Tetradic

164EF8
F816BF
F8BF16
16F84F

Contrast Matrix WCAG 2.1 Contrast

164EF8
68848C
818386
FC5470
807871
—
1.5
Fail
1.6
Fail
1.9
Fail
1.4
Fail
1.5
Fail
—
1.0
Fail
1.3
Fail
1.1
Fail
1.6
Fail
1.0
Fail
—
1.2
Fail
1.1
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
1.4
Fail
1.1
Fail
1.1
Fail
1.4
Fail
—
White BG
6.0AA
4.0AA Large
3.8AA Large
3.2AA Large
4.3AA Large
Black BG
3.5AA Large
5.3AA
5.5AA
6.6AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2FCF
74748A
828285
B3B269
7D7C73

Deuteranopia

2B27C5
73708A
828285
BDCA68
7D7E73

Tritanopia

19AEA7
698988
818585
F46463
807474

Achromatopsia

515151
7D7D7D
838383
898989
7A7A7A

Shades & Tints Shades & Tints

#164EF8

Dark
Light

#68848C

Dark
Light

#818386

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #164ef8;
  --color-2: #68848c;
  --color-3: #818386;
  --color-4: #fc5470;
  --color-5: #807871;
}

SCSS

$color-1: #164ef8;
$color-2: #68848c;
$color-3: #818386;
$color-4: #fc5470;
$color-5: #807871;

TAILWIND

colors: {
  'brand-1': '#164ef8',
  'brand-2': '#68848c',
  'brand-3': '#818386',
  'brand-4': '#fc5470',
  'brand-5': '#807871',
}

RGB Array

[22, 78, 248], [104, 132, 140], [129, 131, 134], [252, 84, 112], [128, 120, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #164EF8, #68848C, #818386, #FC5470, #807871 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: #164ef8; --color-2: #68848c; --color-3: #818386; --color-4: #fc5470; --color-5: #807871. 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