← Back to Editor

#14619C · #84D0FF · #FFFFFF · #7CC628 · #185F0A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#14619C

Lake Blue · Teal · Prussian Blue

HEX
#14619C
RGB
rgb(20, 97, 156)
HSL
hsl(206, 77%, 35%)
HSB
hsb(206, 87%, 61%)
CMYK
cmyk(87%, 38%, 0%, 39%)
Oklch
oklch(48.0% 0.118 247.6)

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

#84D0FF

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#84D0FF
RGB
rgb(132, 208, 255)
HSL
hsl(203, 100%, 76%)
HSB
hsb(203, 48%, 100%)
CMYK
cmyk(48%, 18%, 0%, 0%)
Oklch
oklch(82.5% 0.100 236.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

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

#7CC628

Grass Green · Chartreuse · Olive Green

HEX
#7CC628
RGB
rgb(124, 198, 40)
HSL
hsl(88, 66%, 47%)
HSB
hsb(88, 80%, 78%)
CMYK
cmyk(37%, 0%, 80%, 22%)
Oklch
oklch(75.0% 0.195 132.3)

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

#185F0A

Pine Green · DarkGreen · Forest Green

HEX
#185F0A
RGB
rgb(24, 95, 10)
HSL
hsl(110, 81%, 21%)
HSB
hsb(110, 89%, 37%)
CMYK
cmyk(75%, 0%, 89%, 63%)
Oklch
oklch(42.6% 0.133 141.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14619C
9E5015

Analogous

159E95
14619C
151E9E

Triadic

14619C
9E1562
629E15

Split-Comp.

14619C
9E151E
9E9515

Tetradic

14619C
95159E
9E5015
1E9E15

Contrast Matrix WCAG 2.1 Contrast

14619C
84D0FF
FFFFFF
7CC628
185F0A
—
3.9
AA Large
6.5
AA
3.1
AA Large
1.2
Fail
3.9
AA Large
—
1.7
Fail
1.2
Fail
4.6
AA
6.5
AA
1.7
Fail
—
2.1
Fail
7.8
AAA
3.1
AA Large
1.2
Fail
2.1
Fail
—
3.7
AA Large
1.2
Fail
4.6
AA
7.8
AAA
3.7
AA Large
—
White BG
6.5AA
1.7Fail
1.0Fail
2.1Fail
7.8AAA
Black BG
3.2AA Large
12.4AAA
21.0AAA
10.0AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

35368E
A5A6F4
FFFFFF
9C9D4E
37371F

Deuteranopia

312B8A
A19BF1
FFFFFF
989257
332D24

Tritanopia

188280
88EBE9
FFFFFF
806C73
1C2F32

Achromatopsia

515151
BFBFBF
FFFFFF
9E9E9E
404040

Shades & Tints Shades & Tints

#14619C

Dark
Light

#84D0FF

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14619c;
  --color-2: #84d0ff;
  --color-3: #ffffff;
  --color-4: #7cc628;
  --color-5: #185f0a;
}

SCSS

$color-1: #14619c;
$color-2: #84d0ff;
$color-3: #ffffff;
$color-4: #7cc628;
$color-5: #185f0a;

TAILWIND

colors: {
  'brand-1': '#14619c',
  'brand-2': '#84d0ff',
  'brand-3': '#ffffff',
  'brand-4': '#7cc628',
  'brand-5': '#185f0a',
}

RGB Array

[20, 97, 156], [132, 208, 255], [255, 255, 255], [124, 198, 40], [24, 95, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #14619C, #84D0FF, #FFFFFF, #7CC628, #185F0A is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #14619c; --color-2: #84d0ff; --color-3: #ffffff; --color-4: #7cc628; --color-5: #185f0a. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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