← Back to Editor

#6C7BA6 · #110B17 · #2E0000 · #DDE5F2

A 4-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

#6C7BA6

Azure · LightSlateGray · Navy Blue

HEX
#6C7BA6
RGB
rgb(108, 123, 166)
HSL
hsl(224, 25%, 54%)
HSB
hsb(224, 35%, 65%)
CMYK
cmyk(35%, 26%, 0%, 35%)
Oklch
oklch(58.8% 0.069 269.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#110B17

Dark Plum · Black · Dark Purple

HEX
#110B17
RGB
rgb(17, 11, 23)
HSL
hsl(270, 35%, 7%)
HSB
hsb(270, 52%, 9%)
CMYK
cmyk(26%, 52%, 0%, 91%)
Oklch
oklch(16.4% 0.026 306.6)

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

#2E0000

Vermilion · Black · Deep Berry

HEX
#2E0000
RGB
rgb(46, 0, 0)
HSL
hsl(0, 100%, 9%)
HSB
hsb(0, 100%, 18%)
CMYK
cmyk(0%, 100%, 100%, 82%)
Oklch
oklch(18.9% 0.078 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#DDE5F2

Azure · Lavender · Sky Blue

HEX
#DDE5F2
RGB
rgb(221, 229, 242)
HSL
hsl(217, 45%, 91%)
HSB
hsb(217, 9%, 95%)
CMYK
cmyk(9%, 5%, 0%, 5%)
Oklch
oklch(92.0% 0.020 260.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6C7BA6
A7976C

Analogous

6C99A7
6C7BA6
7A6CA7

Triadic

6C7BA6
A76C7C
7CA76C

Split-Comp.

6C7BA6
A77A6C
99A76C

Tetradic

6C7BA6
A76C99
A7976C
6CA77A

Contrast Matrix WCAG 2.1 Contrast

6C7BA6
110B17
2E0000
DDE5F2
—
4.6
AA
4.5
AA Large
3.3
AA Large
4.6
AA
—
1.0
Fail
15.3
AAA
4.5
AA Large
1.0
Fail
—
14.8
AAA
3.3
AA Large
15.3
AAA
14.8
AAA
—
White BG
4.2AA Large
19.4AAA
18.8AAA
1.3Fail
Black BG
5.0AA
1.1Fail
1.1Fail
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72739C
0E0E14
1A1A00
E0E1EF

Deuteranopia

727199
0F0F13
1D2000
E0DFEE

Tritanopia

6D9392
111211
2C0000
DDECEC

Achromatopsia

7B7B7B
0E0E0E
0E0E0E
E4E4E4

Shades & Tints Shades & Tints

#6C7BA6

Dark
Light

#110B17

Dark
Light

#2E0000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6c7ba6;
  --color-2: #110b17;
  --color-3: #2e0000;
  --color-4: #dde5f2;
}

SCSS

$color-1: #6c7ba6;
$color-2: #110b17;
$color-3: #2e0000;
$color-4: #dde5f2;

TAILWIND

colors: {
  'brand-1': '#6c7ba6',
  'brand-2': '#110b17',
  'brand-3': '#2e0000',
  'brand-4': '#dde5f2',
}

RGB Array

[108, 123, 166], [17, 11, 23], [46, 0, 0], [221, 229, 242]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #6C7BA6, #110B17, #2E0000, #DDE5F2 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #6c7ba6; --color-2: #110b17; --color-3: #2e0000; --color-4: #dde5f2. 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 4-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