← Back to Editor

#003250 · #5893AB · #F2F2F5 · #787877

minimal

A 4-color minimal palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

RestrainedProfessionalPureCool

Industry INDUSTRY

ArchitectureManufacturingSaaS B2B

UI Context UI CONTEXT

Corporate SitePortfolioAdmin PanelData Visualization

Color Details Color Details

#003250

Lake Blue · MidnightBlue · Deep Sea Blue

HEX
#003250
RGB
rgb(0, 50, 80)
HSL
hsl(203, 100%, 16%)
HSB
hsb(203, 100%, 31%)
CMYK
cmyk(100%, 38%, 0%, 69%)
Oklch
oklch(30.4% 0.073 242.4)

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

#5893AB

Slate Blue · CadetBlue · Lake Green

HEX
#5893AB
RGB
rgb(88, 147, 171)
HSL
hsl(197, 33%, 51%)
HSB
hsb(197, 49%, 67%)
CMYK
cmyk(49%, 14%, 0%, 33%)
Oklch
oklch(63.2% 0.071 226.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#F2F2F5

Wisteria · SeaShell · Sky Blue

HEX
#F2F2F5
RGB
rgb(242, 242, 245)
HSL
hsl(240, 13%, 95%)
HSB
hsb(240, 1%, 96%)
CMYK
cmyk(1%, 1%, 0%, 4%)
Oklch
oklch(96.2% 0.004 286.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#787877

Ink Gray · Gray · Warm Gray

HEX
#787877
RGB
rgb(120, 120, 119)
HSL
hsl(60, 0%, 47%)
HSB
hsb(60, 1%, 47%)
CMYK
cmyk(0%, 0%, 1%, 53%)
Oklch
oklch(57.2% 0.002 106.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

003250
521F00

Analogous

005248
003250
000A52

Triadic

003250
520032
325200

Split-Comp.

003250
52000A
524800

Tetradic

003250
480052
521F00
0A5200

Contrast Matrix WCAG 2.1 Contrast

003250
5893AB
F2F2F5
787877
—
3.9
AA Large
12.0
AAA
3.0
AA Large
3.9
AA Large
—
3.0
AA Large
1.3
Fail
12.0
AAA
3.0
AA Large
—
4.0
AA Large
3.0
AA Large
1.3
Fail
4.0
AA Large
—
White BG
13.4AAA
3.4AA Large
1.1Fail
4.4AA Large
Black BG
1.6Fail
6.2AA
18.8AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161649
7272A5
F2F2F4
787877

Deuteranopia

130F47
6E6AA4
F2F2F4
787877

Tritanopia

034342
5BA1A0
F2F4F4
787777

Achromatopsia

262626
848484
F2F2F2
787878

Shades & Tints Shades & Tints

#003250

Dark
Light

#5893AB

Dark
Light

#F2F2F5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #003250;
  --color-2: #5893ab;
  --color-3: #f2f2f5;
  --color-4: #787877;
}

SCSS

$color-1: #003250;
$color-2: #5893ab;
$color-3: #f2f2f5;
$color-4: #787877;

TAILWIND

colors: {
  'brand-1': '#003250',
  'brand-2': '#5893ab',
  'brand-3': '#f2f2f5',
  'brand-4': '#787877',
}

RGB Array

[0, 50, 80], [88, 147, 171], [242, 242, 245], [120, 120, 119]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This minimal-style palette of #003250, #5893AB, #F2F2F5, #787877 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: #003250; --color-2: #5893ab; --color-3: #f2f2f5; --color-4: #787877. 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 minimal-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