#868A8D + #FF9180 + #F7A993 + #E6BDAB + #DBBFB3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#868A8D

Ash · Gray · Warm Gray

HEX

#868A8D

RGB

rgb(134, 138, 141)

HSL

hsl(206, 3%, 54%)

HSB

hsb(206, 5%, 55%)

CMYK

cmyk(5%, 2%, 0%, 45%)

Oklch

oklch(63.1% 0.007 239.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#FF9180

Peach Pink · LightSalmon · Coral Red

HEX

#FF9180

RGB

rgb(255, 145, 128)

HSL

hsl(8, 100%, 75%)

HSB

hsb(8, 50%, 100%)

CMYK

cmyk(0%, 43%, 50%, 0%)

Oklch

oklch(77.0% 0.136 29.8)

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

#F7A993

Peach Pink · LightSalmon · Coral Red

HEX

#F7A993

RGB

rgb(247, 169, 147)

HSL

hsl(13, 86%, 77%)

HSB

hsb(13, 40%, 97%)

CMYK

cmyk(0%, 32%, 40%, 3%)

Oklch

oklch(80.5% 0.098 36.4)

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

#E6BDAB

Apricot · LightPink · Peach Orange

HEX

#E6BDAB

RGB

rgb(230, 189, 171)

HSL

hsl(18, 54%, 79%)

HSB

hsb(18, 26%, 90%)

CMYK

cmyk(0%, 18%, 26%, 10%)

Oklch

oklch(83.0% 0.053 45.0)

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

#DBBFB3

Apricot · Silver · Peach Orange

HEX

#DBBFB3

RGB

rgb(219, 191, 179)

HSL

hsl(18, 36%, 78%)

HSB

hsb(18, 18%, 86%)

CMYK

cmyk(0%, 13%, 18%, 14%)

Oklch

oklch(82.5% 0.036 44.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

868A8D

8D8986

Analogous

868D8D

868A8D

86878D

Triadic

868A8D

8D868A

8A8D86

Split-Comp.

868A8D

8D8687

8D8D86

Tetradic

868A8D

8D868D

8D8986

878D86

Contrast Matrix WCAG 2.1 Contrast

868A8D	FF9180	F7A993	E6BDAB	DBBFB3
—	1.6 Fail	1.8 Fail	2.0 Fail	2.0 Fail
1.6 Fail	—	1.1 Fail	1.3 Fail	1.3 Fail
1.8 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
2.0 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
2.0 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

3.5AA Large

2.2Fail

1.9Fail

1.7Fail

Black BG

6.0AA

9.6AAA

11.1AAA

12.2AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

88888C

CFCE84

D5D598

D4D4AF

CFCFB6

Deuteranopia

88878C

D6DE85

DAE09A

D7DAB0

D1D3B7

Tritanopia

868C8C

FA8788

F39D9D

E4B3B4

DAB8B9

Achromatopsia

898989

B0B0B0

BEBEBE

C7C7C7

C6C6C6

Shades & Tints Shades & Tints

#868A8D

Dark

Light

#FF9180

Dark

Light

#F7A993

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #868a8d;
  --color-2: #ff9180;
  --color-3: #f7a993;
  --color-4: #e6bdab;
  --color-5: #dbbfb3;
}

SCSS

$color-1: #868a8d;
$color-2: #ff9180;
$color-3: #f7a993;
$color-4: #e6bdab;
$color-5: #dbbfb3;

TAILWIND

colors: {
  'brand-1': '#868a8d',
  'brand-2': '#ff9180',
  'brand-3': '#f7a993',
  'brand-4': '#e6bdab',
  'brand-5': '#dbbfb3',
}

RGB Array

[134, 138, 141], [255, 145, 128], [247, 169, 147], [230, 189, 171], [219, 191, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #868A8D, #FF9180, #F7A993, #E6BDAB, #DBBFB3 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: #868a8d; --color-2: #ff9180; --color-3: #f7a993; --color-4: #e6bdab; --color-5: #dbbfb3. 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