#85707F + #D26A82 + #F193A9 + #B9E3CE + #B9FEDA · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#85707F

Rose Purple · Gray · Warm Gray

HEX

#85707F

RGB

rgb(133, 112, 127)

HSL

hsl(317, 9%, 48%)

HSB

hsb(317, 16%, 52%)

CMYK

cmyk(0%, 16%, 5%, 48%)

Oklch

oklch(57.0% 0.034 336.3)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

#D26A82

Peach Pink · LightCoral · Coral Red

HEX

#D26A82

RGB

rgb(210, 106, 130)

HSL

hsl(346, 54%, 62%)

HSB

hsb(346, 50%, 82%)

CMYK

cmyk(0%, 50%, 38%, 18%)

Oklch

oklch(65.2% 0.133 6.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F193A9

Peach Pink · LightPink · Coral Red

HEX

#F193A9

RGB

rgb(241, 147, 169)

HSL

hsl(346, 77%, 76%)

HSB

hsb(346, 39%, 95%)

CMYK

cmyk(0%, 39%, 30%, 5%)

Oklch

oklch(76.6% 0.116 5.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B9E3CE

Jade · LightBlue · Mint Green

HEX

#B9E3CE

RGB

rgb(185, 227, 206)

HSL

hsl(150, 43%, 81%)

HSB

hsb(150, 19%, 89%)

CMYK

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

Oklch

oklch(88.0% 0.052 163.5)

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

#B9FEDA

Emerald · LightBlue · Mint Green

HEX

#B9FEDA

RGB

rgb(185, 254, 218)

HSL

hsl(149, 97%, 86%)

HSB

hsb(149, 27%, 100%)

CMYK

cmyk(27%, 0%, 14%, 0%)

Oklch

oklch(94.2% 0.084 161.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85707F

6F8576

Analogous

816F85

85707F

856F74

Triadic

85707F

7F856F

6F7F85

Split-Comp.

85707F

74856F

6F8581

Tetradic

85707F

85816F

6F8576

6F7485

Contrast Matrix WCAG 2.1 Contrast

85707F	D26A82	F193A9	B9E3CE	B9FEDA
—	1.3 Fail	2.1 Fail	3.2 AA Large	3.9 AA Large
1.3 Fail	—	1.5 Fail	2.4 Fail	3.0 Fail
2.1 Fail	1.5 Fail	—	1.6 Fail	1.9 Fail
3.2 AA Large	2.4 Fail	1.6 Fail	—	1.2 Fail
3.9 AA Large	3.0 Fail	1.9 Fail	1.2 Fail	—

White BG

4.5AA

3.4AA Large

2.2Fail

1.4Fail

1.2Fail

Black BG

4.6AA

6.1AA

9.5AAA

14.9AAA

18.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C7B

A5A47C

C8C7A4

CBCCD3

D7D7E3

Deuteranopia

7D7F7B

ABB37B

CED5A2

C9C6D4

D3CEE5

Tritanopia

847978

CD7877

EC9F9F

BBD7D8

BCEAEB

Achromatopsia

787878

8C8C8C

B2B2B2

D4D4D4

E5E5E5

Shades & Tints Shades & Tints

#85707F

Dark

Light

#D26A82

Dark

Light

#F193A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85707f;
  --color-2: #d26a82;
  --color-3: #f193a9;
  --color-4: #b9e3ce;
  --color-5: #b9feda;
}

SCSS

$color-1: #85707f;
$color-2: #d26a82;
$color-3: #f193a9;
$color-4: #b9e3ce;
$color-5: #b9feda;

TAILWIND

colors: {
  'brand-1': '#85707f',
  'brand-2': '#d26a82',
  'brand-3': '#f193a9',
  'brand-4': '#b9e3ce',
  'brand-5': '#b9feda',
}

RGB Array

[133, 112, 127], [210, 106, 130], [241, 147, 169], [185, 227, 206], [185, 254, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #85707F, #D26A82, #F193A9, #B9E3CE, #B9FEDA 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: #85707f; --color-2: #d26a82; --color-3: #f193a9; --color-4: #b9e3ce; --color-5: #b9feda. 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