#219AEB + #2E7885 + #3C7100 + #192C4D + #949590 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#219AEB

Lake Blue · DodgerBlue · Navy Blue

HEX

#219AEB

RGB

rgb(33, 154, 235)

HSL

hsl(204, 83%, 53%)

HSB

hsb(204, 86%, 92%)

CMYK

cmyk(86%, 34%, 0%, 8%)

Oklch

oklch(66.3% 0.156 244.8)

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

#2E7885

Slate Blue · Teal · Mint Ice

HEX

#2E7885

RGB

rgb(46, 120, 133)

HSL

hsl(189, 49%, 35%)

HSB

hsb(189, 65%, 52%)

CMYK

cmyk(65%, 10%, 0%, 48%)

Oklch

oklch(53.2% 0.075 211.1)

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

#3C7100

Grass Green · ForestGreen · Forest Green

HEX

#3C7100

RGB

rgb(60, 113, 0)

HSL

hsl(88, 100%, 22%)

HSB

hsb(88, 100%, 44%)

CMYK

cmyk(47%, 0%, 100%, 56%)

Oklch

oklch(49.2% 0.141 134.0)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#192C4D

Indigo · MidnightBlue · Deep Sea Blue

HEX

#192C4D

RGB

rgb(25, 44, 77)

HSL

hsl(218, 51%, 20%)

HSB

hsb(218, 68%, 30%)

CMYK

cmyk(68%, 43%, 0%, 70%)

Oklch

oklch(29.5% 0.065 260.7)

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

#949590

Ash · LightSlateGray · Silver Sand

HEX

#949590

RGB

rgb(148, 149, 144)

HSL

hsl(72, 2%, 57%)

HSB

hsb(72, 3%, 58%)

CMYK

cmyk(1%, 0%, 3%, 42%)

Oklch

oklch(66.7% 0.007 115.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

219AEB

EB7324

Analogous

24EBD7

219AEB

2438EB

Triadic

219AEB

EB249B

9BEB24

Split-Comp.

219AEB

EB2438

EBD724

Tetradic

219AEB

D724EB

EB7324

38EB24

Contrast Matrix WCAG 2.1 Contrast

219AEB	2E7885	3C7100	192C4D	949590
—	1.7 Fail	1.9 Fail	4.6 AA	1.0 Fail
1.7 Fail	—	1.2 Fail	2.7 Fail	1.7 Fail
1.9 Fail	1.2 Fail	—	2.4 Fail	2.0 Fail
4.6 AA	2.7 Fail	2.4 Fail	—	4.6 AA
1.0 Fail	1.7 Fail	2.0 Fail	4.6 AA	—

White BG

3.0AA Large

5.1AA

5.9AA

13.9AAA

3.0AA Large

Black BG

6.9AA

4.1AA Large

3.6AA Large

1.5Fail

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5556D7

4E4F82

53531B

212145

949491

Deuteranopia

4E45D3

4A4481

504C22

201F43

949492

Tritanopia

27C8C5

327F7F

3F3136

1A3F3D

949292

Achromatopsia

7F7F7F

636363

545454

2A2A2A

949494

Shades & Tints Shades & Tints

#219AEB

Dark

Light

#2E7885

Dark

Light

#3C7100

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #219aeb;
  --color-2: #2e7885;
  --color-3: #3c7100;
  --color-4: #192c4d;
  --color-5: #949590;
}

SCSS

$color-1: #219aeb;
$color-2: #2e7885;
$color-3: #3c7100;
$color-4: #192c4d;
$color-5: #949590;

TAILWIND

colors: {
  'brand-1': '#219aeb',
  'brand-2': '#2e7885',
  'brand-3': '#3c7100',
  'brand-4': '#192c4d',
  'brand-5': '#949590',
}

RGB Array

[33, 154, 235], [46, 120, 133], [60, 113, 0], [25, 44, 77], [148, 149, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #219AEB, #2E7885, #3C7100, #192C4D, #949590 is ideal for: tech websites, dark mode UIs, game UIs. 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: #219aeb; --color-2: #2e7885; --color-3: #3c7100; --color-4: #192c4d; --color-5: #949590. 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. 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