#48A397 + #45858D + #426883 + #3F4A78 + #3C2C6E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#48A397

Mineral Blue · CadetBlue · Mint Ice

HEX

#48A397

RGB

rgb(72, 163, 151)

HSL

hsl(172, 39%, 46%)

HSB

hsb(172, 56%, 64%)

CMYK

cmyk(56%, 0%, 7%, 36%)

Oklch

oklch(65.7% 0.089 183.7)

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

#45858D

Slate Blue · SteelBlue · Mint Ice

HEX

#45858D

RGB

rgb(69, 133, 141)

HSL

hsl(187, 34%, 41%)

HSB

hsb(187, 51%, 55%)

CMYK

cmyk(51%, 6%, 0%, 45%)

Oklch

oklch(57.7% 0.067 206.1)

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

#426883

Slate Blue · DarkSlateBlue · Prussian Blue

HEX

#426883

RGB

rgb(66, 104, 131)

HSL

hsl(205, 33%, 39%)

HSB

hsb(205, 50%, 51%)

CMYK

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

Oklch

oklch(50.0% 0.061 240.5)

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

#3F4A78

Indigo · DarkSlateBlue · Prussian Blue

HEX

#3F4A78

RGB

rgb(63, 74, 120)

HSL

hsl(228, 31%, 36%)

HSB

hsb(228, 48%, 47%)

CMYK

cmyk(48%, 38%, 0%, 53%)

Oklch

oklch(42.1% 0.078 272.5)

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

#3C2C6E

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX

#3C2C6E

RGB

rgb(60, 44, 110)

HSL

hsl(255, 43%, 30%)

HSB

hsb(255, 60%, 43%)

CMYK

cmyk(45%, 60%, 0%, 57%)

Oklch

oklch(34.9% 0.110 290.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

48A397

A34854

Analogous

48A369

48A397

4881A3

Triadic

48A397

9748A3

A39748

Split-Comp.

48A397

A34881

A36948

Tetradic

48A397

6948A3

A34854

81A348

Contrast Matrix WCAG 2.1 Contrast

48A397	45858D	426883	3F4A78	3C2C6E
—	1.4 Fail	2.0 Fail	2.8 Fail	3.9 AA Large
1.4 Fail	—	1.4 Fail	2.0 Fail	2.8 Fail
2.0 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.8 Fail	2.0 Fail	1.4 Fail	—	1.4 Fail
3.9 AA Large	2.8 Fail	2.0 Fail	1.4 Fail	—

White BG

3.0AA Large

4.2AA Large

5.9AA

8.5AAA

11.8AAA

Black BG

7.0AA

5.0AA

3.5AA Large

2.5Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F709A

61618B

52537C

44446D

35355E

Deuteranopia

6A639B

5D588B

504D7B

43426A

36375A

Tritanopia

4D9C9D

488A89

447776

406462

3B514F

Achromatopsia

868686

737373

606060

4C4C4C

383838

Shades & Tints Shades & Tints

#48A397

Dark

Light

#45858D

Dark

Light

#426883

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #48a397;
  --color-2: #45858d;
  --color-3: #426883;
  --color-4: #3f4a78;
  --color-5: #3c2c6e;
}

SCSS

$color-1: #48a397;
$color-2: #45858d;
$color-3: #426883;
$color-4: #3f4a78;
$color-5: #3c2c6e;

TAILWIND

colors: {
  'brand-1': '#48a397',
  'brand-2': '#45858d',
  'brand-3': '#426883',
  'brand-4': '#3f4a78',
  'brand-5': '#3c2c6e',
}

RGB Array

[72, 163, 151], [69, 133, 141], [66, 104, 131], [63, 74, 120], [60, 44, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #48A397, #45858D, #426883, #3F4A78, #3C2C6E 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: #48a397; --color-2: #45858d; --color-3: #426883; --color-4: #3f4a78; --color-5: #3c2c6e. 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