← Back to Editor

#F3F4F6 · #397679 · #183E51 · #0F1F36 · #030210

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F3F4F6

Azure · Snow · Sky Blue

HEX
#F3F4F6
RGB
rgb(243, 244, 246)
HSL
hsl(220, 14%, 96%)
HSB
hsb(220, 1%, 96%)
CMYK
cmyk(1%, 1%, 0%, 4%)
Oklch
oklch(96.7% 0.003 264.5)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#397679

Slate Blue · SeaGreen · Mint Ice

HEX
#397679
RGB
rgb(57, 118, 121)
HSL
hsl(183, 36%, 35%)
HSB
hsb(183, 53%, 47%)
CMYK
cmyk(53%, 2%, 0%, 53%)
Oklch
oklch(52.7% 0.063 199.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#183E51

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#183E51
RGB
rgb(24, 62, 81)
HSL
hsl(200, 54%, 21%)
HSB
hsb(200, 70%, 32%)
CMYK
cmyk(70%, 23%, 0%, 68%)
Oklch
oklch(34.6% 0.054 233.2)

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

#0F1F36

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0F1F36
RGB
rgb(15, 31, 54)
HSL
hsl(215, 57%, 14%)
HSB
hsb(215, 72%, 21%)
CMYK
cmyk(72%, 43%, 0%, 79%)
Oklch
oklch(23.9% 0.050 257.5)

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

#030210

Deep Indigo · Black · Deep Sea Blue

HEX
#030210
RGB
rgb(3, 2, 16)
HSL
hsl(244, 78%, 4%)
HSB
hsb(244, 88%, 6%)
CMYK
cmyk(81%, 88%, 0%, 94%)
Oklch
oklch(10.4% 0.039 283.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3F4F6
F6F5F3

Analogous

F3F6F6
F3F4F6
F4F3F6

Triadic

F3F4F6
F6F3F4
F4F6F3

Split-Comp.

F3F4F6
F6F4F3
F6F6F3

Tetradic

F3F4F6
F6F3F6
F6F5F3
F3F6F4

Contrast Matrix WCAG 2.1 Contrast

F3F4F6
397679
183E51
0F1F36
030210
—
4.7
AA
10.3
AAA
15.0
AAA
18.7
AAA
4.7
AA
—
2.2
Fail
3.2
AA Large
4.0
AA Large
10.3
AAA
2.2
Fail
—
1.5
Fail
1.8
Fail
15.0
AAA
3.2
AA Large
1.5
Fail
—
1.2
Fail
18.7
AAA
4.0
AA Large
1.8
Fail
1.2
Fail
—
White BG
1.1Fail
5.2AA
11.4AAA
16.5AAA
20.6AAA
Black BG
19.1AAA
4.0AA Large
1.8Fail
1.3Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3F6
535478
28294C
161630
03030D

Deuteranopia

F3F3F5
504B78
26234B
15142F
03030C

Tritanopia

F3F5F5
3C7878
1A4948
102C2B
030A09

Achromatopsia

F4F4F4
646464
353535
1D1D1D
040404

Shades & Tints Shades & Tints

#F3F4F6

Dark
Light

#397679

Dark
Light

#183E51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3f4f6;
  --color-2: #397679;
  --color-3: #183e51;
  --color-4: #0f1f36;
  --color-5: #030210;
}

SCSS

$color-1: #f3f4f6;
$color-2: #397679;
$color-3: #183e51;
$color-4: #0f1f36;
$color-5: #030210;

TAILWIND

colors: {
  'brand-1': '#f3f4f6',
  'brand-2': '#397679',
  'brand-3': '#183e51',
  'brand-4': '#0f1f36',
  'brand-5': '#030210',
}

RGB Array

[243, 244, 246], [57, 118, 121], [24, 62, 81], [15, 31, 54], [3, 2, 16]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3F4F6, #397679, #183E51, #0F1F36, #030210 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: #f3f4f6; --color-2: #397679; --color-3: #183e51; --color-4: #0f1f36; --color-5: #030210. 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