#57673A + #211137 + #311A53 + #178ABE + #1A9CD8 · luxury - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#57673A

Grass Green · DarkOliveGreen · Forest Green

HEX

#57673A

RGB

rgb(87, 103, 58)

HSL

hsl(81, 28%, 32%)

HSB

hsb(81, 44%, 40%)

CMYK

cmyk(16%, 0%, 44%, 60%)

Oklch

oklch(48.9% 0.070 124.9)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#211137

Deep Indigo · MidnightBlue · Dark Purple

HEX

#211137

RGB

rgb(33, 17, 55)

HSL

hsl(265, 53%, 14%)

HSB

hsb(265, 69%, 22%)

CMYK

cmyk(40%, 69%, 0%, 78%)

Oklch

oklch(22.3% 0.072 300.1)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#311A53

Deep Indigo · MidnightBlue · Eggplant

HEX

#311A53

RGB

rgb(49, 26, 83)

HSL

hsl(264, 52%, 21%)

HSB

hsb(264, 69%, 33%)

CMYK

cmyk(41%, 69%, 0%, 67%)

Oklch

oklch(28.3% 0.099 298.4)

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

#178ABE

Lake Blue · LightSeaGreen · Mint Ice

HEX

#178ABE

RGB

rgb(23, 138, 190)

HSL

hsl(199, 78%, 42%)

HSB

hsb(199, 88%, 75%)

CMYK

cmyk(88%, 27%, 0%, 25%)

Oklch

oklch(59.9% 0.122 235.3)

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

#1A9CD8

Lake Blue · DodgerBlue · Mint Ice

HEX

#1A9CD8

RGB

rgb(26, 156, 216)

HSL

hsl(199, 79%, 47%)

HSB

hsb(199, 88%, 85%)

CMYK

cmyk(88%, 28%, 0%, 15%)

Oklch

oklch(65.6% 0.135 236.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57673A

4B3B68

Analogous

68623B

57673A

42683B

Triadic

57673A

3B5868

683B58

Split-Comp.

57673A

3B4268

623B68

Tetradic

57673A

3B6862

4B3B68

683B42

Contrast Matrix WCAG 2.1 Contrast

57673A	211137	311A53	178ABE	1A9CD8
—	2.8 Fail	2.4 Fail	1.6 Fail	2.0 Fail
2.8 Fail	—	1.2 Fail	4.5 AA	5.7 AA
2.4 Fail	1.2 Fail	—	3.9 AA Large	4.8 AA
1.6 Fail	4.5 AA	3.9 AA Large	—	1.3 Fail
2.0 Fail	5.7 AA	4.8 AA	1.3 Fail	—

White BG

6.2AA

17.5AAA

15.0AAA

3.9AA Large

3.1AA Large

Black BG

3.4AA Large

1.2Fail

1.4Fail

5.4AA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E45

1A1A2E

272745

494AB1

5253C9

Deuteranopia

5D5C48

1B1C2C

282A42

423AAE

4B41C6

Tritanopia

584D4F

202725

303A38

1DA7A5

21BEBC

Achromatopsia

5D5D5D

1A1A1A

272727

6E6E6E

7C7C7C

Shades & Tints Shades & Tints

#57673A

Dark

Light

#211137

Dark

Light

#311A53

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57673a;
  --color-2: #211137;
  --color-3: #311a53;
  --color-4: #178abe;
  --color-5: #1a9cd8;
}

SCSS

$color-1: #57673a;
$color-2: #211137;
$color-3: #311a53;
$color-4: #178abe;
$color-5: #1a9cd8;

TAILWIND

colors: {
  'brand-1': '#57673a',
  'brand-2': '#211137',
  'brand-3': '#311a53',
  'brand-4': '#178abe',
  'brand-5': '#1a9cd8',
}

RGB Array

[87, 103, 58], [33, 17, 55], [49, 26, 83], [23, 138, 190], [26, 156, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This luxury-style palette of #57673A, #211137, #311A53, #178ABE, #1A9CD8 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: #57673a; --color-2: #211137; --color-3: #311a53; --color-4: #178abe; --color-5: #1a9cd8. 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 luxury-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