#859798 + #93A9C5 + #D1B2C5 + #FEC6AF + #FFDDB1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#859798

Slate Blue · LightSlateGray · Silver Sand

HEX

#859798

RGB

rgb(133, 151, 152)

HSL

hsl(183, 8%, 56%)

HSB

hsb(183, 12%, 60%)

CMYK

cmyk(12%, 1%, 0%, 40%)

Oklch

oklch(66.3% 0.021 200.7)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#93A9C5

Azure · DarkGray · Cobalt Blue

HEX

#93A9C5

RGB

rgb(147, 169, 197)

HSL

hsl(214, 30%, 67%)

HSB

hsb(214, 25%, 77%)

CMYK

cmyk(25%, 14%, 0%, 23%)

Oklch

oklch(72.8% 0.048 254.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#D1B2C5

Mauve · Silver · Cherry Blossom

HEX

#D1B2C5

RGB

rgb(209, 178, 197)

HSL

hsl(323, 25%, 76%)

HSB

hsb(323, 15%, 82%)

CMYK

cmyk(0%, 15%, 6%, 18%)

Oklch

oklch(79.6% 0.044 340.8)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#FEC6AF

Apricot · LightPink · Peach Orange

HEX

#FEC6AF

RGB

rgb(254, 198, 175)

HSL

hsl(17, 98%, 84%)

HSB

hsb(17, 31%, 100%)

CMYK

cmyk(0%, 22%, 31%, 0%)

Oklch

oklch(87.1% 0.072 43.4)

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

#FFDDB1

Goose Yellow · Wheat · Peach Orange

HEX

#FFDDB1

RGB

rgb(255, 221, 177)

HSL

hsl(34, 100%, 85%)

HSB

hsb(34, 31%, 100%)

CMYK

cmyk(0%, 13%, 31%, 0%)

Oklch

oklch(91.5% 0.068 73.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

859798

988786

Analogous

869890

859798

868E98

Triadic

859798

988697

979886

Split-Comp.

859798

98868E

989086

Tetradic

859798

908698

988786

8E9886

Contrast Matrix WCAG 2.1 Contrast

859798	93A9C5	D1B2C5	FEC6AF	FFDDB1
—	1.3 Fail	1.6 Fail	2.0 Fail	2.4 Fail
1.3 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.6 Fail	1.2 Fail	—	1.3 Fail	1.5 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

3.1AA Large

2.4Fail

1.9Fail

1.5Fail

1.3Fail

Black BG

6.9AA

8.7AAA

10.9AAA

13.9AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D98

9D9DBE

C4C3C0

E6E5B5

F0F0BC

Deuteranopia

8C8A98

9B9ABD

C5C8BF

E9EDB6

F2F5BE

Tritanopia

869898

94B9B8

CFBDBC

FBB9BA

FDC4C6

Achromatopsia

929292

A6A6A6

BDBDBD

D4D4D4

E2E2E2

Shades & Tints Shades & Tints

#859798

Dark

Light

#93A9C5

Dark

Light

#D1B2C5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #859798;
  --color-2: #93a9c5;
  --color-3: #d1b2c5;
  --color-4: #fec6af;
  --color-5: #ffddb1;
}

SCSS

$color-1: #859798;
$color-2: #93a9c5;
$color-3: #d1b2c5;
$color-4: #fec6af;
$color-5: #ffddb1;

TAILWIND

colors: {
  'brand-1': '#859798',
  'brand-2': '#93a9c5',
  'brand-3': '#d1b2c5',
  'brand-4': '#fec6af',
  'brand-5': '#ffddb1',
}

RGB Array

[133, 151, 152], [147, 169, 197], [209, 178, 197], [254, 198, 175], [255, 221, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #859798, #93A9C5, #D1B2C5, #FEC6AF, #FFDDB1 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: #859798; --color-2: #93a9c5; --color-3: #d1b2c5; --color-4: #fec6af; --color-5: #ffddb1. 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