#54D2E8 + #6AB5DE + #7A9ECC + #908CC2 + #9E7BB8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#54D2E8

Sky Blue · MediumTurquoise · Lake Green

HEX

#54D2E8

RGB

rgb(84, 210, 232)

HSL

hsl(189, 76%, 62%)

HSB

hsb(189, 64%, 91%)

CMYK

cmyk(64%, 9%, 0%, 9%)

Oklch

oklch(80.2% 0.114 211.1)

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

#6AB5DE

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#6AB5DE

RGB

rgb(106, 181, 222)

HSL

hsl(201, 64%, 64%)

HSB

hsb(201, 52%, 87%)

CMYK

cmyk(52%, 18%, 0%, 13%)

Oklch

oklch(74.0% 0.095 234.0)

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

#7A9ECC

Azure · CornflowerBlue · Cobalt Blue

HEX

#7A9ECC

RGB

rgb(122, 158, 204)

HSL

hsl(214, 45%, 64%)

HSB

hsb(214, 40%, 80%)

CMYK

cmyk(40%, 23%, 0%, 20%)

Oklch

oklch(69.0% 0.079 254.8)

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

#908CC2

Wisteria · DarkGray · Cobalt Blue

HEX

#908CC2

RGB

rgb(144, 140, 194)

HSL

hsl(244, 31%, 65%)

HSB

hsb(244, 28%, 76%)

CMYK

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

Oklch

oklch(66.4% 0.080 287.4)

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

#9E7BB8

Dark Plum · DarkGray · Violet

HEX

#9E7BB8

RGB

rgb(158, 123, 184)

HSL

hsl(274, 30%, 60%)

HSB

hsb(274, 33%, 72%)

CMYK

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

Oklch

oklch(63.9% 0.097 310.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54D2E8

E86B54

Analogous

54E8B4

54D2E8

5488E8

Triadic

54D2E8

E854D2

D2E854

Split-Comp.

54D2E8

E85488

E8B454

Tetradic

54D2E8

B454E8

E86B54

88E854

Contrast Matrix WCAG 2.1 Contrast

54D2E8	6AB5DE	7A9ECC	908CC2	9E7BB8
—	1.3 Fail	1.5 Fail	1.8 Fail	2.0 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.8 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.0 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

1.8Fail

2.3Fail

2.8Fail

3.1AA Large

3.5AA Large

Black BG

11.8AAA

9.3AAA

7.6AAA

6.7AA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8CE3

8A8BD4

8A8AC1

8E8EB5

8F8FA9

Deuteranopia

837AE1

8681D2

8885BE

8F8FB2

9194A6

Tritanopia

5ADEDE

6ECCCB

7CB8B6

90ABA8

9C9E9B

Achromatopsia

AFAFAF

A3A3A3

989898

939393

8C8C8C

Shades & Tints Shades & Tints

#54D2E8

Dark

Light

#6AB5DE

Dark

Light

#7A9ECC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54d2e8;
  --color-2: #6ab5de;
  --color-3: #7a9ecc;
  --color-4: #908cc2;
  --color-5: #9e7bb8;
}

SCSS

$color-1: #54d2e8;
$color-2: #6ab5de;
$color-3: #7a9ecc;
$color-4: #908cc2;
$color-5: #9e7bb8;

TAILWIND

colors: {
  'brand-1': '#54d2e8',
  'brand-2': '#6ab5de',
  'brand-3': '#7a9ecc',
  'brand-4': '#908cc2',
  'brand-5': '#9e7bb8',
}

RGB Array

[84, 210, 232], [106, 181, 222], [122, 158, 204], [144, 140, 194], [158, 123, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54D2E8, #6AB5DE, #7A9ECC, #908CC2, #9E7BB8 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: #54d2e8; --color-2: #6ab5de; --color-3: #7a9ecc; --color-4: #908cc2; --color-5: #9e7bb8. 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