← Back to Editor

#397579 · #97E5D0 · #ACD0C5 · #C5C9C3 · #D9C7BF

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

#397579

Slate Blue · SeaGreen · Mint Ice

HEX
#397579
RGB
rgb(57, 117, 121)
HSL
hsl(184, 36%, 35%)
HSB
hsb(184, 53%, 47%)
CMYK
cmyk(53%, 3%, 0%, 53%)
Oklch
oklch(52.4% 0.062 201.2)

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

#97E5D0

Jade · LightBlue · Lake Green

HEX
#97E5D0
RGB
rgb(151, 229, 208)
HSL
hsl(164, 60%, 75%)
HSB
hsb(164, 34%, 90%)
CMYK
cmyk(34%, 0%, 9%, 10%)
Oklch
oklch(86.5% 0.083 175.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#ACD0C5

Jade · Silver · Lake Green

HEX
#ACD0C5
RGB
rgb(172, 208, 197)
HSL
hsl(162, 28%, 75%)
HSB
hsb(162, 17%, 82%)
CMYK
cmyk(17%, 0%, 5%, 18%)
Oklch
oklch(82.8% 0.041 174.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C5C9C3

Silver Gray · Silver · Pearl Gray

HEX
#C5C9C3
RGB
rgb(197, 201, 195)
HSL
hsl(100, 5%, 78%)
HSB
hsb(100, 3%, 79%)
CMYK
cmyk(2%, 0%, 3%, 21%)
Oklch
oklch(83.1% 0.009 134.9)

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

#D9C7BF

Apricot · LightGray · Peach Orange

HEX
#D9C7BF
RGB
rgb(217, 199, 191)
HSL
hsl(18, 25%, 80%)
HSB
hsb(18, 12%, 85%)
CMYK
cmyk(0%, 8%, 12%, 15%)
Oklch
oklch(84.2% 0.023 45.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

397579
793D39

Analogous

39795E
397579
395579

Triadic

397579
793975
757939

Split-Comp.

397579
793955
795E39

Tetradic

397579
5E3979
793D39
557939

Contrast Matrix WCAG 2.1 Contrast

397579
97E5D0
ACD0C5
C5C9C3
D9C7BF
—
3.6
AA Large
3.1
AA Large
3.1
AA Large
3.2
AA Large
3.6
AA Large
—
1.1
Fail
1.2
Fail
1.1
Fail
3.1
AA Large
1.1
Fail
—
1.0
Fail
1.0
Fail
3.1
AA Large
1.2
Fail
1.0
Fail
—
1.0
Fail
3.2
AA Large
1.1
Fail
1.0
Fail
1.0
Fail
—
White BG
5.3AA
1.5Fail
1.7Fail
1.7Fail
1.6Fail
Black BG
4.0AA Large
14.4AAA
12.6AAA
12.5AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535478
B9B9D5
BCBCC8
C7C7C4
D1D1C1

Deuteranopia

504B78
B4AED6
BAB7C8
C7C6C5
D2D4C1

Tritanopia

3C7777
9BD9DA
AECACA
C5C6C6
D8C2C3

Achromatopsia

646464
CBCBCB
C4C4C4
C7C7C7
CBCBCB

Shades & Tints Shades & Tints

#397579

Dark
Light

#97E5D0

Dark
Light

#ACD0C5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #397579;
  --color-2: #97e5d0;
  --color-3: #acd0c5;
  --color-4: #c5c9c3;
  --color-5: #d9c7bf;
}

SCSS

$color-1: #397579;
$color-2: #97e5d0;
$color-3: #acd0c5;
$color-4: #c5c9c3;
$color-5: #d9c7bf;

TAILWIND

colors: {
  'brand-1': '#397579',
  'brand-2': '#97e5d0',
  'brand-3': '#acd0c5',
  'brand-4': '#c5c9c3',
  'brand-5': '#d9c7bf',
}

RGB Array

[57, 117, 121], [151, 229, 208], [172, 208, 197], [197, 201, 195], [217, 199, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #397579, #97E5D0, #ACD0C5, #C5C9C3, #D9C7BF 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: #397579; --color-2: #97e5d0; --color-3: #acd0c5; --color-4: #c5c9c3; --color-5: #d9c7bf. 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