← Back to Editor

#221F42 · #680142 · #0B7673 · #FF8D41 · #7BAC22

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

#221F42

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#221F42
RGB
rgb(34, 31, 66)
HSL
hsl(245, 36%, 19%)
HSB
hsb(245, 53%, 26%)
CMYK
cmyk(48%, 53%, 0%, 74%)
Oklch
oklch(26.3% 0.064 285.0)

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

#680142

Rose Purple · Purple · Raspberry

HEX
#680142
RGB
rgb(104, 1, 66)
HSL
hsl(322, 98%, 21%)
HSB
hsb(322, 99%, 41%)
CMYK
cmyk(0%, 99%, 37%, 59%)
Oklch
oklch(34.2% 0.141 350.3)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#0B7673

Mineral Blue · Teal · Peacock Green

HEX
#0B7673
RGB
rgb(11, 118, 115)
HSL
hsl(178, 83%, 25%)
HSB
hsb(178, 91%, 46%)
CMYK
cmyk(91%, 0%, 3%, 54%)
Oklch
oklch(51.2% 0.086 191.6)

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

#FF8D41

Apricot · Coral · Warm Sun

HEX
#FF8D41
RGB
rgb(255, 141, 65)
HSL
hsl(24, 100%, 63%)
HSB
hsb(24, 75%, 100%)
CMYK
cmyk(0%, 45%, 75%, 0%)
Oklch
oklch(75.5% 0.163 51.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#7BAC22

Grass Green · Olive · Forest Green

HEX
#7BAC22
RGB
rgb(123, 172, 34)
HSL
hsl(81, 67%, 40%)
HSB
hsb(81, 80%, 67%)
CMYK
cmyk(28%, 0%, 80%, 33%)
Oklch
oklch(68.5% 0.167 128.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221F42
3F421F

Analogous

1F2E42
221F42
331F42

Triadic

221F42
42221F
1F4222

Split-Comp.

221F42
42331F
2E421F

Tetradic

221F42
421F2E
3F421F
1F4233

Contrast Matrix WCAG 2.1 Contrast

221F42
680142
0B7673
FF8D41
7BAC22
—
1.2
Fail
2.9
Fail
6.8
AA
5.8
AA
1.2
Fail
—
2.3
Fail
5.5
AA
4.6
AA
2.9
Fail
2.3
Fail
—
2.4
Fail
2.0
Fail
6.8
AA
5.5
AA
2.4
Fail
—
1.2
Fail
5.8
AA
4.6
AA
2.0
Fail
1.2
Fail
—
White BG
15.6AAA
12.6AAA
5.5AA
2.3Fail
2.7Fail
Black BG
1.3Fail
1.7Fail
3.9AA Large
9.1AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

21213A
3B3A32
393A74
CECD53
909143

Deuteranopia

212137
41492E
332B74
D4DD58
8D8A4B

Tritanopia

223331
632623
107474
F96265
7D5E64

Achromatopsia

242424
272727
565656
A6A6A6
8E8E8E

Shades & Tints Shades & Tints

#221F42

Dark
Light

#680142

Dark
Light

#0B7673

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221f42;
  --color-2: #680142;
  --color-3: #0b7673;
  --color-4: #ff8d41;
  --color-5: #7bac22;
}

SCSS

$color-1: #221f42;
$color-2: #680142;
$color-3: #0b7673;
$color-4: #ff8d41;
$color-5: #7bac22;

TAILWIND

colors: {
  'brand-1': '#221f42',
  'brand-2': '#680142',
  'brand-3': '#0b7673',
  'brand-4': '#ff8d41',
  'brand-5': '#7bac22',
}

RGB Array

[34, 31, 66], [104, 1, 66], [11, 118, 115], [255, 141, 65], [123, 172, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221F42, #680142, #0B7673, #FF8D41, #7BAC22 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: #221f42; --color-2: #680142; --color-3: #0b7673; --color-4: #ff8d41; --color-5: #7bac22. 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