← Back to Editor

#217FA0 · #0C1A1F · #475200 · #92AB19 · #BBCC66

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#217FA0

Lake Blue · SteelBlue · Mint Ice

HEX
#217FA0
RGB
rgb(33, 127, 160)
HSL
hsl(196, 66%, 38%)
HSB
hsb(196, 79%, 63%)
CMYK
cmyk(79%, 21%, 0%, 37%)
Oklch
oklch(55.9% 0.097 226.8)

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

#0C1A1F

Slate Blue · Black · Peacock Green

HEX
#0C1A1F
RGB
rgb(12, 26, 31)
HSL
hsl(196, 44%, 8%)
HSB
hsb(196, 61%, 12%)
CMYK
cmyk(61%, 16%, 0%, 88%)
Oklch
oklch(20.8% 0.022 222.8)

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

#475200

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#475200
RGB
rgb(71, 82, 0)
HSL
hsl(68, 100%, 16%)
HSB
hsb(68, 100%, 32%)
CMYK
cmyk(13%, 0%, 100%, 68%)
Oklch
oklch(41.4% 0.097 118.2)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#92AB19

Grass Green · Olive · Forest Green

HEX
#92AB19
RGB
rgb(146, 171, 25)
HSL
hsl(70, 74%, 38%)
HSB
hsb(70, 85%, 67%)
CMYK
cmyk(15%, 0%, 85%, 33%)
Oklch
oklch(69.8% 0.159 119.9)

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

#BBCC66

Grass Green · Tan · Olive Green

HEX
#BBCC66
RGB
rgb(187, 204, 102)
HSL
hsl(70, 50%, 60%)
HSB
hsb(70, 50%, 80%)
CMYK
cmyk(8%, 0%, 50%, 20%)
Oklch
oklch(81.1% 0.129 117.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

217FA0
A14321

Analogous

21A183
217FA0
213FA1

Triadic

217FA0
A1217F
7FA121

Split-Comp.

217FA0
A1213F
A18321

Tetradic

217FA0
8321A1
A14321
3FA121

Contrast Matrix WCAG 2.1 Contrast

217FA0
0C1A1F
475200
92AB19
BBCC66
—
3.9
AA Large
1.9
Fail
1.7
Fail
2.6
Fail
3.9
AA Large
—
2.1
Fail
6.8
AA
10.1
AAA
1.9
Fail
2.1
Fail
—
3.3
AA Large
4.8
AA
1.7
Fail
6.8
AA
3.3
AA Large
—
1.5
Fail
2.6
Fail
10.1
AAA
4.8
AA
1.5
Fail
—
White BG
4.6AA
17.7AAA
8.5AAA
2.6Fail
1.8Fail
Black BG
4.6AA
1.2Fail
2.5Fail
8.1AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4B98
12121E
4C4C14
9D9D3C
C2C37F

Deuteranopia

443D96
11101E
4B4A19
9B9A45
C1C085

Tritanopia

269290
0D1D1D
482427
93585E
BC9296

Achromatopsia

676767
161616
454545
939393
BBBBBB

Shades & Tints Shades & Tints

#217FA0

Dark
Light

#0C1A1F

Dark
Light

#475200

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #217fa0;
  --color-2: #0c1a1f;
  --color-3: #475200;
  --color-4: #92ab19;
  --color-5: #bbcc66;
}

SCSS

$color-1: #217fa0;
$color-2: #0c1a1f;
$color-3: #475200;
$color-4: #92ab19;
$color-5: #bbcc66;

TAILWIND

colors: {
  'brand-1': '#217fa0',
  'brand-2': '#0c1a1f',
  'brand-3': '#475200',
  'brand-4': '#92ab19',
  'brand-5': '#bbcc66',
}

RGB Array

[33, 127, 160], [12, 26, 31], [71, 82, 0], [146, 171, 25], [187, 204, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #217FA0, #0C1A1F, #475200, #92AB19, #BBCC66 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #217fa0; --color-2: #0c1a1f; --color-3: #475200; --color-4: #92ab19; --color-5: #bbcc66. 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 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