← Back to Editor

#3C3966 · #A7ADB5 · #FAF2CA · #6B9EB1 · #3A323D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#3C3966

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3966
RGB
rgb(60, 57, 102)
HSL
hsl(244, 28%, 31%)
HSB
hsb(244, 44%, 40%)
CMYK
cmyk(41%, 44%, 0%, 60%)
Oklch
oklch(37.0% 0.076 285.1)

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

#A7ADB5

Azure · DarkGray · Silver Sand

HEX
#A7ADB5
RGB
rgb(167, 173, 181)
HSL
hsl(214, 9%, 68%)
HSB
hsb(214, 8%, 71%)
CMYK
cmyk(8%, 4%, 0%, 29%)
Oklch
oklch(74.5% 0.013 255.5)

Traditional「Azure」· Paint「Silver Sand」· Creative Urban Concrete

#FAF2CA

Fresh Green · Bisque · Lemon Cream

HEX
#FAF2CA
RGB
rgb(250, 242, 202)
HSL
hsl(50, 83%, 89%)
HSB
hsb(50, 19%, 98%)
CMYK
cmyk(0%, 3%, 19%, 2%)
Oklch
oklch(95.7% 0.053 97.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#6B9EB1

Slate Blue · CadetBlue · Lake Green

HEX
#6B9EB1
RGB
rgb(107, 158, 177)
HSL
hsl(196, 31%, 56%)
HSB
hsb(196, 40%, 69%)
CMYK
cmyk(40%, 11%, 0%, 31%)
Oklch
oklch(67.0% 0.061 223.3)

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

#3A323D

Dark Plum · DarkSlateGray · Eggplant

HEX
#3A323D
RGB
rgb(58, 50, 61)
HSL
hsl(284, 10%, 22%)
HSB
hsb(284, 18%, 24%)
CMYK
cmyk(5%, 18%, 0%, 76%)
Oklch
oklch(33.0% 0.022 316.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3966
626539

Analogous

394C65
3C3966
523965

Triadic

3C3966
653C39
39653C

Split-Comp.

3C3966
655239
4C6539

Tetradic

3C3966
65394C
626539
396552

Contrast Matrix WCAG 2.1 Contrast

3C3966
A7ADB5
FAF2CA
6B9EB1
3A323D
—
4.7
AA
9.5
AAA
3.6
AA Large
1.2
Fail
4.7
AA
—
2.0
Fail
1.3
Fail
5.5
AA
9.5
AAA
2.0
Fail
—
2.6
Fail
10.9
AAA
3.6
AA Large
1.3
Fail
2.6
Fail
—
4.2
AA Large
1.2
Fail
5.5
AA
10.9
AAA
4.2
AA Large
—
White BG
10.7AAA
2.3Fail
1.1Fail
2.9Fail
12.3AAA
Black BG
2.0Fail
9.3AAA
18.6AAA
7.2AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B5B
AAAAB3
F7F6D4
8182AC
37363A

Deuteranopia

3B3B58
A9A9B3
F7F8D6
7E7AAB
37383A

Tritanopia

3C5351
A7B2B1
FADBDD
6EA9A8
3A3838

Achromatopsia

3F3F3F
ACACAC
F0F0F0
919191
363636

Shades & Tints Shades & Tints

#3C3966

Dark
Light

#A7ADB5

Dark
Light

#FAF2CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3966;
  --color-2: #a7adb5;
  --color-3: #faf2ca;
  --color-4: #6b9eb1;
  --color-5: #3a323d;
}

SCSS

$color-1: #3c3966;
$color-2: #a7adb5;
$color-3: #faf2ca;
$color-4: #6b9eb1;
$color-5: #3a323d;

TAILWIND

colors: {
  'brand-1': '#3c3966',
  'brand-2': '#a7adb5',
  'brand-3': '#faf2ca',
  'brand-4': '#6b9eb1',
  'brand-5': '#3a323d',
}

RGB Array

[60, 57, 102], [167, 173, 181], [250, 242, 202], [107, 158, 177], [58, 50, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C3966, #A7ADB5, #FAF2CA, #6B9EB1, #3A323D 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: #3c3966; --color-2: #a7adb5; --color-3: #faf2ca; --color-4: #6b9eb1; --color-5: #3a323d. 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