#7D9391 + #97B4AF + #C8DCDD + #ECF6BD + #BED17A · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7D9391

Mineral Blue · LightSlateGray · Warm Gray

HEX

#7D9391

RGB

rgb(125, 147, 145)

HSL

hsl(175, 9%, 53%)

HSB

hsb(175, 15%, 58%)

CMYK

cmyk(15%, 0%, 1%, 42%)

Oklch

oklch(64.5% 0.025 189.8)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#97B4AF

Jade · DarkGray · Lake Green

HEX

#97B4AF

RGB

rgb(151, 180, 175)

HSL

hsl(170, 16%, 65%)

HSB

hsb(170, 16%, 71%)

CMYK

cmyk(16%, 0%, 3%, 29%)

Oklch

oklch(74.7% 0.033 183.9)

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

#C8DCDD

Sky Blue · LightGray · Glacier Blue

HEX

#C8DCDD

RGB

rgb(200, 220, 221)

HSL

hsl(183, 24%, 83%)

HSB

hsb(183, 10%, 87%)

CMYK

cmyk(10%, 0%, 0%, 13%)

Oklch

oklch(88.0% 0.021 200.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#ECF6BD

Willow Green · Bisque · Mint Green

HEX

#ECF6BD

RGB

rgb(236, 246, 189)

HSL

hsl(71, 76%, 85%)

HSB

hsb(71, 23%, 96%)

CMYK

cmyk(4%, 0%, 23%, 4%)

Oklch

oklch(95.2% 0.074 115.9)

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

#BED17A

Willow Green · Tan · Apple Green

HEX

#BED17A

RGB

rgb(190, 209, 122)

HSL

hsl(73, 49%, 65%)

HSB

hsb(73, 42%, 82%)

CMYK

cmyk(9%, 0%, 42%, 18%)

Oklch

oklch(82.7% 0.114 119.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D9391

927C7E

Analogous

7C9285

7D9391

7C8992

Triadic

7D9391

907C92

92907C

Split-Comp.

7D9391

927C89

92857C

Tetradic

7D9391

857C92

927C7E

89927C

Contrast Matrix WCAG 2.1 Contrast

7D9391	97B4AF	C8DCDD	ECF6BD	BED17A
—	1.5 Fail	2.3 Fail	2.9 Fail	2.0 Fail
1.5 Fail	—	1.6 Fail	2.0 Fail	1.3 Fail
2.3 Fail	1.6 Fail	—	1.3 Fail	1.2 Fail
2.9 Fail	2.0 Fail	1.3 Fail	—	1.5 Fail
2.0 Fail	1.3 Fail	1.2 Fail	1.5 Fail	—

White BG

3.3AA Large

2.2Fail

1.4Fail

1.1Fail

1.7Fail

Black BG

6.5AA

9.5AAA

14.7AAA

18.5AAA

12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878791

A4A4B0

D1D1DD

F0F0CB

C6C68F

Deuteranopia

858492

A2A0B1

D0CEDD

F0EFCE

C5C494

Tritanopia

7E9292

98B1B1

C9DDDD

EDD6D8

BFA0A3

Achromatopsia

8C8C8C

ABABAB

D6D6D6

EDEDED

C1C1C1

Shades & Tints Shades & Tints

#7D9391

Dark

Light

#97B4AF

Dark

Light

#C8DCDD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d9391;
  --color-2: #97b4af;
  --color-3: #c8dcdd;
  --color-4: #ecf6bd;
  --color-5: #bed17a;
}

SCSS

$color-1: #7d9391;
$color-2: #97b4af;
$color-3: #c8dcdd;
$color-4: #ecf6bd;
$color-5: #bed17a;

TAILWIND

colors: {
  'brand-1': '#7d9391',
  'brand-2': '#97b4af',
  'brand-3': '#c8dcdd',
  'brand-4': '#ecf6bd',
  'brand-5': '#bed17a',
}

RGB Array

[125, 147, 145], [151, 180, 175], [200, 220, 221], [236, 246, 189], [190, 209, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #7D9391, #97B4AF, #C8DCDD, #ECF6BD, #BED17A is ideal for: health products, baby brands, fresh-style blogs. 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: #7d9391; --color-2: #97b4af; --color-3: #c8dcdd; --color-4: #ecf6bd; --color-5: #bed17a. 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. 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 cool-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