← Back to Editor

#CCE3D5 · #C4CCC7 · #A6ADA9 · #6B748C · #694F68

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

#CCE3D5

Celadon · LightGray · Mint Green

HEX
#CCE3D5
RGB
rgb(204, 227, 213)
HSL
hsl(143, 29%, 85%)
HSB
hsb(143, 10%, 89%)
CMYK
cmyk(10%, 0%, 6%, 11%)
Oklch
oklch(89.5% 0.031 159.0)

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

#C4CCC7

Silver Gray · Silver · Pearl Gray

HEX
#C4CCC7
RGB
rgb(196, 204, 199)
HSL
hsl(142, 7%, 78%)
HSB
hsb(142, 4%, 80%)
CMYK
cmyk(4%, 0%, 2%, 20%)
Oklch
oklch(83.8% 0.011 158.8)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#A6ADA9

Ash · DarkGray · Silver Sand

HEX
#A6ADA9
RGB
rgb(166, 173, 169)
HSL
hsl(146, 4%, 66%)
HSB
hsb(146, 4%, 68%)
CMYK
cmyk(4%, 0%, 2%, 32%)
Oklch
oklch(74.1% 0.010 161.3)

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

#6B748C

Indigo · SlateGray · Navy Blue

HEX
#6B748C
RGB
rgb(107, 116, 140)
HSL
hsl(224, 13%, 48%)
HSB
hsb(224, 24%, 55%)
CMYK
cmyk(24%, 17%, 0%, 45%)
Oklch
oklch(56.0% 0.039 269.0)

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

#694F68

Rose Purple · DimGray · Eggplant

HEX
#694F68
RGB
rgb(105, 79, 104)
HSL
hsl(302, 14%, 36%)
HSB
hsb(302, 25%, 41%)
CMYK
cmyk(0%, 25%, 1%, 59%)
Oklch
oklch(46.4% 0.051 327.6)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE3D5
E4CEDB

Analogous

D0E4CE
CCE3D5
CEE4E1

Triadic

CCE3D5
D6CEE4
E4D6CE

Split-Comp.

CCE3D5
E1CEE4
E4CED0

Tetradic

CCE3D5
CED0E4
E4CEDB
E4E1CE

Contrast Matrix WCAG 2.1 Contrast

CCE3D5
C4CCC7
A6ADA9
6B748C
694F68
—
1.2
Fail
1.7
Fail
3.4
AA Large
5.3
AA
1.2
Fail
—
1.4
Fail
2.8
Fail
4.4
AA Large
1.7
Fail
1.4
Fail
—
2.0
Fail
3.1
AA Large
3.4
AA Large
2.8
Fail
2.0
Fail
—
1.5
Fail
5.3
AA
4.4
AA Large
3.1
AA Large
1.5
Fail
—
White BG
1.4Fail
1.6Fail
2.3Fail
4.7AA
7.2AAA
Black BG
15.5AAA
12.8AAA
9.2AAA
4.5AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6D8
C7C8C8
A9A9AA
6F6F86
5E5E62

Deuteranopia

D5D3D9
C7C6C8
A9A8AA
6E6E85
5F6161

Tritanopia

CDDBDC
C4C9C9
A6ABAB
6B8281
685D5C

Achromatopsia

DBDBDB
C9C9C9
AAAAAA
747474
5A5A5A

Shades & Tints Shades & Tints

#CCE3D5

Dark
Light

#C4CCC7

Dark
Light

#A6ADA9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce3d5;
  --color-2: #c4ccc7;
  --color-3: #a6ada9;
  --color-4: #6b748c;
  --color-5: #694f68;
}

SCSS

$color-1: #cce3d5;
$color-2: #c4ccc7;
$color-3: #a6ada9;
$color-4: #6b748c;
$color-5: #694f68;

TAILWIND

colors: {
  'brand-1': '#cce3d5',
  'brand-2': '#c4ccc7',
  'brand-3': '#a6ada9',
  'brand-4': '#6b748c',
  'brand-5': '#694f68',
}

RGB Array

[204, 227, 213], [196, 204, 199], [166, 173, 169], [107, 116, 140], [105, 79, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCE3D5, #C4CCC7, #A6ADA9, #6B748C, #694F68 is ideal for: brand design, premium product pages, magazine layouts, 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: #cce3d5; --color-2: #c4ccc7; --color-3: #a6ada9; --color-4: #6b748c; --color-5: #694f68. 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. 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