#518494 + #B5BE15 + #B4DF37 + #663A38 + #570F1A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#518494

Slate Blue · SlateGray · Mint Ice

HEX

#518494

RGB

rgb(81, 132, 148)

HSL

hsl(194, 29%, 45%)

HSB

hsb(194, 45%, 58%)

CMYK

cmyk(45%, 11%, 0%, 42%)

Oklch

oklch(58.4% 0.060 219.9)

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

#B5BE15

Autumn Sage · GoldenRod · Honey Gold

HEX

#B5BE15

RGB

rgb(181, 190, 21)

HSL

hsl(63, 80%, 41%)

HSB

hsb(63, 89%, 75%)

CMYK

cmyk(5%, 0%, 89%, 25%)

Oklch

oklch(76.9% 0.168 113.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B4DF37

Grass Green · GreenYellow · Olive Green

HEX

#B4DF37

RGB

rgb(180, 223, 55)

HSL

hsl(75, 72%, 55%)

HSB

hsb(75, 75%, 87%)

CMYK

cmyk(19%, 0%, 75%, 13%)

Oklch

oklch(84.4% 0.190 123.4)

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

#663A38

Crimson · DarkOliveGreen · Wine Red

HEX

#663A38

RGB

rgb(102, 58, 56)

HSL

hsl(3, 29%, 31%)

HSB

hsb(3, 45%, 40%)

CMYK

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

Oklch

oklch(40.2% 0.063 23.0)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#570F1A

Vermilion · Maroon · Deep Berry

HEX

#570F1A

RGB

rgb(87, 15, 26)

HSL

hsl(351, 71%, 20%)

HSB

hsb(351, 83%, 34%)

CMYK

cmyk(0%, 83%, 70%, 66%)

Oklch

oklch(30.3% 0.103 17.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

518494

946151

Analogous

519482

518494

516394

Triadic

518494

945184

849451

Split-Comp.

518494

945163

948251

Tetradic

518494

825194

946151

639451

Contrast Matrix WCAG 2.1 Contrast

518494	B5BE15	B4DF37	663A38	570F1A
—	2.0 Fail	2.7 Fail	2.3 Fail	3.4 AA Large
2.0 Fail	—	1.3 Fail	4.6 AA	6.9 AA
2.7 Fail	1.3 Fail	—	6.1 AA	9.1 AAA
2.3 Fail	4.6 AA	6.1 AA	—	1.5 Fail
3.4 AA Large	6.9 AA	9.1 AAA	1.5 Fail	—

White BG

4.1AA Large

2.0Fail

1.5Fail

9.4AAA

14.1AAA

Black BG

5.1AA

10.3AAA

13.6AAA

2.2Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

676890

B9B93E

C7C760

535338

383717

Deuteranopia

64608F

B8B848

C4C169

565939

3C4117

Tritanopia

548D8C

B55E65

B68087

643939

531515

Achromatopsia

777777

A8A8A8

BFBFBF

474747

262626

Shades & Tints Shades & Tints

#518494

Dark

Light

#B5BE15

Dark

Light

#B4DF37

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #518494;
  --color-2: #b5be15;
  --color-3: #b4df37;
  --color-4: #663a38;
  --color-5: #570f1a;
}

SCSS

$color-1: #518494;
$color-2: #b5be15;
$color-3: #b4df37;
$color-4: #663a38;
$color-5: #570f1a;

TAILWIND

colors: {
  'brand-1': '#518494',
  'brand-2': '#b5be15',
  'brand-3': '#b4df37',
  'brand-4': '#663a38',
  'brand-5': '#570f1a',
}

RGB Array

[81, 132, 148], [181, 190, 21], [180, 223, 55], [102, 58, 56], [87, 15, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #518494, #B5BE15, #B4DF37, #663A38, #570F1A 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: #518494; --color-2: #b5be15; --color-3: #b4df37; --color-4: #663a38; --color-5: #570f1a. 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