#539FA2 + #4F797A + #555E5F + #493B3C + #350404 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#539FA2

Slate Blue · CadetBlue · Mint Ice

HEX

#539FA2

RGB

rgb(83, 159, 162)

HSL

hsl(182, 32%, 48%)

HSB

hsb(182, 49%, 64%)

CMYK

cmyk(49%, 2%, 0%, 36%)

Oklch

oklch(65.5% 0.075 198.9)

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

#4F797A

Slate Blue · DimGray · Mint Ice

HEX

#4F797A

RGB

rgb(79, 121, 122)

HSL

hsl(181, 21%, 39%)

HSB

hsb(181, 35%, 48%)

CMYK

cmyk(35%, 1%, 0%, 52%)

Oklch

oklch(54.6% 0.047 197.8)

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

#555E5F

Ink Gray · DimGray · Charcoal

HEX

#555E5F

RGB

rgb(85, 94, 95)

HSL

hsl(186, 6%, 35%)

HSB

hsb(186, 11%, 37%)

CMYK

cmyk(11%, 1%, 0%, 63%)

Oklch

oklch(47.4% 0.011 204.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#493B3C

Crimson · DarkSlateGray · Wine Red

HEX

#493B3C

RGB

rgb(73, 59, 60)

HSL

hsl(356, 11%, 26%)

HSB

hsb(356, 19%, 29%)

CMYK

cmyk(0%, 19%, 18%, 71%)

Oklch

oklch(36.8% 0.020 13.2)

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

#350404

Vermilion · Black · Deep Berry

HEX

#350404

RGB

rgb(53, 4, 4)

HSL

hsl(0, 86%, 11%)

HSB

hsb(0, 92%, 21%)

CMYK

cmyk(0%, 92%, 92%, 79%)

Oklch

oklch(21.4% 0.078 26.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

539FA2

A25653

Analogous

53A27D

539FA2

5378A2

Triadic

539FA2

A2539F

9FA253

Split-Comp.

539FA2

A25378

A27D53

Tetradic

539FA2

7D53A2

A25653

78A253

Contrast Matrix WCAG 2.1 Contrast

539FA2	4F797A	555E5F	493B3C	350404
—	1.6 Fail	2.2 Fail	3.5 AA Large	5.9 AA
1.6 Fail	—	1.4 Fail	2.2 Fail	3.7 AA Large
2.2 Fail	1.4 Fail	—	1.6 Fail	2.7 Fail
3.5 AA Large	2.2 Fail	1.6 Fail	—	1.7 Fail
5.9 AA	3.7 AA Large	2.7 Fail	1.7 Fail	—

White BG

3.1AA Large

4.8AA

6.7AA

10.6AAA

17.9AAA

Black BG

6.8AA

4.3AA Large

3.2AA Large

2.0Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475A1

61627A

59595F

43433C

201F04

Deuteranopia

706AA1

5F5C7A

58585F

44453C

232604

Tritanopia

57A1A1

517A7A

555F5F

483C3C

330404

Achromatopsia

898989

6D6D6D

5B5B5B

3F3F3F

131313

Shades & Tints Shades & Tints

#539FA2

Dark

Light

#4F797A

Dark

Light

#555E5F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #539fa2;
  --color-2: #4f797a;
  --color-3: #555e5f;
  --color-4: #493b3c;
  --color-5: #350404;
}

SCSS

$color-1: #539fa2;
$color-2: #4f797a;
$color-3: #555e5f;
$color-4: #493b3c;
$color-5: #350404;

TAILWIND

colors: {
  'brand-1': '#539fa2',
  'brand-2': '#4f797a',
  'brand-3': '#555e5f',
  'brand-4': '#493b3c',
  'brand-5': '#350404',
}

RGB Array

[83, 159, 162], [79, 121, 122], [85, 94, 95], [73, 59, 60], [53, 4, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #539FA2, #4F797A, #555E5F, #493B3C, #350404 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: #539fa2; --color-2: #4f797a; --color-3: #555e5f; --color-4: #493b3c; --color-5: #350404. 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 earth-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