← Back to Editor

#858EC2 · #8FC6C6 · #85C2A8 · #B5C285 · #C2A385

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

#858EC2

Azure · LightSlateGray · Cobalt Blue

HEX
#858EC2
RGB
rgb(133, 142, 194)
HSL
hsl(231, 33%, 64%)
HSB
hsb(231, 31%, 76%)
CMYK
cmyk(31%, 27%, 0%, 24%)
Oklch
oklch(65.9% 0.078 276.5)

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

#8FC6C6

Sky Blue · SkyBlue · Lake Green

HEX
#8FC6C6
RGB
rgb(143, 198, 198)
HSL
hsl(180, 33%, 67%)
HSB
hsb(180, 28%, 78%)
CMYK
cmyk(28%, 0%, 0%, 22%)
Oklch
oklch(78.9% 0.057 196.1)

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

#85C2A8

Jade · DarkSeaGreen · Apple Green

HEX
#85C2A8
RGB
rgb(133, 194, 168)
HSL
hsl(154, 33%, 64%)
HSB
hsb(154, 31%, 76%)
CMYK
cmyk(31%, 0%, 13%, 24%)
Oklch
oklch(76.5% 0.073 166.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#B5C285

Willow Green · Tan · Apple Green

HEX
#B5C285
RGB
rgb(181, 194, 133)
HSL
hsl(73, 33%, 64%)
HSB
hsb(73, 31%, 76%)
CMYK
cmyk(7%, 0%, 31%, 24%)
Oklch
oklch(78.9% 0.083 118.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#C2A385

Ginger · Tan · Warm Sun

HEX
#C2A385
RGB
rgb(194, 163, 133)
HSL
hsl(30, 33%, 64%)
HSB
hsb(30, 31%, 76%)
CMYK
cmyk(0%, 16%, 31%, 24%)
Oklch
oklch(73.5% 0.055 65.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858EC2
C1B885

Analogous

85ACC1
858EC2
9A85C1

Triadic

858EC2
C1858E
8EC185

Split-Comp.

858EC2
C19A85
ACC185

Tetradic

858EC2
C185AC
C1B885
85C19A

Contrast Matrix WCAG 2.1 Contrast

858EC2
8FC6C6
85C2A8
B5C285
C2A385
—
1.7
Fail
1.5
Fail
1.7
Fail
1.3
Fail
1.7
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.7
Fail
1.0
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
White BG
3.2AA Large
1.9Fail
2.0Fail
1.9Fail
2.4Fail
Black BG
6.6AA
11.1AAA
10.3AAA
11.0AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8989B5
A7A7C6
9FA0AE
BBBB94
B5B48C

Deuteranopia

8888B2
A4A0C6
9C97B0
BAB997
B6B98E

Tritanopia

85ABA9
92C6C6
88B3B4
B69FA2
C09293

Achromatopsia

919191
B6B6B6
ADADAD
B7B7B7
A9A9A9

Shades & Tints Shades & Tints

#858EC2

Dark
Light

#8FC6C6

Dark
Light

#85C2A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858ec2;
  --color-2: #8fc6c6;
  --color-3: #85c2a8;
  --color-4: #b5c285;
  --color-5: #c2a385;
}

SCSS

$color-1: #858ec2;
$color-2: #8fc6c6;
$color-3: #85c2a8;
$color-4: #b5c285;
$color-5: #c2a385;

TAILWIND

colors: {
  'brand-1': '#858ec2',
  'brand-2': '#8fc6c6',
  'brand-3': '#85c2a8',
  'brand-4': '#b5c285',
  'brand-5': '#c2a385',
}

RGB Array

[133, 142, 194], [143, 198, 198], [133, 194, 168], [181, 194, 133], [194, 163, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858EC2, #8FC6C6, #85C2A8, #B5C285, #C2A385 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: #858ec2; --color-2: #8fc6c6; --color-3: #85c2a8; --color-4: #b5c285; --color-5: #c2a385. 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