#5A6971 + #A06974 + #DA5D72 + #FC3165 + #FF0156 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5A6971

Slate Blue · DimGray · Prussian Blue

HEX

#5A6971

RGB

rgb(90, 105, 113)

HSL

hsl(201, 11%, 40%)

HSB

hsb(201, 20%, 44%)

CMYK

cmyk(20%, 7%, 0%, 56%)

Oklch

oklch(51.1% 0.022 231.1)

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

#A06974

Crimson · Gray · Passion Red

HEX

#A06974

RGB

rgb(160, 105, 116)

HSL

hsl(348, 22%, 52%)

HSB

hsb(348, 34%, 63%)

CMYK

cmyk(0%, 34%, 28%, 37%)

Oklch

oklch(58.2% 0.072 6.5)

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

#DA5D72

Peach Pink · LightCoral · Coral Red

HEX

#DA5D72

RGB

rgb(218, 93, 114)

HSL

hsl(350, 63%, 61%)

HSB

hsb(350, 57%, 85%)

CMYK

cmyk(0%, 57%, 48%, 15%)

Oklch

oklch(64.1% 0.157 12.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FC3165

Vermilion · DeepPink · Passion Red

HEX

#FC3165

RGB

rgb(252, 49, 101)

HSL

hsl(345, 97%, 59%)

HSB

hsb(345, 81%, 99%)

CMYK

cmyk(0%, 81%, 60%, 1%)

Oklch

oklch(65.0% 0.234 13.1)

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

#FF0156

Dark Violet · Crimson · Camellia

HEX

#FF0156

RGB

rgb(255, 1, 86)

HSL

hsl(340, 100%, 50%)

HSB

hsb(340, 100%, 100%)

CMYK

cmyk(0%, 100%, 66%, 0%)

Oklch

oklch(63.6% 0.254 15.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A6971

71635B

Analogous

5B716E

5A6971

5B5E71

Triadic

5A6971

715B69

69715B

Split-Comp.

5A6971

715B5E

716E5B

Tetradic

5A6971

6E5B71

71635B

5E715B

Contrast Matrix WCAG 2.1 Contrast

5A6971	A06974	DA5D72	FC3165	FF0156
—	1.3 Fail	1.6 Fail	1.6 Fail	1.5 Fail
1.3 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.6 Fail	1.2 Fail	—	1.0 Fail	1.1 Fail
1.6 Fail	1.2 Fail	1.0 Fail	—	1.1 Fail
1.5 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

5.7AA

4.4AA Large

3.6AA Large

3.9AA Large

Black BG

3.7AA Large

4.8AA

5.8AA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

60616F

888871

A4A36D

A4A258

918F41

Deuteranopia

605F6F

8B9071

ABB56C

B0BF55

A0B33C

Tritanopia

5B6E6D

9D6F6F

D46968

F24E4C

F2312E

Achromatopsia

656565

7B7B7B

858585

747474

575757

Shades & Tints Shades & Tints

#5A6971

Dark

Light

#A06974

Dark

Light

#DA5D72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a6971;
  --color-2: #a06974;
  --color-3: #da5d72;
  --color-4: #fc3165;
  --color-5: #ff0156;
}

SCSS

$color-1: #5a6971;
$color-2: #a06974;
$color-3: #da5d72;
$color-4: #fc3165;
$color-5: #ff0156;

TAILWIND

colors: {
  'brand-1': '#5a6971',
  'brand-2': '#a06974',
  'brand-3': '#da5d72',
  'brand-4': '#fc3165',
  'brand-5': '#ff0156',
}

RGB Array

[90, 105, 113], [160, 105, 116], [218, 93, 114], [252, 49, 101], [255, 1, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A6971, #A06974, #DA5D72, #FC3165, #FF0156 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: #5a6971; --color-2: #a06974; --color-3: #da5d72; --color-4: #fc3165; --color-5: #ff0156. 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