← Back to Editor

#030407 · #253046 · #800631 · #B1657B

A 4-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

#030407

Indigo · Black · Deep Sea Blue

HEX
#030407
RGB
rgb(3, 4, 7)
HSL
hsl(225, 40%, 2%)
HSB
hsb(225, 57%, 3%)
CMYK
cmyk(57%, 43%, 0%, 97%)
Oklch
oklch(10.7% 0.011 266.5)

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

#253046

Indigo · DarkSlateGray · Prussian Blue

HEX
#253046
RGB
rgb(37, 48, 70)
HSL
hsl(220, 31%, 21%)
HSB
hsb(220, 47%, 27%)
CMYK
cmyk(47%, 31%, 0%, 73%)
Oklch
oklch(31.0% 0.043 263.7)

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

#800631

Dark Violet · Maroon · Camellia

HEX
#800631
RGB
rgb(128, 6, 49)
HSL
hsl(339, 91%, 26%)
HSB
hsb(339, 95%, 50%)
CMYK
cmyk(0%, 95%, 62%, 50%)
Oklch
oklch(38.6% 0.150 10.2)

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

#B1657B

Dark Violet · Gray · Rose Pink

HEX
#B1657B
RGB
rgb(177, 101, 123)
HSL
hsl(343, 33%, 55%)
HSB
hsb(343, 43%, 69%)
CMYK
cmyk(0%, 43%, 31%, 31%)
Oklch
oklch(59.9% 0.101 2.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

030407
070603

Analogous

030607
030407
040307

Triadic

030407
070304
040703

Split-Comp.

030407
070403
060703

Tetradic

030407
070306
070603
030704

Contrast Matrix WCAG 2.1 Contrast

030407
253046
800631
B1657B
—
1.6
Fail
1.9
Fail
4.9
AA
1.6
Fail
—
1.3
Fail
3.2
AA Large
1.9
Fail
1.3
Fail
—
2.5
Fail
4.9
AA
3.2
AA Large
2.5
Fail
—
White BG
20.5AAA
13.2AAA
10.6AAA
4.2AA Large
Black BG
1.0Fail
1.6Fail
2.0Fail
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

030306
2A2A41
4B4A27
908F76

Deuteranopia

030306
29283F
525B24
959A74

Tritanopia

030606
263C3C
7A1E1D
AD7171

Achromatopsia

040404
2F2F2F
2F2F2F
7E7E7E

Shades & Tints Shades & Tints

#030407

Dark
Light

#253046

Dark
Light

#800631

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #030407;
  --color-2: #253046;
  --color-3: #800631;
  --color-4: #b1657b;
}

SCSS

$color-1: #030407;
$color-2: #253046;
$color-3: #800631;
$color-4: #b1657b;

TAILWIND

colors: {
  'brand-1': '#030407',
  'brand-2': '#253046',
  'brand-3': '#800631',
  'brand-4': '#b1657b',
}

RGB Array

[3, 4, 7], [37, 48, 70], [128, 6, 49], [177, 101, 123]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #030407, #253046, #800631, #B1657B 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #030407; --color-2: #253046; --color-3: #800631; --color-4: #b1657b. 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 4-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