← Back to Editor

#A6CCDF · #302D38 · #CACD40 · #5E4DD1 · #EB3951

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

#A6CCDF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#A6CCDF
RGB
rgb(166, 204, 223)
HSL
hsl(200, 47%, 76%)
HSB
hsb(200, 26%, 87%)
CMYK
cmyk(26%, 9%, 0%, 13%)
Oklch
oklch(82.4% 0.048 229.7)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#302D38

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#302D38
RGB
rgb(48, 45, 56)
HSL
hsl(256, 11%, 20%)
HSB
hsb(256, 20%, 22%)
CMYK
cmyk(14%, 20%, 0%, 78%)
Oklch
oklch(30.5% 0.020 297.7)

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

#CACD40

Autumn Sage · GoldenRod · Sunflower

HEX
#CACD40
RGB
rgb(202, 205, 64)
HSL
hsl(61, 59%, 53%)
HSB
hsb(61, 69%, 80%)
CMYK
cmyk(1%, 0%, 69%, 20%)
Oklch
oklch(82.1% 0.158 110.6)

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

#5E4DD1

Deep Indigo · SlateBlue · Navy Blue

HEX
#5E4DD1
RGB
rgb(94, 77, 209)
HSL
hsl(248, 59%, 56%)
HSB
hsb(248, 63%, 82%)
CMYK
cmyk(55%, 63%, 0%, 18%)
Oklch
oklch(51.5% 0.195 283.0)

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

#EB3951

Vermilion · Crimson · Passion Red

HEX
#EB3951
RGB
rgb(235, 57, 81)
HSL
hsl(352, 82%, 57%)
HSB
hsb(352, 76%, 92%)
CMYK
cmyk(0%, 76%, 66%, 8%)
Oklch
oklch(62.3% 0.212 19.0)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A6CCDF
DFB8A5

Analogous

A5DFD5
A6CCDF
A5AFDF

Triadic

A6CCDF
DFA5CB
CBDFA5

Split-Comp.

A6CCDF
DFA5AF
DFD5A5

Tetradic

A6CCDF
D5A5DF
DFB8A5
AFDFA5

Contrast Matrix WCAG 2.1 Contrast

A6CCDF
302D38
CACD40
5E4DD1
EB3951
—
7.9
AAA
1.0
Fail
3.6
AA Large
2.4
Fail
7.9
AAA
—
7.9
AAA
2.2
Fail
3.4
AA Large
1.0
Fail
7.9
AAA
—
3.6
AA Large
2.4
Fail
3.6
AA Large
2.2
Fail
3.6
AA Large
—
1.5
Fail
2.4
Fail
3.4
AA Large
2.4
Fail
1.5
Fail
—
White BG
1.7Fail
13.5AAA
1.7Fail
6.1AA
4.0AA Large
Black BG
12.3AAA
1.6Fail
12.3AAA
3.5AA Large
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B7DA
2F2F35
CBCB62
5756B1
9E9C4B

Deuteranopia

B4B1D9
2F2F35
CBCB6A
5859A9
A8B64A

Tritanopia

A8D7D6
303333
CA7D83
5D9892
E24746

Achromatopsia

C3C3C3
2F2F2F
BCBCBC
616161
717171

Shades & Tints Shades & Tints

#A6CCDF

Dark
Light

#302D38

Dark
Light

#CACD40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a6ccdf;
  --color-2: #302d38;
  --color-3: #cacd40;
  --color-4: #5e4dd1;
  --color-5: #eb3951;
}

SCSS

$color-1: #a6ccdf;
$color-2: #302d38;
$color-3: #cacd40;
$color-4: #5e4dd1;
$color-5: #eb3951;

TAILWIND

colors: {
  'brand-1': '#a6ccdf',
  'brand-2': '#302d38',
  'brand-3': '#cacd40',
  'brand-4': '#5e4dd1',
  'brand-5': '#eb3951',
}

RGB Array

[166, 204, 223], [48, 45, 56], [202, 205, 64], [94, 77, 209], [235, 57, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A6CCDF, #302D38, #CACD40, #5E4DD1, #EB3951 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: #a6ccdf; --color-2: #302d38; --color-3: #cacd40; --color-4: #5e4dd1; --color-5: #eb3951. 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