← Back to Editor

#F51653 · #BF638F · #BF84B5 · #220037 · #140F1B

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 LibraryData Visualization

Color Details Color Details

#F51653

Dark Violet · Crimson · Rose Pink

HEX
#F51653
RGB
rgb(245, 22, 83)
HSL
hsl(344, 92%, 52%)
HSB
hsb(344, 91%, 96%)
CMYK
cmyk(0%, 91%, 66%, 4%)
Oklch
oklch(62.1% 0.241 15.8)

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

#BF638F

Dark Violet · LightCoral · Rose Pink

HEX
#BF638F
RGB
rgb(191, 99, 143)
HSL
hsl(331, 42%, 57%)
HSB
hsb(331, 48%, 75%)
CMYK
cmyk(0%, 48%, 25%, 25%)
Oklch
oklch(62.0% 0.128 351.5)

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

#BF84B5

Mauve · DarkGray · Lilac Purple

HEX
#BF84B5
RGB
rgb(191, 132, 181)
HSL
hsl(310, 32%, 63%)
HSB
hsb(310, 31%, 75%)
CMYK
cmyk(0%, 31%, 5%, 25%)
Oklch
oklch(68.8% 0.097 332.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#220037

Royal Purple · MidnightBlue · Dark Purple

HEX
#220037
RGB
rgb(34, 0, 55)
HSL
hsl(277, 100%, 11%)
HSB
hsb(277, 100%, 22%)
CMYK
cmyk(38%, 100%, 0%, 78%)
Oklch
oklch(19.7% 0.101 307.9)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#140F1B

Deep Indigo · Black · Dark Purple

HEX
#140F1B
RGB
rgb(20, 15, 27)
HSL
hsl(265, 29%, 8%)
HSB
hsb(265, 44%, 11%)
CMYK
cmyk(26%, 44%, 0%, 89%)
Oklch
oklch(18.1% 0.025 303.1)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F51653
14F5B9

Analogous

F514C1
F51653
F54914

Triadic

F51653
50F514
1450F5

Split-Comp.

F51653
14F549
14C1F5

Tetradic

F51653
C1F514
14F5B9
4914F5

Contrast Matrix WCAG 2.1 Contrast

F51653
BF638F
BF84B5
220037
140F1B
—
1.1
Fail
1.4
Fail
4.6
AA
4.6
AA
1.1
Fail
—
1.3
Fail
4.8
AA
4.8
AA
1.4
Fail
1.3
Fail
—
6.4
AA
6.4
AA
4.6
AA
4.8
AA
6.4
AA
—
1.0
Fail
4.6
AA
4.8
AA
6.4
AA
1.0
Fail
—
White BG
4.1AA Large
3.9AA Large
2.9Fail
18.7AAA
18.9AAA
Black BG
5.1AA
5.4AA
7.2AAA
1.1Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

949244
979684
A5A5A9
13132A
121218

Deuteranopia

A1B241
9DA382
A9ADA6
151827
121317

Tritanopia

EA3936
BA7C7A
BCA09E
201F1D
141615

Achromatopsia

606060
848484
9B9B9B
101010
121212

Shades & Tints Shades & Tints

#F51653

Dark
Light

#BF638F

Dark
Light

#BF84B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f51653;
  --color-2: #bf638f;
  --color-3: #bf84b5;
  --color-4: #220037;
  --color-5: #140f1b;
}

SCSS

$color-1: #f51653;
$color-2: #bf638f;
$color-3: #bf84b5;
$color-4: #220037;
$color-5: #140f1b;

TAILWIND

colors: {
  'brand-1': '#f51653',
  'brand-2': '#bf638f',
  'brand-3': '#bf84b5',
  'brand-4': '#220037',
  'brand-5': '#140f1b',
}

RGB Array

[245, 22, 83], [191, 99, 143], [191, 132, 181], [34, 0, 55], [20, 15, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F51653, #BF638F, #BF84B5, #220037, #140F1B is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f51653; --color-2: #bf638f; --color-3: #bf84b5; --color-4: #220037; --color-5: #140f1b. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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