← Back to Editor

#C6C3D7 · #6E5C85 · #898DAC · #A3B2C9 · #D4E6F0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#C6C3D7

Wisteria · LightGray · Cobalt Blue

HEX
#C6C3D7
RGB
rgb(198, 195, 215)
HSL
hsl(249, 20%, 80%)
HSB
hsb(249, 9%, 84%)
CMYK
cmyk(8%, 9%, 0%, 16%)
Oklch
oklch(82.6% 0.028 292.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#6E5C85

Deep Indigo · DimGray · Violet

HEX
#6E5C85
RGB
rgb(110, 92, 133)
HSL
hsl(266, 18%, 44%)
HSB
hsb(266, 31%, 52%)
CMYK
cmyk(17%, 31%, 0%, 48%)
Oklch
oklch(50.8% 0.067 304.2)

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

#898DAC

Azure · LightSlateGray · Cobalt Blue

HEX
#898DAC
RGB
rgb(137, 141, 172)
HSL
hsl(233, 17%, 61%)
HSB
hsb(233, 20%, 67%)
CMYK
cmyk(20%, 18%, 0%, 33%)
Oklch
oklch(65.1% 0.046 279.3)

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

#A3B2C9

Azure · LightSteelBlue · Cobalt Blue

HEX
#A3B2C9
RGB
rgb(163, 178, 201)
HSL
hsl(216, 26%, 71%)
HSB
hsb(216, 19%, 79%)
CMYK
cmyk(19%, 11%, 0%, 21%)
Oklch
oklch(75.9% 0.037 258.9)

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

#D4E6F0

Sky Blue · Lavender · Sky Blue

HEX
#D4E6F0
RGB
rgb(212, 230, 240)
HSL
hsl(201, 48%, 89%)
HSB
hsb(201, 12%, 94%)
CMYK
cmyk(12%, 4%, 0%, 6%)
Oklch
oklch(91.5% 0.024 231.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6C3D7
D3D6C2

Analogous

C2C9D6
C6C3D7
CFC2D6

Triadic

C6C3D7
D6C5C2
C2D6C5

Split-Comp.

C6C3D7
D6CFC2
C9D6C2

Tetradic

C6C3D7
D6C2C9
D3D6C2
C2D6CF

Contrast Matrix WCAG 2.1 Contrast

C6C3D7
6E5C85
898DAC
A3B2C9
D4E6F0
—
3.5
AA Large
1.9
Fail
1.2
Fail
1.3
Fail
3.5
AA Large
—
1.8
Fail
2.8
Fail
4.6
AA
1.9
Fail
1.8
Fail
—
1.5
Fail
2.5
Fail
1.2
Fail
2.8
Fail
1.5
Fail
—
1.7
Fail
1.3
Fail
4.6
AA
2.5
Fail
1.7
Fail
—
White BG
1.7Fail
5.9AA
3.2AA Large
2.1Fail
1.3Fail
Black BG
12.2AAA
3.5AA Large
6.5AA
9.8AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C5D2
66667B
8B8BA4
A9AAC3
DCDCEE

Deuteranopia

C5C5D1
676979
8B8AA3
A9A8C2
DBD9ED

Tritanopia

C6CECE
6D7372
899F9D
A4BFBE
D5ECEB

Achromatopsia

C6C6C6
666666
8F8F8F
B0B0B0
E2E2E2

Shades & Tints Shades & Tints

#C6C3D7

Dark
Light

#6E5C85

Dark
Light

#898DAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6c3d7;
  --color-2: #6e5c85;
  --color-3: #898dac;
  --color-4: #a3b2c9;
  --color-5: #d4e6f0;
}

SCSS

$color-1: #c6c3d7;
$color-2: #6e5c85;
$color-3: #898dac;
$color-4: #a3b2c9;
$color-5: #d4e6f0;

TAILWIND

colors: {
  'brand-1': '#c6c3d7',
  'brand-2': '#6e5c85',
  'brand-3': '#898dac',
  'brand-4': '#a3b2c9',
  'brand-5': '#d4e6f0',
}

RGB Array

[198, 195, 215], [110, 92, 133], [137, 141, 172], [163, 178, 201], [212, 230, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C6C3D7, #6E5C85, #898DAC, #A3B2C9, #D4E6F0 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c6c3d7; --color-2: #6e5c85; --color-3: #898dac; --color-4: #a3b2c9; --color-5: #d4e6f0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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