← Back to Editor

#685B67 · #6B6986 · #7189A3 · #9EBFC4 · #CFD4C8

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

#685B67

Ink Gray · DimGray · Charcoal

HEX
#685B67
RGB
rgb(104, 91, 103)
HSL
hsl(305, 7%, 38%)
HSB
hsb(305, 12%, 41%)
CMYK
cmyk(0%, 12%, 1%, 59%)
Oklch
oklch(48.8% 0.025 328.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#6B6986

Deep Indigo · SlateGray · Navy Blue

HEX
#6B6986
RGB
rgb(107, 105, 134)
HSL
hsl(244, 12%, 47%)
HSB
hsb(244, 22%, 53%)
CMYK
cmyk(20%, 22%, 0%, 47%)
Oklch
oklch(53.3% 0.045 287.9)

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

#7189A3

Azure · LightSlateGray · Navy Blue

HEX
#7189A3
RGB
rgb(113, 137, 163)
HSL
hsl(211, 21%, 54%)
HSB
hsb(211, 31%, 64%)
CMYK
cmyk(31%, 16%, 0%, 36%)
Oklch
oklch(62.1% 0.048 250.7)

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

#9EBFC4

Sky Blue · LightSteelBlue · Lake Green

HEX
#9EBFC4
RGB
rgb(158, 191, 196)
HSL
hsl(188, 24%, 69%)
HSB
hsb(188, 19%, 77%)
CMYK
cmyk(19%, 3%, 0%, 23%)
Oklch
oklch(78.2% 0.036 207.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#CFD4C8

Willow Green · LightGray · Mint Green

HEX
#CFD4C8
RGB
rgb(207, 212, 200)
HSL
hsl(85, 12%, 81%)
HSB
hsb(85, 6%, 83%)
CMYK
cmyk(2%, 0%, 6%, 17%)
Oklch
oklch(86.3% 0.017 125.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

685B67
5A685B

Analogous

625A68
685B67
685A60

Triadic

685B67
67685A
5A6768

Split-Comp.

685B67
60685A
5A6862

Tetradic

685B67
68625A
5A685B
5A6068

Contrast Matrix WCAG 2.1 Contrast

685B67
6B6986
7189A3
9EBFC4
CFD4C8
—
1.2
Fail
1.8
Fail
3.3
AA Large
4.2
AA Large
1.2
Fail
—
1.5
Fail
2.7
Fail
3.5
AA Large
1.8
Fail
1.5
Fail
—
1.8
Fail
2.4
Fail
3.3
AA Large
2.7
Fail
1.8
Fail
—
1.3
Fail
4.2
AA Large
3.5
AA Large
2.4
Fail
1.3
Fail
—
White BG
6.4AA
5.3AA
3.6AA Large
2.0Fail
1.5Fail
Black BG
3.3AA Large
4.0AA Large
5.8AA
10.7AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

626264
6A6A7F
7B7C9D
ACADC3
D1D1CB

Deuteranopia

636463
6A6A7D
7A789B
AAA8C3
D1D0CC

Tritanopia

676261
6B7978
729897
A0C2C2
CFCDCE

Achromatopsia

606060
6D6D6D
858585
B6B6B6
D1D1D1

Shades & Tints Shades & Tints

#685B67

Dark
Light

#6B6986

Dark
Light

#7189A3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #685b67;
  --color-2: #6b6986;
  --color-3: #7189a3;
  --color-4: #9ebfc4;
  --color-5: #cfd4c8;
}

SCSS

$color-1: #685b67;
$color-2: #6b6986;
$color-3: #7189a3;
$color-4: #9ebfc4;
$color-5: #cfd4c8;

TAILWIND

colors: {
  'brand-1': '#685b67',
  'brand-2': '#6b6986',
  'brand-3': '#7189a3',
  'brand-4': '#9ebfc4',
  'brand-5': '#cfd4c8',
}

RGB Array

[104, 91, 103], [107, 105, 134], [113, 137, 163], [158, 191, 196], [207, 212, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #685B67, #6B6986, #7189A3, #9EBFC4, #CFD4C8 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: #685b67; --color-2: #6b6986; --color-3: #7189a3; --color-4: #9ebfc4; --color-5: #cfd4c8. 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