#858A83 + #A3C1B9 + #FDD3D4 + #EAADB4 + #BFE5DA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#858A83

Ash · Gray · Warm Gray

HEX

#858A83

RGB

rgb(133, 138, 131)

HSL

hsl(103, 3%, 53%)

HSB

hsb(103, 5%, 54%)

CMYK

cmyk(4%, 0%, 5%, 46%)

Oklch

oklch(62.7% 0.012 136.6)

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

#A3C1B9

Jade · DarkGray · Lake Green

HEX

#A3C1B9

RGB

rgb(163, 193, 185)

HSL

hsl(164, 19%, 70%)

HSB

hsb(164, 16%, 76%)

CMYK

cmyk(16%, 0%, 4%, 24%)

Oklch

oklch(78.6% 0.034 177.5)

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

#FDD3D4

Peach Pink · Pink · Cherry Blossom

HEX

#FDD3D4

RGB

rgb(253, 211, 212)

HSL

hsl(359, 91%, 91%)

HSB

hsb(359, 17%, 99%)

CMYK

cmyk(0%, 17%, 16%, 1%)

Oklch

oklch(90.3% 0.047 16.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#EAADB4

Peach Pink · LightPink · Coral Red

HEX

#EAADB4

RGB

rgb(234, 173, 180)

HSL

hsl(353, 59%, 80%)

HSB

hsb(353, 26%, 92%)

CMYK

cmyk(0%, 26%, 23%, 8%)

Oklch

oklch(80.6% 0.072 11.2)

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

#BFE5DA

Jade · LightBlue · Glacier Blue

HEX

#BFE5DA

RGB

rgb(191, 229, 218)

HSL

hsl(163, 42%, 82%)

HSB

hsb(163, 17%, 90%)

CMYK

cmyk(17%, 0%, 5%, 10%)

Oklch

oklch(89.2% 0.042 175.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858A83

89848B

Analogous

898B84

858A83

848B85

Triadic

858A83

84868B

8B8486

Split-Comp.

858A83

85848B

8B8489

Tetradic

858A83

84898B

89848B

8B8584

Contrast Matrix WCAG 2.1 Contrast

858A83	A3C1B9	FDD3D4	EAADB4	BFE5DA
—	1.8 Fail	2.6 Fail	1.9 Fail	2.6 Fail
1.8 Fail	—	1.4 Fail	1.0 Fail	1.4 Fail
2.6 Fail	1.4 Fail	—	1.4 Fail	1.0 Fail
1.9 Fail	1.0 Fail	1.4 Fail	—	1.4 Fail
2.6 Fail	1.4 Fail	1.0 Fail	1.4 Fail	—

White BG

3.5AA Large

1.9Fail

1.4Fail

1.9Fail

1.4Fail

Black BG

6.0AA

10.9AAA

15.4AAA

11.1AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878785

B0B0BB

EBEAD4

D0CFB2

CFD0DD

Deuteranopia

878785

AEACBB

EDF0D4

D3D8B2

CDCADD

Tritanopia

858686

A5BCBD

FBD4D4

E7B1B1

C1DFDF

Achromatopsia

888888

B7B7B7

E0E0E0

C0C0C0

D8D8D8

Shades & Tints Shades & Tints

#858A83

Dark

Light

#A3C1B9

Dark

Light

#FDD3D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858a83;
  --color-2: #a3c1b9;
  --color-3: #fdd3d4;
  --color-4: #eaadb4;
  --color-5: #bfe5da;
}

SCSS

$color-1: #858a83;
$color-2: #a3c1b9;
$color-3: #fdd3d4;
$color-4: #eaadb4;
$color-5: #bfe5da;

TAILWIND

colors: {
  'brand-1': '#858a83',
  'brand-2': '#a3c1b9',
  'brand-3': '#fdd3d4',
  'brand-4': '#eaadb4',
  'brand-5': '#bfe5da',
}

RGB Array

[133, 138, 131], [163, 193, 185], [253, 211, 212], [234, 173, 180], [191, 229, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858A83, #A3C1B9, #FDD3D4, #EAADB4, #BFE5DA 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: #858a83; --color-2: #a3c1b9; --color-3: #fdd3d4; --color-4: #eaadb4; --color-5: #bfe5da. 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