#858794 + #A097B7 + #CFA8B9 + #F4BDB7 + #F8DFCA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#858794

Ash · LightSlateGray · Warm Gray

HEX

#858794

RGB

rgb(133, 135, 148)

HSL

hsl(232, 7%, 55%)

HSB

hsb(232, 10%, 58%)

CMYK

cmyk(10%, 9%, 0%, 42%)

Oklch

oklch(62.6% 0.020 278.9)

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

#A097B7

Wisteria · DarkGray · Cobalt Blue

HEX

#A097B7

RGB

rgb(160, 151, 183)

HSL

hsl(257, 18%, 65%)

HSB

hsb(257, 17%, 72%)

CMYK

cmyk(13%, 17%, 0%, 28%)

Oklch

oklch(69.5% 0.047 298.0)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#CFA8B9

Rouge · Silver · Rose Pink

HEX

#CFA8B9

RGB

rgb(207, 168, 185)

HSL

hsl(334, 29%, 74%)

HSB

hsb(334, 19%, 81%)

CMYK

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

Oklch

oklch(77.2% 0.051 350.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F4BDB7

Peach Pink · LightPink · Cherry Blossom

HEX

#F4BDB7

RGB

rgb(244, 189, 183)

HSL

hsl(6, 73%, 84%)

HSB

hsb(6, 25%, 96%)

CMYK

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

Oklch

oklch(84.6% 0.064 25.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F8DFCA

Apricot · Bisque · Peach Orange

HEX

#F8DFCA

RGB

rgb(248, 223, 202)

HSL

hsl(27, 77%, 88%)

HSB

hsb(27, 19%, 97%)

CMYK

cmyk(0%, 10%, 19%, 3%)

Oklch

oklch(91.9% 0.039 62.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858794

949284

Analogous

848E94

858794

8A8494

Triadic

858794

948486

869484

Split-Comp.

858794

948A84

8E9484

Tetradic

858794

94848E

949284

84948A

Contrast Matrix WCAG 2.1 Contrast

858794	A097B7	CFA8B9	F4BDB7	F8DFCA
—	1.3 Fail	1.7 Fail	2.2 Fail	2.8 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.2 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.8 Fail	2.2 Fail	1.6 Fail	1.3 Fail	—

White BG

3.6AA Large

2.8Fail

2.1Fail

1.6Fail

1.3Fail

Black BG

5.9AA

7.6AAA

10.0AAA

12.8AAA

16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

868691

9C9CAF

BEBEB5

DCDCB8

EDEDCF

Deuteranopia

868690

9D9DAD

C0C3B4

DFE3B9

EFF1D0

Tritanopia

858E8E

A0A9A8

CDB2B1

F1BABA

F7D3D4

Achromatopsia

888888

9D9D9D

B6B6B6

CDCDCD

E4E4E4

Shades & Tints Shades & Tints

#858794

Dark

Light

#A097B7

Dark

Light

#CFA8B9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858794;
  --color-2: #a097b7;
  --color-3: #cfa8b9;
  --color-4: #f4bdb7;
  --color-5: #f8dfca;
}

SCSS

$color-1: #858794;
$color-2: #a097b7;
$color-3: #cfa8b9;
$color-4: #f4bdb7;
$color-5: #f8dfca;

TAILWIND

colors: {
  'brand-1': '#858794',
  'brand-2': '#a097b7',
  'brand-3': '#cfa8b9',
  'brand-4': '#f4bdb7',
  'brand-5': '#f8dfca',
}

RGB Array

[133, 135, 148], [160, 151, 183], [207, 168, 185], [244, 189, 183], [248, 223, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858794, #A097B7, #CFA8B9, #F4BDB7, #F8DFCA 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: #858794; --color-2: #a097b7; --color-3: #cfa8b9; --color-4: #f4bdb7; --color-5: #f8dfca. 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