#818A8D + #8FB3A6 + #B1D27D + #FFD8BF + #FD94B7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#818A8D

Ash · LightSlateGray · Warm Gray

HEX

#818A8D

RGB

rgb(129, 138, 141)

HSL

hsl(195, 5%, 53%)

HSB

hsb(195, 9%, 55%)

CMYK

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

Oklch

oklch(62.7% 0.012 219.7)

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

#8FB3A6

Jade · DarkSeaGreen · Apple Green

HEX

#8FB3A6

RGB

rgb(143, 179, 166)

HSL

hsl(158, 19%, 63%)

HSB

hsb(158, 20%, 70%)

CMYK

cmyk(20%, 0%, 7%, 30%)

Oklch

oklch(73.6% 0.043 171.1)

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

#B1D27D

Willow Green · DarkSeaGreen · Apple Green

HEX

#B1D27D

RGB

rgb(177, 210, 125)

HSL

hsl(83, 49%, 66%)

HSB

hsb(83, 40%, 82%)

CMYK

cmyk(16%, 0%, 40%, 18%)

Oklch

oklch(82.0% 0.117 126.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#FFD8BF

Apricot · Bisque · Peach Orange

HEX

#FFD8BF

RGB

rgb(255, 216, 191)

HSL

hsl(23, 100%, 87%)

HSB

hsb(23, 25%, 100%)

CMYK

cmyk(0%, 15%, 25%, 0%)

Oklch

oklch(90.9% 0.055 54.5)

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

#FD94B7

Rouge · LightPink · Cherry Blossom

HEX

#FD94B7

RGB

rgb(253, 148, 183)

HSL

hsl(340, 96%, 79%)

HSB

hsb(340, 42%, 99%)

CMYK

cmyk(0%, 42%, 28%, 1%)

Oklch

oklch(78.6% 0.132 359.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

818A8D

8D8481

Analogous

818D8A

818A8D

81848D

Triadic

818A8D

8D818A

8A8D81

Split-Comp.

818A8D

8D8184

8D8A81

Tetradic

818A8D

8A818D

8D8481

848D81

Contrast Matrix WCAG 2.1 Contrast

818A8D	8FB3A6	B1D27D	FFD8BF	FD94B7
—	1.5 Fail	2.1 Fail	2.7 Fail	1.7 Fail
1.5 Fail	—	1.4 Fail	1.7 Fail	1.1 Fail
2.1 Fail	1.4 Fail	—	1.3 Fail	1.2 Fail
2.7 Fail	1.7 Fail	1.3 Fail	—	1.6 Fail
1.7 Fail	1.1 Fail	1.2 Fail	1.6 Fail	—

White BG

3.5AA Large

2.3Fail

1.7Fail

1.3Fail

2.1Fail

Black BG

6.0AA

9.2AAA

12.4AAA

15.8AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85858C

9F9FA9

BFC092

EEEEC5

D0CFAF

Deuteranopia

84848C

9D9AAA

BDBB97

F0F3C7

D6DEAD

Tritanopia

818C8C

91ACAC

B3A2A5

FDCACB

F8A8A6

Achromatopsia

888888

A7A7A7

BEBEBE

E1E1E1

B7B7B7

Shades & Tints Shades & Tints

#818A8D

Dark

Light

#8FB3A6

Dark

Light

#B1D27D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #818a8d;
  --color-2: #8fb3a6;
  --color-3: #b1d27d;
  --color-4: #ffd8bf;
  --color-5: #fd94b7;
}

SCSS

$color-1: #818a8d;
$color-2: #8fb3a6;
$color-3: #b1d27d;
$color-4: #ffd8bf;
$color-5: #fd94b7;

TAILWIND

colors: {
  'brand-1': '#818a8d',
  'brand-2': '#8fb3a6',
  'brand-3': '#b1d27d',
  'brand-4': '#ffd8bf',
  'brand-5': '#fd94b7',
}

RGB Array

[129, 138, 141], [143, 179, 166], [177, 210, 125], [255, 216, 191], [253, 148, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #818A8D, #8FB3A6, #B1D27D, #FFD8BF, #FD94B7 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: #818a8d; --color-2: #8fb3a6; --color-3: #b1d27d; --color-4: #ffd8bf; --color-5: #fd94b7. 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