#525263 + #F3114D + #2C2C40 + #E4123C + #4C4F4F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#525263

Deep Indigo · DimGray · Charcoal

HEX

#525263

RGB

rgb(82, 82, 99)

HSL

hsl(240, 9%, 35%)

HSB

hsb(240, 17%, 39%)

CMYK

cmyk(17%, 17%, 0%, 61%)

Oklch

oklch(44.5% 0.028 285.2)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#F3114D

Dark Violet · Crimson · Rose Pink

HEX

#F3114D

RGB

rgb(243, 17, 77)

HSL

hsl(344, 90%, 51%)

HSB

hsb(344, 93%, 95%)

CMYK

cmyk(0%, 93%, 68%, 5%)

Oklch

oklch(61.5% 0.241 17.1)

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

#2C2C40

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#2C2C40

RGB

rgb(44, 44, 64)

HSL

hsl(240, 19%, 21%)

HSB

hsb(240, 31%, 25%)

CMYK

cmyk(31%, 31%, 0%, 75%)

Oklch

oklch(30.2% 0.036 284.0)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#E4123C

Vermilion · Crimson · Passion Red

HEX

#E4123C

RGB

rgb(228, 18, 60)

HSL

hsl(348, 85%, 48%)

HSB

hsb(348, 92%, 89%)

CMYK

cmyk(0%, 92%, 74%, 11%)

Oklch

oklch(58.5% 0.229 20.6)

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

#4C4F4F

Dark Cyan · DarkSlateGray · Charcoal

HEX

#4C4F4F

RGB

rgb(76, 79, 79)

HSL

hsl(180, 2%, 30%)

HSB

hsb(180, 4%, 31%)

CMYK

cmyk(4%, 0%, 0%, 69%)

Oklch

oklch(42.5% 0.004 197.0)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

525263

616151

Analogous

515961

525263

595161

Triadic

525263

615151

516151

Split-Comp.

525263

615951

596151

Tetradic

525263

615159

616151

516159

Contrast Matrix WCAG 2.1 Contrast

525263	F3114D	2C2C40	E4123C	4C4F4F
—	1.8 Fail	1.8 Fail	1.6 Fail	1.1 Fail
1.8 Fail	—	3.2 AA Large	1.1 Fail	2.0 Fail
1.8 Fail	3.2 AA Large	—	2.9 Fail	1.6 Fail
1.6 Fail	1.1 Fail	2.9 Fail	—	1.8 Fail
1.1 Fail	2.0 Fail	1.6 Fail	1.8 Fail	—

White BG

7.6AAA

4.2AA Large

13.6AAA

4.7AA

8.3AAA

Black BG

2.7Fail

5.0AA

1.5Fail

4.5AA Large

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

52525F

918F3E

2C2C3B

898732

4D4D4F

Deuteranopia

52525E

9EAF3B

2C2C3A

95A52F

4D4D4F

Tritanopia

525C5B

E83331

2C3737

DA2A28

4C4F4F

Achromatopsia

545454

5B5B5B

2E2E2E

565656

4E4E4E

Shades & Tints Shades & Tints

#525263

Dark

Light

#F3114D

Dark

Light

#2C2C40

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #525263;
  --color-2: #f3114d;
  --color-3: #2c2c40;
  --color-4: #e4123c;
  --color-5: #4c4f4f;
}

SCSS

$color-1: #525263;
$color-2: #f3114d;
$color-3: #2c2c40;
$color-4: #e4123c;
$color-5: #4c4f4f;

TAILWIND

colors: {
  'brand-1': '#525263',
  'brand-2': '#f3114d',
  'brand-3': '#2c2c40',
  'brand-4': '#e4123c',
  'brand-5': '#4c4f4f',
}

RGB Array

[82, 82, 99], [243, 17, 77], [44, 44, 64], [228, 18, 60], [76, 79, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #525263, #F3114D, #2C2C40, #E4123C, #4C4F4F 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: #525263; --color-2: #f3114d; --color-3: #2c2c40; --color-4: #e4123c; --color-5: #4c4f4f. 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 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