← Back to Editor

#0C3663 · #F2F2F2 · #EB1523 · #D1D1D1

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

#0C3663

Indigo · MidnightBlue · Prussian Blue

HEX
#0C3663
RGB
rgb(12, 54, 99)
HSL
hsl(211, 78%, 22%)
HSB
hsb(211, 88%, 39%)
CMYK
cmyk(88%, 45%, 0%, 61%)
Oklch
oklch(33.2% 0.091 253.7)

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

#F2F2F2

Plain White · SeaShell · Cloud White

HEX
#F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
HSB
hsb(0, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#EB1523

Vermilion · Crimson · Passion Red

HEX
#EB1523
RGB
rgb(235, 21, 35)
HSL
hsl(356, 84%, 50%)
HSB
hsb(356, 91%, 92%)
CMYK
cmyk(0%, 91%, 85%, 8%)
Oklch
oklch(59.7% 0.236 26.6)

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

#D1D1D1

Silver Gray · LightGray · Pearl Gray

HEX
#D1D1D1
RGB
rgb(209, 209, 209)
HSL
hsl(0, 0%, 82%)
HSB
hsb(0, 0%, 82%)
CMYK
cmyk(0%, 0%, 0%, 18%)
Oklch
oklch(86.1% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C3663
643A0C

Analogous

0C6264
0C3663
0E0C64

Triadic

0C3663
640C37
37640C

Split-Comp.

0C3663
640E0C
62640C

Tetradic

0C3663
640C62
643A0C
0C640E

Contrast Matrix WCAG 2.1 Contrast

0C3663
F2F2F2
EB1523
D1D1D1
—
10.9
AAA
2.7
Fail
8.0
AAA
10.9
AAA
—
4.0
AA Large
1.4
Fail
2.7
Fail
4.0
AA Large
—
2.9
Fail
8.0
AAA
1.4
Fail
2.9
Fail
—
White BG
12.2AAA
1.1Fail
4.5AA
1.5Fail
Black BG
1.7Fail
18.8AAA
4.7AA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1F58
F2F2F2
8E8C20
D1D1D1

Deuteranopia

1C1956
F2F2F2
9BAB1F
D1D1D1

Tritanopia

0E504E
F2F2F2
E01D1C
D1D1D1

Achromatopsia

2F2F2F
F2F2F2
575757
D1D1D1

Shades & Tints Shades & Tints

#0C3663

Dark
Light

#F2F2F2

Dark
Light

#EB1523

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c3663;
  --color-2: #f2f2f2;
  --color-3: #eb1523;
  --color-4: #d1d1d1;
}

SCSS

$color-1: #0c3663;
$color-2: #f2f2f2;
$color-3: #eb1523;
$color-4: #d1d1d1;

TAILWIND

colors: {
  'brand-1': '#0c3663',
  'brand-2': '#f2f2f2',
  'brand-3': '#eb1523',
  'brand-4': '#d1d1d1',
}

RGB Array

[12, 54, 99], [242, 242, 242], [235, 21, 35], [209, 209, 209]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #0C3663, #F2F2F2, #EB1523, #D1D1D1 is ideal for: 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: #0c3663; --color-2: #f2f2f2; --color-3: #eb1523; --color-4: #d1d1d1. 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. 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