← Back to Editor

#111144 · #4F82BD · #F8FBFD · #AA3344 · #77AABB

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

#111144

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#111144
RGB
rgb(17, 17, 68)
HSL
hsl(240, 60%, 17%)
HSB
hsb(240, 75%, 27%)
CMYK
cmyk(75%, 75%, 0%, 73%)
Oklch
oklch(21.9% 0.093 275.5)

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

#4F82BD

Azure · SteelBlue · Navy Blue

HEX
#4F82BD
RGB
rgb(79, 130, 189)
HSL
hsl(212, 45%, 53%)
HSB
hsb(212, 58%, 74%)
CMYK
cmyk(58%, 31%, 0%, 26%)
Oklch
oklch(59.7% 0.106 253.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#F8FBFD

Sky Blue · Snow · Sky Blue

HEX
#F8FBFD
RGB
rgb(248, 251, 253)
HSL
hsl(204, 56%, 98%)
HSB
hsb(204, 2%, 99%)
CMYK
cmyk(2%, 1%, 0%, 1%)
Oklch
oklch(98.6% 0.004 236.5)

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

#AA3344

Crimson · Brown · Passion Red

HEX
#AA3344
RGB
rgb(170, 51, 68)
HSL
hsl(351, 54%, 43%)
HSB
hsb(351, 70%, 67%)
CMYK
cmyk(0%, 70%, 60%, 33%)
Oklch
oklch(50.3% 0.154 16.6)

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

#77AABB

Slate Blue · CadetBlue · Lake Green

HEX
#77AABB
RGB
rgb(119, 170, 187)
HSL
hsl(195, 33%, 60%)
HSB
hsb(195, 36%, 73%)
CMYK
cmyk(36%, 9%, 0%, 27%)
Oklch
oklch(70.8% 0.059 220.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

111144
454511

Analogous

112B45
111144
2B1145

Triadic

111144
451111
114511

Split-Comp.

111144
452B11
2B4511

Tetradic

111144
45112B
454511
11452B

Contrast Matrix WCAG 2.1 Contrast

111144
4F82BD
F8FBFD
AA3344
77AABB
—
4.4
AA Large
17.0
AAA
2.8
Fail
6.9
AA
4.4
AA Large
—
3.8
AA Large
1.6
Fail
1.6
Fail
17.0
AAA
3.8
AA Large
—
6.2
AA
2.4
Fail
2.8
Fail
1.6
Fail
6.2
AA
—
2.5
Fail
6.9
AA
1.6
Fail
2.4
Fail
2.5
Fail
—
White BG
17.7AAA
4.0AA Large
1.0Fail
6.4AA
2.5Fail
Black BG
1.2Fail
5.3AA
20.2AAA
3.3AA Large
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

111138
6566AF
F9F9FD
767540
8D8EB7

Deuteranopia

111135
625EAB
F9F9FC
7D863F
8A86B6

Tritanopia

112E2C
52A3A1
F8FCFC
A43D3C
7AB4B3

Achromatopsia

171717
797979
FAFAFA
595959
9D9D9D

Shades & Tints Shades & Tints

#111144

Dark
Light

#4F82BD

Dark
Light

#F8FBFD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #111144;
  --color-2: #4f82bd;
  --color-3: #f8fbfd;
  --color-4: #aa3344;
  --color-5: #77aabb;
}

SCSS

$color-1: #111144;
$color-2: #4f82bd;
$color-3: #f8fbfd;
$color-4: #aa3344;
$color-5: #77aabb;

TAILWIND

colors: {
  'brand-1': '#111144',
  'brand-2': '#4f82bd',
  'brand-3': '#f8fbfd',
  'brand-4': '#aa3344',
  'brand-5': '#77aabb',
}

RGB Array

[17, 17, 68], [79, 130, 189], [248, 251, 253], [170, 51, 68], [119, 170, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #111144, #4F82BD, #F8FBFD, #AA3344, #77AABB is ideal for: 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: #111144; --color-2: #4f82bd; --color-3: #f8fbfd; --color-4: #aa3344; --color-5: #77aabb. 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 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