← Back to Editor

#472194 · #979A81 · #2BBFF3 · #9DB398 · #B0C5C4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#472194

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#472194
RGB
rgb(71, 33, 148)
HSL
hsl(260, 64%, 35%)
HSB
hsb(260, 78%, 58%)
CMYK
cmyk(52%, 78%, 0%, 42%)
Oklch
oklch(37.8% 0.173 290.7)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#979A81

Autumn Sage · Gray · Sunflower

HEX
#979A81
RGB
rgb(151, 154, 129)
HSL
hsl(67, 11%, 55%)
HSB
hsb(67, 16%, 60%)
CMYK
cmyk(2%, 0%, 16%, 40%)
Oklch
oklch(67.7% 0.036 112.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#2BBFF3

Lake Blue · DeepSkyBlue · Lake Green

HEX
#2BBFF3
RGB
rgb(43, 191, 243)
HSL
hsl(196, 89%, 56%)
HSB
hsb(196, 82%, 95%)
CMYK
cmyk(82%, 21%, 0%, 5%)
Oklch
oklch(75.3% 0.138 227.9)

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

#9DB398

Celadon · DarkSeaGreen · Apple Green

HEX
#9DB398
RGB
rgb(157, 179, 152)
HSL
hsl(109, 15%, 65%)
HSB
hsb(109, 15%, 70%)
CMYK
cmyk(12%, 0%, 15%, 30%)
Oklch
oklch(74.2% 0.045 139.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B0C5C4

Jade · Silver · Lake Green

HEX
#B0C5C4
RGB
rgb(176, 197, 196)
HSL
hsl(177, 15%, 73%)
HSB
hsb(177, 11%, 77%)
CMYK
cmyk(11%, 0%, 1%, 23%)
Oklch
oklch(80.7% 0.023 193.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

472194
6C9220

Analogous

203392
472194
7F2092

Triadic

472194
924620
209246

Split-Comp.

472194
927F20
339220

Tetradic

472194
922033
6C9220
20927F

Contrast Matrix WCAG 2.1 Contrast

472194
979A81
2BBFF3
9DB398
B0C5C4
—
3.8
AA Large
5.1
AA
4.9
AA
6.1
AA
3.8
AA Large
—
1.4
Fail
1.3
Fail
1.6
Fail
5.1
AA
1.4
Fail
—
1.1
Fail
1.2
Fail
4.9
AA
1.3
Fail
1.1
Fail
—
1.2
Fail
6.1
AA
1.6
Fail
1.2
Fail
1.2
Fail
—
White BG
11.0AAA
2.9Fail
2.1Fail
2.2Fail
1.8Fail
Black BG
1.9Fail
7.3AAA
9.8AAA
9.3AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373678
989887
6B6CE6
A7A79F
B9B9C4

Deuteranopia

393C72
989889
6357E3
A5A4A0
B8B6C4

Tritanopia

45625D
978C8D
32DCDA
9EA4A5
B1C4C4

Achromatopsia

393939
969696
999999
A9A9A9
BFBFBF

Shades & Tints Shades & Tints

#472194

Dark
Light

#979A81

Dark
Light

#2BBFF3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #472194;
  --color-2: #979a81;
  --color-3: #2bbff3;
  --color-4: #9db398;
  --color-5: #b0c5c4;
}

SCSS

$color-1: #472194;
$color-2: #979a81;
$color-3: #2bbff3;
$color-4: #9db398;
$color-5: #b0c5c4;

TAILWIND

colors: {
  'brand-1': '#472194',
  'brand-2': '#979a81',
  'brand-3': '#2bbff3',
  'brand-4': '#9db398',
  'brand-5': '#b0c5c4',
}

RGB Array

[71, 33, 148], [151, 154, 129], [43, 191, 243], [157, 179, 152], [176, 197, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #472194, #979A81, #2BBFF3, #9DB398, #B0C5C4 is ideal for: corporate websites, product showcases, portfolios. 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: #472194; --color-2: #979a81; --color-3: #2bbff3; --color-4: #9db398; --color-5: #b0c5c4. 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. 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