#688F93 + #919A9A + #CE98A2 + #FD9B99 + #E1C5AE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#688F93

Slate Blue · SlateGray · Mint Ice

HEX

#688F93

RGB

rgb(104, 143, 147)

HSL

hsl(186, 17%, 49%)

HSB

hsb(186, 29%, 58%)

CMYK

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

Oklch

oklch(62.3% 0.043 204.0)

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

#919A9A

Ash · LightSlateGray · Silver Sand

HEX

#919A9A

RGB

rgb(145, 154, 154)

HSL

hsl(180, 4%, 59%)

HSB

hsb(180, 6%, 60%)

CMYK

cmyk(6%, 0%, 0%, 40%)

Oklch

oklch(67.9% 0.010 196.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#CE98A2

Peach Pink · Tan · Coral Red

HEX

#CE98A2

RGB

rgb(206, 152, 162)

HSL

hsl(349, 36%, 70%)

HSB

hsb(349, 26%, 81%)

CMYK

cmyk(0%, 26%, 21%, 19%)

Oklch

oklch(73.4% 0.066 6.5)

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

#FD9B99

Peach Pink · LightSalmon · Coral Red

HEX

#FD9B99

RGB

rgb(253, 155, 153)

HSL

hsl(1, 96%, 80%)

HSB

hsb(1, 40%, 99%)

CMYK

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

Oklch

oklch(78.9% 0.118 21.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E1C5AE

Apricot · Wheat · Peach Orange

HEX

#E1C5AE

RGB

rgb(225, 197, 174)

HSL

hsl(27, 46%, 78%)

HSB

hsb(27, 23%, 88%)

CMYK

cmyk(0%, 12%, 23%, 12%)

Oklch

oklch(84.1% 0.045 61.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

688F93

926C68

Analogous

689281

688F93

687992

Triadic

688F93

92688E

8E9268

Split-Comp.

688F93

926879

928168

Tetradic

688F93

816892

926C68

799268

Contrast Matrix WCAG 2.1 Contrast

688F93	919A9A	CE98A2	FD9B99	E1C5AE
—	1.2 Fail	1.5 Fail	1.7 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

3.5AA Large

2.9Fail

2.4Fail

2.0Fail

1.6Fail

Black BG

5.9AA

7.3AAA

8.6AAA

10.3AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797992

95959A

B7B6A0

D3D299

D5D5B4

Deuteranopia

777492

94949A

BABE9F

D8E09A

D7D9B5

Tritanopia

6A9191

919A9A

CB9E9D

F89A9A

E0B8B9

Achromatopsia

848484

979797

A9A9A9

B8B8B8

CBCBCB

Shades & Tints Shades & Tints

#688F93

Dark

Light

#919A9A

Dark

Light

#CE98A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #688f93;
  --color-2: #919a9a;
  --color-3: #ce98a2;
  --color-4: #fd9b99;
  --color-5: #e1c5ae;
}

SCSS

$color-1: #688f93;
$color-2: #919a9a;
$color-3: #ce98a2;
$color-4: #fd9b99;
$color-5: #e1c5ae;

TAILWIND

colors: {
  'brand-1': '#688f93',
  'brand-2': '#919a9a',
  'brand-3': '#ce98a2',
  'brand-4': '#fd9b99',
  'brand-5': '#e1c5ae',
}

RGB Array

[104, 143, 147], [145, 154, 154], [206, 152, 162], [253, 155, 153], [225, 197, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #688F93, #919A9A, #CE98A2, #FD9B99, #E1C5AE 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: #688f93; --color-2: #919a9a; --color-3: #ce98a2; --color-4: #fd9b99; --color-5: #e1c5ae. 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