#55F5AB + #70C095 + #9C8BB8 + #6931C8 + #5744A0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#55F5AB

Jade · MediumAquaMarine · Apple Green

HEX

#55F5AB

RGB

rgb(85, 245, 171)

HSL

hsl(152, 89%, 65%)

HSB

hsb(152, 65%, 96%)

CMYK

cmyk(65%, 0%, 30%, 4%)

Oklch

oklch(86.8% 0.170 159.3)

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

#70C095

Celadon · MediumAquaMarine · Olive Green

HEX

#70C095

RGB

rgb(112, 192, 149)

HSL

hsl(148, 39%, 60%)

HSB

hsb(148, 42%, 75%)

CMYK

cmyk(42%, 0%, 22%, 25%)

Oklch

oklch(74.4% 0.101 159.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#9C8BB8

Wisteria · DarkGray · Lilac Purple

HEX

#9C8BB8

RGB

rgb(156, 139, 184)

HSL

hsl(263, 24%, 63%)

HSB

hsb(263, 24%, 72%)

CMYK

cmyk(15%, 24%, 0%, 28%)

Oklch

oklch(66.8% 0.068 301.9)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#6931C8

Deep Indigo · SlateBlue · Violet

HEX

#6931C8

RGB

rgb(105, 49, 200)

HSL

hsl(262, 61%, 49%)

HSB

hsb(262, 76%, 78%)

CMYK

cmyk(48%, 76%, 0%, 22%)

Oklch

oklch(48.0% 0.216 293.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#5744A0

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5744A0

RGB

rgb(87, 68, 160)

HSL

hsl(252, 40%, 45%)

HSB

hsb(252, 57%, 63%)

CMYK

cmyk(46%, 58%, 0%, 37%)

Oklch

oklch(45.6% 0.143 289.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55F5AB

F556A0

Analogous

56F55C

55F5AB

56F0F5

Triadic

55F5AB

AB56F5

F5AB56

Split-Comp.

55F5AB

F556F0

F55C56

Tetradic

55F5AB

5C56F5

F556A0

F0F556

Contrast Matrix WCAG 2.1 Contrast

55F5AB	70C095	9C8BB8	6931C8	5744A0
—	1.6 Fail	2.2 Fail	5.2 AA	5.5 AA
1.6 Fail	—	1.4 Fail	3.4 AA Large	3.5 AA Large
2.2 Fail	1.4 Fail	—	2.4 Fail	2.5 Fail
5.2 AA	3.4 AA Large	2.4 Fail	—	1.0 Fail
5.5 AA	3.5 AA Large	2.5 Fail	1.0 Fail	—

White BG

1.4Fail

2.2Fail

3.1AA Large

7.3AAA

7.7AAA

Black BG

15.0AAA

9.7AAA

6.8AA

2.9Fail

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9CBD

93939F

9594AD

5150A3

4F4F8A

Deuteranopia

9185C1

8E88A2

9697AA

54589B

505184

Tritanopia

5DCBCE

74A8A9

9BA5A3

668780

567874

Achromatopsia

BDBDBD

A3A3A3

959595

535353

545454

Shades & Tints Shades & Tints

#55F5AB

Dark

Light

#70C095

Dark

Light

#9C8BB8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55f5ab;
  --color-2: #70c095;
  --color-3: #9c8bb8;
  --color-4: #6931c8;
  --color-5: #5744a0;
}

SCSS

$color-1: #55f5ab;
$color-2: #70c095;
$color-3: #9c8bb8;
$color-4: #6931c8;
$color-5: #5744a0;

TAILWIND

colors: {
  'brand-1': '#55f5ab',
  'brand-2': '#70c095',
  'brand-3': '#9c8bb8',
  'brand-4': '#6931c8',
  'brand-5': '#5744a0',
}

RGB Array

[85, 245, 171], [112, 192, 149], [156, 139, 184], [105, 49, 200], [87, 68, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #55F5AB, #70C095, #9C8BB8, #6931C8, #5744A0 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: #55f5ab; --color-2: #70c095; --color-3: #9c8bb8; --color-4: #6931c8; --color-5: #5744a0. 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