#85DFDF + #22B0CC + #4464CD + #6544CD + #7B4183 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#85DFDF

Sky Blue · SkyBlue · Lake Green

HEX

#85DFDF

RGB

rgb(133, 223, 223)

HSL

hsl(180, 58%, 70%)

HSB

hsb(180, 40%, 87%)

CMYK

cmyk(40%, 0%, 0%, 13%)

Oklch

oklch(84.8% 0.087 195.6)

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

#22B0CC

Lake Blue · LightSeaGreen · Mint Ice

HEX

#22B0CC

RGB

rgb(34, 176, 204)

HSL

hsl(190, 71%, 47%)

HSB

hsb(190, 83%, 80%)

CMYK

cmyk(83%, 14%, 0%, 20%)

Oklch

oklch(69.9% 0.118 215.4)

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

#4464CD

Azure · SteelBlue · Navy Blue

HEX

#4464CD

RGB

rgb(68, 100, 205)

HSL

hsl(226, 58%, 54%)

HSB

hsb(226, 67%, 80%)

CMYK

cmyk(67%, 51%, 0%, 20%)

Oklch

oklch(53.7% 0.167 267.7)

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

#6544CD

Deep Indigo · SlateBlue · Navy Blue

HEX

#6544CD

RGB

rgb(101, 68, 205)

HSL

hsl(254, 58%, 54%)

HSB

hsb(254, 67%, 80%)

CMYK

cmyk(51%, 67%, 0%, 20%)

Oklch

oklch(50.4% 0.200 288.1)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#7B4183

Dark Plum · DimGray · Eggplant

HEX

#7B4183

RGB

rgb(123, 65, 131)

HSL

hsl(293, 34%, 38%)

HSB

hsb(293, 50%, 51%)

CMYK

cmyk(6%, 50%, 0%, 49%)

Oklch

oklch(47.3% 0.121 322.6)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85DFDF

DF8686

Analogous

86DFB3

85DFDF

86B3DF

Triadic

85DFDF

DF86DF

DFDF86

Split-Comp.

85DFDF

DF86B3

DFB386

Tetradic

85DFDF

B386DF

DF8686

B3DF86

Contrast Matrix WCAG 2.1 Contrast

85DFDF	22B0CC	4464CD	6544CD	7B4183
—	1.7 Fail	3.4 AA Large	4.2 AA Large	4.7 AA
1.7 Fail	—	2.1 Fail	2.5 Fail	2.8 Fail
3.4 AA Large	2.1 Fail	—	1.2 Fail	1.4 Fail
4.2 AA Large	2.5 Fail	1.2 Fail	—	1.1 Fail
4.7 AA	2.8 Fail	1.4 Fail	1.1 Fail	—

White BG

1.5Fail

2.6Fail

5.3AA

6.4AA

7.2AAA

Black BG

13.6AAA

8.2AAA

4.0AA Large

3.3AA Large

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACADDF

5F61C5

5252B4

5756AC

626173

Deuteranopia

A7A0DF

574DC4

504EAE

595BA4

656A6F

Tritanopia

8ADFDF

29C0BF

46A09B

63928C

786664

Achromatopsia

C4C4C4

898989

666666

5D5D5D

5A5A5A

Shades & Tints Shades & Tints

#85DFDF

Dark

Light

#22B0CC

Dark

Light

#4464CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85dfdf;
  --color-2: #22b0cc;
  --color-3: #4464cd;
  --color-4: #6544cd;
  --color-5: #7b4183;
}

SCSS

$color-1: #85dfdf;
$color-2: #22b0cc;
$color-3: #4464cd;
$color-4: #6544cd;
$color-5: #7b4183;

TAILWIND

colors: {
  'brand-1': '#85dfdf',
  'brand-2': '#22b0cc',
  'brand-3': '#4464cd',
  'brand-4': '#6544cd',
  'brand-5': '#7b4183',
}

RGB Array

[133, 223, 223], [34, 176, 204], [68, 100, 205], [101, 68, 205], [123, 65, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #85DFDF, #22B0CC, #4464CD, #6544CD, #7B4183 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: #85dfdf; --color-2: #22b0cc; --color-3: #4464cd; --color-4: #6544cd; --color-5: #7b4183. 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 dark-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