#20475C + #835E9C + #376E78 + #148792 + #45A3BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#20475C

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#20475C

RGB

rgb(32, 71, 92)

HSL

hsl(201, 48%, 24%)

HSB

hsb(201, 65%, 36%)

CMYK

cmyk(65%, 23%, 0%, 64%)

Oklch

oklch(37.9% 0.057 234.6)

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

#835E9C

Dark Plum · SlateGray · Violet

HEX

#835E9C

RGB

rgb(131, 94, 156)

HSL

hsl(276, 25%, 49%)

HSB

hsb(276, 40%, 61%)

CMYK

cmyk(16%, 40%, 0%, 39%)

Oklch

oklch(54.5% 0.102 310.8)

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

#376E78

Slate Blue · SeaGreen · Mint Ice

HEX

#376E78

RGB

rgb(55, 110, 120)

HSL

hsl(189, 37%, 34%)

HSB

hsb(189, 54%, 47%)

CMYK

cmyk(54%, 8%, 0%, 53%)

Oklch

oklch(50.5% 0.060 210.8)

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

#148792

Lake Blue · Teal · Mint Ice

HEX

#148792

RGB

rgb(20, 135, 146)

HSL

hsl(185, 76%, 33%)

HSB

hsb(185, 86%, 57%)

CMYK

cmyk(86%, 8%, 0%, 43%)

Oklch

oklch(57.1% 0.094 205.3)

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

#45A3BA

Slate Blue · SteelBlue · Mint Ice

HEX

#45A3BA

RGB

rgb(69, 163, 186)

HSL

hsl(192, 46%, 50%)

HSB

hsb(192, 63%, 73%)

CMYK

cmyk(63%, 12%, 0%, 27%)

Oklch

oklch(66.9% 0.094 216.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20475C

5B3420

Analogous

205B52

20475C

20295B

Triadic

20475C

5B2046

465B20

Split-Comp.

20475C

5B2029

5B5220

Tetradic

20475C

52205B

5B3420

295B20

Contrast Matrix WCAG 2.1 Contrast

20475C	835E9C	376E78	148792	45A3BA
—	1.9 Fail	1.7 Fail	2.3 Fail	3.4 AA Large
1.9 Fail	—	1.1 Fail	1.2 Fail	1.8 Fail
1.7 Fail	1.1 Fail	—	1.3 Fail	2.0 Fail
2.3 Fail	1.2 Fail	1.3 Fail	—	1.5 Fail
3.4 AA Large	1.8 Fail	2.0 Fail	1.5 Fail	—

White BG

9.9AAA

5.2AA

5.7AA

4.3AA Large

2.9Fail

Black BG

2.1Fail

4.0AA Large

3.7AA Large

4.9AA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313157

73738D

4F4F76

46478F

6E6FB4

Deuteranopia

2F2C56

757889

4C4875

3F378F

6861B3

Tritanopia

225352

81817F

3A7473

1A8D8D

4AB0AF

Achromatopsia

3E3E3E

707070

5F5F5F

666666

8A8A8A

Shades & Tints Shades & Tints

#20475C

Dark

Light

#835E9C

Dark

Light

#376E78

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20475c;
  --color-2: #835e9c;
  --color-3: #376e78;
  --color-4: #148792;
  --color-5: #45a3ba;
}

SCSS

$color-1: #20475c;
$color-2: #835e9c;
$color-3: #376e78;
$color-4: #148792;
$color-5: #45a3ba;

TAILWIND

colors: {
  'brand-1': '#20475c',
  'brand-2': '#835e9c',
  'brand-3': '#376e78',
  'brand-4': '#148792',
  'brand-5': '#45a3ba',
}

RGB Array

[32, 71, 92], [131, 94, 156], [55, 110, 120], [20, 135, 146], [69, 163, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20475C, #835E9C, #376E78, #148792, #45A3BA 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: #20475c; --color-2: #835e9c; --color-3: #376e78; --color-4: #148792; --color-5: #45a3ba. 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