#313743 + #FF04F8 + #313743 + #B0D41A + #313743 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#313743

Indigo · DarkSlateGray · Prussian Blue

HEX

#313743

RGB

rgb(49, 55, 67)

HSL

hsl(220, 16%, 23%)

HSB

hsb(220, 27%, 26%)

CMYK

cmyk(27%, 18%, 0%, 74%)

Oklch

oklch(33.6% 0.023 264.2)

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

#FF04F8

Rose Purple · Magenta · Violet

HEX

#FF04F8

RGB

rgb(255, 4, 248)

HSL

hsl(302, 100%, 51%)

HSB

hsb(302, 98%, 100%)

CMYK

cmyk(0%, 98%, 3%, 0%)

Oklch

oklch(69.8% 0.317 329.9)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#313743

Indigo · DarkSlateGray · Prussian Blue

HEX

#313743

RGB

rgb(49, 55, 67)

HSL

hsl(220, 16%, 23%)

HSB

hsb(220, 27%, 26%)

CMYK

cmyk(27%, 18%, 0%, 74%)

Oklch

oklch(33.6% 0.023 264.2)

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

#B0D41A

Grass Green · GreenYellow · Olive Green

HEX

#B0D41A

RGB

rgb(176, 212, 26)

HSL

hsl(72, 78%, 47%)

HSB

hsb(72, 88%, 83%)

CMYK

cmyk(17%, 0%, 88%, 17%)

Oklch

oklch(81.5% 0.191 121.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#313743

Indigo · DarkSlateGray · Prussian Blue

HEX

#313743

RGB

rgb(49, 55, 67)

HSL

hsl(220, 16%, 23%)

HSB

hsb(220, 27%, 26%)

CMYK

cmyk(27%, 18%, 0%, 74%)

Oklch

oklch(33.6% 0.023 264.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

313743

443E31

Analogous

314144

313743

343144

Triadic

313743

443138

384431

Split-Comp.

313743

443431

414431

Tetradic

313743

443141

443E31

314434

Contrast Matrix WCAG 2.1 Contrast

313743	FF04F8	313743	B0D41A	313743
—	3.8 AA Large	—	7.0 AA	—
3.8 AA Large	—	3.8 AA Large	1.9 Fail	3.8 AA Large
—	3.8 AA Large	—	7.0 AA	—
7.0 AA	1.9 Fail	7.0 AA	—	7.0 AA
—	3.8 AA Large	—	7.0 AA	—

White BG

11.9AAA

3.2AA Large

11.9AAA

1.7Fail

11.9AAA

Black BG

1.8Fail

6.6AA

1.8Fail

12.3AAA

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

343440

9290BD

343440

C0C047

343440

Deuteranopia

33333F

A1B4AF

33333F

BEBB52

33333F

Tritanopia

313E3D

F28E84

313E3D

B26B72

313E3D

Achromatopsia

373737

6B6B6B

373737

B4B4B4

373737

Shades & Tints Shades & Tints

#313743

Dark

Light

#FF04F8

Dark

Light

#313743

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #313743;
  --color-2: #ff04f8;
  --color-3: #313743;
  --color-4: #b0d41a;
  --color-5: #313743;
}

SCSS

$color-1: #313743;
$color-2: #ff04f8;
$color-3: #313743;
$color-4: #b0d41a;
$color-5: #313743;

TAILWIND

colors: {
  'brand-1': '#313743',
  'brand-2': '#ff04f8',
  'brand-3': '#313743',
  'brand-4': '#b0d41a',
  'brand-5': '#313743',
}

RGB Array

[49, 55, 67], [255, 4, 248], [49, 55, 67], [176, 212, 26], [49, 55, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #313743, #FF04F8, #313743, #B0D41A, #313743 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: #313743; --color-2: #ff04f8; --color-3: #313743; --color-4: #b0d41a; --color-5: #313743. 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