← Back to Editor

#475057 · #536F66 · #A26060 · #D35257 · #FF3184

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#475057

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#475057
RGB
rgb(71, 80, 87)
HSL
hsl(206, 10%, 31%)
HSB
hsb(206, 18%, 34%)
CMYK
cmyk(18%, 8%, 0%, 66%)
Oklch
oklch(42.6% 0.016 241.3)

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

#536F66

Mineral Blue · DimGray · Mint Ice

HEX
#536F66
RGB
rgb(83, 111, 102)
HSL
hsl(161, 14%, 38%)
HSB
hsb(161, 25%, 44%)
CMYK
cmyk(25%, 0%, 8%, 56%)
Oklch
oklch(51.7% 0.036 173.1)

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

#A26060

Crimson · Sienna · Passion Red

HEX
#A26060
RGB
rgb(162, 96, 96)
HSL
hsl(0, 26%, 51%)
HSB
hsb(0, 41%, 64%)
CMYK
cmyk(0%, 41%, 41%, 36%)
Oklch
oklch(56.3% 0.086 20.1)

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

#D35257

Crimson · Tomato · Passion Red

HEX
#D35257
RGB
rgb(211, 82, 87)
HSL
hsl(358, 59%, 57%)
HSB
hsb(358, 61%, 83%)
CMYK
cmyk(0%, 61%, 59%, 17%)
Oklch
oklch(61.0% 0.163 21.0)

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

#FF3184

Dark Violet · DeepPink · Rose Pink

HEX
#FF3184
RGB
rgb(255, 49, 132)
HSL
hsl(336, 100%, 60%)
HSB
hsb(336, 81%, 100%)
CMYK
cmyk(0%, 81%, 48%, 0%)
Oklch
oklch(66.3% 0.241 3.2)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

475057
574E47

Analogous

475756
475057
474857

Triadic

475057
574750
505747

Split-Comp.

475057
574748
575647

Tetradic

475057
564757
574E47
485747

Contrast Matrix WCAG 2.1 Contrast

475057
536F66
A26060
D35257
FF3184
—
1.5
Fail
1.7
Fail
2.0
Fail
2.4
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.7
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
White BG
8.2AAA
5.5AA
4.8AA
4.1AA Large
3.5AA Large
Black BG
2.6Fail
3.8AA Large
4.4AA Large
5.1AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B55
5F5F68
858560
9B9A56
A6A470

Deuteranopia

4A4A55
5E5B69
898E60
A3AC56
B2C16B

Tritanopia

475454
546A6A
9F6060
CD5555
F5605D

Achromatopsia

4E4E4E
666666
747474
797979
787878

Shades & Tints Shades & Tints

#475057

Dark
Light

#536F66

Dark
Light

#A26060

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #475057;
  --color-2: #536f66;
  --color-3: #a26060;
  --color-4: #d35257;
  --color-5: #ff3184;
}

SCSS

$color-1: #475057;
$color-2: #536f66;
$color-3: #a26060;
$color-4: #d35257;
$color-5: #ff3184;

TAILWIND

colors: {
  'brand-1': '#475057',
  'brand-2': '#536f66',
  'brand-3': '#a26060',
  'brand-4': '#d35257',
  'brand-5': '#ff3184',
}

RGB Array

[71, 80, 87], [83, 111, 102], [162, 96, 96], [211, 82, 87], [255, 49, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #475057, #536F66, #A26060, #D35257, #FF3184 is ideal for: corporate websites, product showcases, portfolios. 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: #475057; --color-2: #536f66; --color-3: #a26060; --color-4: #d35257; --color-5: #ff3184. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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