← Back to Editor

#C4D3AA · #7DA194 · #6C8389 · #5C6B7A · #4F4F6D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C4D3AA

Willow Green · Silver · Apple Green

HEX
#C4D3AA
RGB
rgb(196, 211, 170)
HSL
hsl(82, 32%, 75%)
HSB
hsb(82, 19%, 83%)
CMYK
cmyk(7%, 0%, 19%, 17%)
Oklch
oklch(84.5% 0.058 124.0)

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

#7DA194

Mineral Blue · LightSlateGray · Olive Green

HEX
#7DA194
RGB
rgb(125, 161, 148)
HSL
hsl(158, 16%, 56%)
HSB
hsb(158, 22%, 63%)
CMYK
cmyk(22%, 0%, 8%, 37%)
Oklch
oklch(67.8% 0.044 170.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#6C8389

Slate Blue · SlateGray · Mint Ice

HEX
#6C8389
RGB
rgb(108, 131, 137)
HSL
hsl(192, 12%, 48%)
HSB
hsb(192, 21%, 54%)
CMYK
cmyk(21%, 4%, 0%, 46%)
Oklch
oklch(59.4% 0.028 215.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5C6B7A

Indigo · DimGray · Navy Blue

HEX
#5C6B7A
RGB
rgb(92, 107, 122)
HSL
hsl(210, 14%, 42%)
HSB
hsb(210, 25%, 48%)
CMYK
cmyk(25%, 12%, 0%, 52%)
Oklch
oklch(52.1% 0.030 248.4)

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

#4F4F6D

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4F4F6D
RGB
rgb(79, 79, 109)
HSL
hsl(240, 16%, 37%)
HSB
hsb(240, 28%, 43%)
CMYK
cmyk(28%, 28%, 0%, 57%)
Oklch
oklch(44.0% 0.049 284.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4D3AA
BAABD4

Analogous

D4CEAB
C4D3AA
B0D4AB

Triadic

C4D3AA
ABC5D4
D4ABC5

Split-Comp.

C4D3AA
ABB0D4
CEABD4

Tetradic

C4D3AA
ABD4CE
BAABD4
D4ABB0

Contrast Matrix WCAG 2.1 Contrast

C4D3AA
7DA194
6C8389
5C6B7A
4F4F6D
—
1.8
Fail
2.5
Fail
3.5
AA Large
5.0
AA
1.8
Fail
—
1.4
Fail
1.9
Fail
2.8
Fail
2.5
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
3.5
AA Large
1.9
Fail
1.4
Fail
—
1.4
Fail
5.0
AA
2.8
Fail
2.0
Fail
1.4
Fail
—
White BG
1.6Fail
2.8Fail
4.0AA Large
5.5AA
7.9AAA
Black BG
13.2AAA
7.4AAA
5.2AA
3.8AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACBB4
8D8D97
767688
626376
4F4F66

Deuteranopia

CAC9B6
8B8898
757387
626176
4F4F64

Tritanopia

C5BCBD
7F9A9A
6D8686
5D7473
4F605F

Achromatopsia

CACACA
959595
7D7D7D
686868
525252

Shades & Tints Shades & Tints

#C4D3AA

Dark
Light

#7DA194

Dark
Light

#6C8389

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4d3aa;
  --color-2: #7da194;
  --color-3: #6c8389;
  --color-4: #5c6b7a;
  --color-5: #4f4f6d;
}

SCSS

$color-1: #c4d3aa;
$color-2: #7da194;
$color-3: #6c8389;
$color-4: #5c6b7a;
$color-5: #4f4f6d;

TAILWIND

colors: {
  'brand-1': '#c4d3aa',
  'brand-2': '#7da194',
  'brand-3': '#6c8389',
  'brand-4': '#5c6b7a',
  'brand-5': '#4f4f6d',
}

RGB Array

[196, 211, 170], [125, 161, 148], [108, 131, 137], [92, 107, 122], [79, 79, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4D3AA, #7DA194, #6C8389, #5C6B7A, #4F4F6D is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #c4d3aa; --color-2: #7da194; --color-3: #6c8389; --color-4: #5c6b7a; --color-5: #4f4f6d. 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. 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