#37A9BB + #5B9CC6 + #7E8FD2 + #A281DD + #C574E8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#37A9BB

Lake Blue · LightSeaGreen · Mint Ice

HEX

#37A9BB

RGB

rgb(55, 169, 187)

HSL

hsl(188, 55%, 47%)

HSB

hsb(188, 71%, 73%)

CMYK

cmyk(71%, 10%, 0%, 27%)

Oklch

oklch(68.0% 0.102 210.2)

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

#5B9CC6

Slate Blue · SteelBlue · Navy Blue

HEX

#5B9CC6

RGB

rgb(91, 156, 198)

HSL

hsl(204, 48%, 57%)

HSB

hsb(204, 54%, 78%)

CMYK

cmyk(54%, 21%, 0%, 22%)

Oklch

oklch(66.6% 0.091 238.6)

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

#7E8FD2

Azure · CornflowerBlue · Cobalt Blue

HEX

#7E8FD2

RGB

rgb(126, 143, 210)

HSL

hsl(228, 48%, 66%)

HSB

hsb(228, 40%, 82%)

CMYK

cmyk(40%, 32%, 0%, 18%)

Oklch

oklch(66.4% 0.102 272.5)

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

#A281DD

Wisteria · MediumSlateBlue · Lilac Purple

HEX

#A281DD

RGB

rgb(162, 129, 221)

HSL

hsl(262, 58%, 69%)

HSB

hsb(262, 42%, 87%)

CMYK

cmyk(27%, 42%, 0%, 13%)

Oklch

oklch(67.2% 0.136 299.2)

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

#C574E8

Lilac · Orchid · Lilac Purple

HEX

#C574E8

RGB

rgb(197, 116, 232)

HSL

hsl(282, 72%, 68%)

HSB

hsb(282, 50%, 91%)

CMYK

cmyk(15%, 50%, 0%, 9%)

Oklch

oklch(69.2% 0.181 314.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

37A9BB

BA4836

Analogous

36BA89

37A9BB

3666BA

Triadic

37A9BB

BA36A8

A8BA36

Split-Comp.

37A9BB

BA3666

BA8936

Tetradic

37A9BB

8936BA

BA4836

66BA36

Contrast Matrix WCAG 2.1 Contrast

37A9BB	5B9CC6	7E8FD2	A281DD	C574E8
—	1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

2.8Fail

3.0Fail

3.1AA Large

3.0Fail

Black BG

7.6AAA

7.0AAA

6.7AA

7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6869B7

7778BC

8586C2

9493C7

A2A1CC

Deuteranopia

6259B6

736FB9

8483BE

9698C1

A7ADC5

Tritanopia

3DB3B2

5EB4B2

7FB5B2

A0B5B1

C1B6B1

Achromatopsia

898989

8D8D8D

929292

959595

999999

Shades & Tints Shades & Tints

#37A9BB

Dark

Light

#5B9CC6

Dark

Light

#7E8FD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #37a9bb;
  --color-2: #5b9cc6;
  --color-3: #7e8fd2;
  --color-4: #a281dd;
  --color-5: #c574e8;
}

SCSS

$color-1: #37a9bb;
$color-2: #5b9cc6;
$color-3: #7e8fd2;
$color-4: #a281dd;
$color-5: #c574e8;

TAILWIND

colors: {
  'brand-1': '#37a9bb',
  'brand-2': '#5b9cc6',
  'brand-3': '#7e8fd2',
  'brand-4': '#a281dd',
  'brand-5': '#c574e8',
}

RGB Array

[55, 169, 187], [91, 156, 198], [126, 143, 210], [162, 129, 221], [197, 116, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #37A9BB, #5B9CC6, #7E8FD2, #A281DD, #C574E8 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: #37a9bb; --color-2: #5b9cc6; --color-3: #7e8fd2; --color-4: #a281dd; --color-5: #c574e8. 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