← Back to Editor

#696C88 · #AAA7C5 · #D1F8D9 · #F9BFF6 · #F172D9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#696C88

Indigo · SlateGray · Navy Blue

HEX
#696C88
RGB
rgb(105, 108, 136)
HSL
hsl(234, 13%, 47%)
HSB
hsb(234, 23%, 53%)
CMYK
cmyk(23%, 21%, 0%, 47%)
Oklch
oklch(53.9% 0.044 280.0)

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

#AAA7C5

Wisteria · DarkGray · Cobalt Blue

HEX
#AAA7C5
RGB
rgb(170, 167, 197)
HSL
hsl(246, 21%, 71%)
HSB
hsb(246, 15%, 77%)
CMYK
cmyk(14%, 15%, 0%, 23%)
Oklch
oklch(74.1% 0.043 289.9)

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

#D1F8D9

Emerald · Beige · Mint Green

HEX
#D1F8D9
RGB
rgb(209, 248, 217)
HSL
hsl(132, 74%, 90%)
HSB
hsb(132, 16%, 97%)
CMYK
cmyk(16%, 0%, 13%, 3%)
Oklch
oklch(94.3% 0.058 151.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#F9BFF6

Mauve · Pink · Lavender

HEX
#F9BFF6
RGB
rgb(249, 191, 246)
HSL
hsl(303, 83%, 86%)
HSB
hsb(303, 23%, 98%)
CMYK
cmyk(0%, 23%, 1%, 2%)
Oklch
oklch(87.4% 0.097 328.1)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#F172D9

Mauve · Orchid · Lilac Purple

HEX
#F172D9
RGB
rgb(241, 114, 217)
HSL
hsl(311, 82%, 70%)
HSB
hsb(311, 53%, 95%)
CMYK
cmyk(0%, 53%, 10%, 5%)
Oklch
oklch(73.5% 0.196 335.1)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

696C88
878468

Analogous

687B87
696C88
756887

Triadic

696C88
87686B
6B8768

Split-Comp.

696C88
877568
7B8768

Tetradic

696C88
87687B
878468
688775

Contrast Matrix WCAG 2.1 Contrast

696C88
AAA7C5
D1F8D9
F9BFF6
F172D9
—
2.2
Fail
4.4
AA Large
3.4
AA Large
2.0
Fail
2.2
Fail
—
2.0
Fail
1.5
Fail
1.1
Fail
4.4
AA Large
2.0
Fail
—
1.3
Fail
2.2
Fail
3.4
AA Large
1.5
Fail
1.3
Fail
—
1.7
Fail
2.0
Fail
1.1
Fail
2.2
Fail
1.7
Fail
—
White BG
5.1AA
2.3Fail
1.2Fail
1.5Fail
2.6Fail
Black BG
4.1AA Large
9.0AAA
18.1AAA
13.8AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A6A81
A9A9BE
E2E2E1
E0DFE9
BAB9C0

Deuteranopia

6A6A80
A9A9BC
E0DDE2
E3E8E6
C1CBBA

Tritanopia

697C7B
AAB8B7
D3E6E8
F6DEDC
EBACA8

Achromatopsia

6E6E6E
ABABAB
E9E9E9
D7D7D7
A4A4A4

Shades & Tints Shades & Tints

#696C88

Dark
Light

#AAA7C5

Dark
Light

#D1F8D9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #696c88;
  --color-2: #aaa7c5;
  --color-3: #d1f8d9;
  --color-4: #f9bff6;
  --color-5: #f172d9;
}

SCSS

$color-1: #696c88;
$color-2: #aaa7c5;
$color-3: #d1f8d9;
$color-4: #f9bff6;
$color-5: #f172d9;

TAILWIND

colors: {
  'brand-1': '#696c88',
  'brand-2': '#aaa7c5',
  'brand-3': '#d1f8d9',
  'brand-4': '#f9bff6',
  'brand-5': '#f172d9',
}

RGB Array

[105, 108, 136], [170, 167, 197], [209, 248, 217], [249, 191, 246], [241, 114, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #696C88, #AAA7C5, #D1F8D9, #F9BFF6, #F172D9 is ideal for: health products, baby brands, fresh-style blogs, 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: #696c88; --color-2: #aaa7c5; --color-3: #d1f8d9; --color-4: #f9bff6; --color-5: #f172d9. 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 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