#FD314F + #BA364A + #965A65 + #51636E + #414D54 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FD314F

Vermilion · Crimson · Passion Red

HEX

#FD314F

RGB

rgb(253, 49, 79)

HSL

hsl(351, 98%, 59%)

HSB

hsb(351, 81%, 99%)

CMYK

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

Oklch

oklch(64.8% 0.234 19.9)

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

#BA364A

Crimson · Brown · Passion Red

HEX

#BA364A

RGB

rgb(186, 54, 74)

HSL

hsl(351, 55%, 47%)

HSB

hsb(351, 71%, 73%)

CMYK

cmyk(0%, 71%, 60%, 27%)

Oklch

oklch(53.5% 0.168 16.4)

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

#965A65

Crimson · DimGray · Passion Red

HEX

#965A65

RGB

rgb(150, 90, 101)

HSL

hsl(349, 25%, 47%)

HSB

hsb(349, 40%, 59%)

CMYK

cmyk(0%, 40%, 33%, 41%)

Oklch

oklch(53.8% 0.080 8.2)

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

#51636E

Slate Blue · DimGray · Prussian Blue

HEX

#51636E

RGB

rgb(81, 99, 110)

HSL

hsl(203, 15%, 37%)

HSB

hsb(203, 26%, 43%)

CMYK

cmyk(26%, 10%, 0%, 57%)

Oklch

oklch(48.9% 0.028 235.0)

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

#414D54

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#414D54

RGB

rgb(65, 77, 84)

HSL

hsl(202, 13%, 29%)

HSB

hsb(202, 23%, 33%)

CMYK

cmyk(23%, 8%, 0%, 67%)

Oklch

oklch(41.2% 0.019 233.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD314F

30FDDE

Analogous

FD30B5

FD314F

FD7830

Triadic

FD314F

4FFD30

304FFD

Split-Comp.

FD314F

30FD78

30B5FD

Tetradic

FD314F

B5FD30

30FDDE

7830FD

Contrast Matrix WCAG 2.1 Contrast

FD314F	BA364A	965A65	51636E	414D54
—	1.5 Fail	1.5 Fail	1.7 Fail	2.4 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.5 Fail
1.5 Fail	1.1 Fail	—	1.2 Fail	1.6 Fail
1.7 Fail	1.1 Fail	1.2 Fail	—	1.4 Fail
2.4 Fail	1.5 Fail	1.6 Fail	1.4 Fail	—

White BG

3.7AA Large

5.7AA

5.3AA

6.3AA

8.7AAA

Black BG

5.7AA

3.7AA Large

3.9AA Large

3.4AA Large

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A348

818045

7C7B62

59596B

464652

Deuteranopia

B1C046

899244

808462

58566B

464552

Tritanopia

F34241

B34141

936060

526969

425151

Achromatopsia

717171

606060

6D6D6D

5F5F5F

4A4A4A

Shades & Tints Shades & Tints

#FD314F

Dark

Light

#BA364A

Dark

Light

#965A65

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd314f;
  --color-2: #ba364a;
  --color-3: #965a65;
  --color-4: #51636e;
  --color-5: #414d54;
}

SCSS

$color-1: #fd314f;
$color-2: #ba364a;
$color-3: #965a65;
$color-4: #51636e;
$color-5: #414d54;

TAILWIND

colors: {
  'brand-1': '#fd314f',
  'brand-2': '#ba364a',
  'brand-3': '#965a65',
  'brand-4': '#51636e',
  'brand-5': '#414d54',
}

RGB Array

[253, 49, 79], [186, 54, 74], [150, 90, 101], [81, 99, 110], [65, 77, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD314F, #BA364A, #965A65, #51636E, #414D54 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: #fd314f; --color-2: #ba364a; --color-3: #965a65; --color-4: #51636e; --color-5: #414d54. 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