#618893 + #7DABB0 + #9FC4B9 + #C0D8C4 + #D9F2C9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#618893

Slate Blue · SlateGray · Mint Ice

HEX

#618893

RGB

rgb(97, 136, 147)

HSL

hsl(193, 20%, 48%)

HSB

hsb(193, 34%, 58%)

CMYK

cmyk(34%, 7%, 0%, 42%)

Oklch

oklch(60.2% 0.046 217.2)

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

#7DABB0

Slate Blue · CadetBlue · Lake Green

HEX

#7DABB0

RGB

rgb(125, 171, 176)

HSL

hsl(186, 24%, 59%)

HSB

hsb(186, 29%, 69%)

CMYK

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

Oklch

oklch(71.0% 0.050 204.5)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#9FC4B9

Jade · DarkGray · Lake Green

HEX

#9FC4B9

RGB

rgb(159, 196, 185)

HSL

hsl(162, 24%, 70%)

HSB

hsb(162, 19%, 77%)

CMYK

cmyk(19%, 0%, 6%, 23%)

Oklch

oklch(79.0% 0.043 175.2)

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

#C0D8C4

Celadon · Silver · Apple Green

HEX

#C0D8C4

RGB

rgb(192, 216, 196)

HSL

hsl(130, 24%, 80%)

HSB

hsb(130, 11%, 85%)

CMYK

cmyk(11%, 0%, 9%, 15%)

Oklch

oklch(85.9% 0.038 150.2)

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

#D9F2C9

Emerald · LightGray · Mint Green

HEX

#D9F2C9

RGB

rgb(217, 242, 201)

HSL

hsl(97, 61%, 87%)

HSB

hsb(97, 17%, 95%)

CMYK

cmyk(10%, 0%, 17%, 5%)

Oklch

oklch(93.2% 0.060 133.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

618893

936D62

Analogous

629385

618893

627093

Triadic

618893

936288

889362

Split-Comp.

618893

936270

938562

Tetradic

618893

856293

936D62

709362

Contrast Matrix WCAG 2.1 Contrast

618893	7DABB0	9FC4B9	C0D8C4	D9F2C9
—	1.5 Fail	2.0 Fail	2.5 Fail	3.2 AA Large
1.5 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
2.0 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.5 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
3.2 AA Large	2.1 Fail	1.6 Fail	1.3 Fail	—

White BG

3.9AA Large

2.5Fail

1.9Fail

1.5Fail

1.2Fail

Black BG

5.5AA

8.3AAA

11.1AAA

13.9AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727290

9191AF

AFAFBC

CACBC9

E4E4D3

Deuteranopia

706D90

8E8BAF

ADAABC

C9C7CA

E2E0D5

Tritanopia

638E8E

7FAEAE

A1BEBE

C1CDCE

DADBDC

Achromatopsia

7E7E7E

9E9E9E

B8B8B8

CFCFCF

E6E6E6

Shades & Tints Shades & Tints

#618893

Dark

Light

#7DABB0

Dark

Light

#9FC4B9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #618893;
  --color-2: #7dabb0;
  --color-3: #9fc4b9;
  --color-4: #c0d8c4;
  --color-5: #d9f2c9;
}

SCSS

$color-1: #618893;
$color-2: #7dabb0;
$color-3: #9fc4b9;
$color-4: #c0d8c4;
$color-5: #d9f2c9;

TAILWIND

colors: {
  'brand-1': '#618893',
  'brand-2': '#7dabb0',
  'brand-3': '#9fc4b9',
  'brand-4': '#c0d8c4',
  'brand-5': '#d9f2c9',
}

RGB Array

[97, 136, 147], [125, 171, 176], [159, 196, 185], [192, 216, 196], [217, 242, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #618893, #7DABB0, #9FC4B9, #C0D8C4, #D9F2C9 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: #618893; --color-2: #7dabb0; --color-3: #9fc4b9; --color-4: #c0d8c4; --color-5: #d9f2c9. 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 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