#52A39E + #255E5B + #25475E + #3D255E + #8F7BB0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#52A39E

Mineral Blue · CadetBlue · Mint Ice

HEX

#52A39E

RGB

rgb(82, 163, 158)

HSL

hsl(176, 33%, 48%)

HSB

hsb(176, 50%, 64%)

CMYK

cmyk(50%, 0%, 3%, 36%)

Oklch

oklch(66.3% 0.080 190.1)

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

#255E5B

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#255E5B

RGB

rgb(37, 94, 91)

HSL

hsl(177, 44%, 26%)

HSB

hsb(177, 61%, 37%)

CMYK

cmyk(61%, 0%, 3%, 63%)

Oklch

oklch(44.4% 0.059 190.5)

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

#25475E

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#25475E

RGB

rgb(37, 71, 94)

HSL

hsl(204, 44%, 26%)

HSB

hsb(204, 61%, 37%)

CMYK

cmyk(61%, 24%, 0%, 63%)

Oklch

oklch(38.3% 0.056 240.0)

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

#3D255E

Deep Indigo · MidnightBlue · Eggplant

HEX

#3D255E

RGB

rgb(61, 37, 94)

HSL

hsl(265, 44%, 26%)

HSB

hsb(265, 61%, 37%)

CMYK

cmyk(35%, 61%, 0%, 63%)

Oklch

oklch(32.5% 0.099 300.4)

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

#8F7BB0

Deep Indigo · LightSlateGray · Violet

HEX

#8F7BB0

RGB

rgb(143, 123, 176)

HSL

hsl(263, 25%, 59%)

HSB

hsb(263, 30%, 69%)

CMYK

cmyk(19%, 30%, 0%, 31%)

Oklch

oklch(62.1% 0.081 301.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52A39E

A35257

Analogous

52A375

52A39E

5280A3

Triadic

52A39E

9D52A3

A39D52

Split-Comp.

52A39E

A35280

A37552

Tetradic

52A39E

7552A3

A35257

80A352

Contrast Matrix WCAG 2.1 Contrast

52A39E	255E5B	25475E	3D255E	8F7BB0
—	2.5 Fail	3.3 AA Large	4.4 AA Large	1.3 Fail
2.5 Fail	—	1.3 Fail	1.7 Fail	2.0 Fail
3.3 AA Large	1.3 Fail	—	1.3 Fail	2.6 Fail
4.4 AA Large	1.7 Fail	1.3 Fail	—	3.5 AA Large
1.3 Fail	2.0 Fail	2.6 Fail	3.5 AA Large	—

White BG

3.0Fail

7.4AAA

9.8AAA

12.9AAA

3.7AA Large

Black BG

7.1AAA

2.8Fail

2.1Fail

1.6Fail

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

75769F

3E3E5C

343458

333250

8686A3

Deuteranopia

706AA0

3A365C

322F57

34364D

8889A0

Tritanopia

56A0A0

285C5C

275453

3C4543

8E9997

Achromatopsia

8A8A8A

4D4D4D

3F3F3F

333333

878787

Shades & Tints Shades & Tints

#52A39E

Dark

Light

#255E5B

Dark

Light

#25475E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52a39e;
  --color-2: #255e5b;
  --color-3: #25475e;
  --color-4: #3d255e;
  --color-5: #8f7bb0;
}

SCSS

$color-1: #52a39e;
$color-2: #255e5b;
$color-3: #25475e;
$color-4: #3d255e;
$color-5: #8f7bb0;

TAILWIND

colors: {
  'brand-1': '#52a39e',
  'brand-2': '#255e5b',
  'brand-3': '#25475e',
  'brand-4': '#3d255e',
  'brand-5': '#8f7bb0',
}

RGB Array

[82, 163, 158], [37, 94, 91], [37, 71, 94], [61, 37, 94], [143, 123, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #52A39E, #255E5B, #25475E, #3D255E, #8F7BB0 is ideal for: tech websites, dark mode UIs, game UIs. 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: #52a39e; --color-2: #255e5b; --color-3: #25475e; --color-4: #3d255e; --color-5: #8f7bb0. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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