← Back to Editor

#A6C7C1 · #3B9FB6 · #31638E · #212748 · #9C09CA

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 LibraryData Visualization

Color Details Color Details

#A6C7C1

Jade · Silver · Lake Green

HEX
#A6C7C1
RGB
rgb(166, 199, 193)
HSL
hsl(169, 23%, 72%)
HSB
hsb(169, 17%, 78%)
CMYK
cmyk(17%, 0%, 3%, 22%)
Oklch
oklch(80.4% 0.036 183.2)

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

#3B9FB6

Lake Blue · SteelBlue · Mint Ice

HEX
#3B9FB6
RGB
rgb(59, 159, 182)
HSL
hsl(191, 51%, 47%)
HSB
hsb(191, 68%, 71%)
CMYK
cmyk(68%, 13%, 0%, 29%)
Oklch
oklch(65.4% 0.097 216.0)

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

#31638E

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#31638E
RGB
rgb(49, 99, 142)
HSL
hsl(208, 49%, 37%)
HSB
hsb(208, 65%, 56%)
CMYK
cmyk(65%, 30%, 0%, 44%)
Oklch
oklch(48.5% 0.088 246.8)

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

#212748

Indigo · DarkSlateGray · Prussian Blue

HEX
#212748
RGB
rgb(33, 39, 72)
HSL
hsl(231, 37%, 21%)
HSB
hsb(231, 54%, 28%)
CMYK
cmyk(54%, 46%, 0%, 72%)
Oklch
oklch(28.5% 0.061 274.1)

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

#9C09CA

Royal Purple · DarkViolet · Violet

HEX
#9C09CA
RGB
rgb(156, 9, 202)
HSL
hsl(286, 91%, 41%)
HSB
hsb(286, 96%, 79%)
CMYK
cmyk(23%, 96%, 0%, 21%)
Oklch
oklch(52.1% 0.253 314.6)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A6C7C1
C8A7AD

Analogous

A7C8B2
A6C7C1
A7BEC8

Triadic

A6C7C1
C2A7C8
C8C2A7

Split-Comp.

A6C7C1
C8A7BE
C8B2A7

Tetradic

A6C7C1
B2A7C8
C8A7AD
BEC8A7

Contrast Matrix WCAG 2.1 Contrast

A6C7C1
3B9FB6
31638E
212748
9C09CA
—
1.7
Fail
3.5
AA Large
8.0
AAA
3.5
AA Large
1.7
Fail
—
2.1
Fail
4.7
AA
2.1
Fail
3.5
AA Large
2.1
Fail
—
2.3
Fail
1.0
Fail
8.0
AAA
4.7
AA
2.3
Fail
—
2.3
Fail
3.5
AA Large
2.1
Fail
1.0
Fail
2.3
Fail
—
White BG
1.8Fail
3.1AA Large
6.4AA
14.5AAA
6.4AA
Black BG
11.6AAA
6.8AA
3.3AA Large
1.4Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B5C2
6667B0
474784
242440
5C5B9B

Deuteranopia

B2B0C3
6159AF
444081
23233E
657090

Tritanopia

A8C4C4
40ACAB
347B7A
213A38
95766E

Achromatopsia

BCBCBC
848484
595959
292929
4B4B4B

Shades & Tints Shades & Tints

#A6C7C1

Dark
Light

#3B9FB6

Dark
Light

#31638E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a6c7c1;
  --color-2: #3b9fb6;
  --color-3: #31638e;
  --color-4: #212748;
  --color-5: #9c09ca;
}

SCSS

$color-1: #a6c7c1;
$color-2: #3b9fb6;
$color-3: #31638e;
$color-4: #212748;
$color-5: #9c09ca;

TAILWIND

colors: {
  'brand-1': '#a6c7c1',
  'brand-2': '#3b9fb6',
  'brand-3': '#31638e',
  'brand-4': '#212748',
  'brand-5': '#9c09ca',
}

RGB Array

[166, 199, 193], [59, 159, 182], [49, 99, 142], [33, 39, 72], [156, 9, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A6C7C1, #3B9FB6, #31638E, #212748, #9C09CA is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #a6c7c1; --color-2: #3b9fb6; --color-3: #31638e; --color-4: #212748; --color-5: #9c09ca. 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 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