#FF8FA3 + #9ACCCB + #E4D1A7 + #D6C7CA + #E8E9EB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF8FA3

Peach Pink · LightCoral · Coral Red

HEX

#FF8FA3

RGB

rgb(255, 143, 163)

HSL

hsl(349, 100%, 78%)

HSB

hsb(349, 44%, 100%)

CMYK

cmyk(0%, 44%, 36%, 0%)

Oklch

oklch(77.5% 0.136 9.3)

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

#9ACCCB

Jade · LightSteelBlue · Lake Green

HEX

#9ACCCB

RGB

rgb(154, 204, 203)

HSL

hsl(179, 33%, 70%)

HSB

hsb(179, 25%, 80%)

CMYK

cmyk(25%, 0%, 0%, 20%)

Oklch

oklch(81.0% 0.052 194.6)

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

#E4D1A7

Goose Yellow · Wheat · Lemon Cream

HEX

#E4D1A7

RGB

rgb(228, 209, 167)

HSL

hsl(41, 53%, 77%)

HSB

hsb(41, 27%, 89%)

CMYK

cmyk(0%, 8%, 27%, 11%)

Oklch

oklch(86.6% 0.059 86.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D6C7CA

Peach Pink · LightGray · Cherry Blossom

HEX

#D6C7CA

RGB

rgb(214, 199, 202)

HSL

hsl(348, 15%, 81%)

HSB

hsb(348, 7%, 84%)

CMYK

cmyk(0%, 7%, 6%, 16%)

Oklch

oklch(84.3% 0.017 3.7)

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

#E8E9EB

Plain White · Lavender · Cloud White

HEX

#E8E9EB

RGB

rgb(232, 233, 235)

HSL

hsl(220, 7%, 92%)

HSB

hsb(220, 1%, 92%)

CMYK

cmyk(1%, 1%, 0%, 8%)

Oklch

oklch(93.4% 0.003 264.5)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8FA3

8FFFEA

Analogous

FF8FDB

FF8FA3

FFB28F

Triadic

FF8FA3

A3FF8F

8FA3FF

Split-Comp.

FF8FA3

8FFFB2

8FDBFF

Tetradic

FF8FA3

DBFF8F

8FFFEA

B28FFF

Contrast Matrix WCAG 2.1 Contrast

FF8FA3	9ACCCB	E4D1A7	D6C7CA	E8E9EB
—	1.2 Fail	1.4 Fail	1.3 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.1 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.3 Fail
1.8 Fail	1.5 Fail	1.2 Fail	1.3 Fail	—

White BG

2.2Fail

1.8Fail

1.5Fail

1.6Fail

1.2Fail

Black BG

9.7AAA

11.9AAA

14.0AAA

12.9AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCD9E

B0B0CB

DCDCB1

D0CFC9

E8E8EB

Deuteranopia

D5DD9D

ADA9CB

DDDEB4

D0D1C9

E8E8EA

Tritanopia

F99A9A

9CCBCB

E3B9BB

D5C9C9

E8EAEA

Achromatopsia

B3B3B3

BDBDBD

D2D2D2

CCCCCC

E9E9E9

Shades & Tints Shades & Tints

#FF8FA3

Dark

Light

#9ACCCB

Dark

Light

#E4D1A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8fa3;
  --color-2: #9acccb;
  --color-3: #e4d1a7;
  --color-4: #d6c7ca;
  --color-5: #e8e9eb;
}

SCSS

$color-1: #ff8fa3;
$color-2: #9acccb;
$color-3: #e4d1a7;
$color-4: #d6c7ca;
$color-5: #e8e9eb;

TAILWIND

colors: {
  'brand-1': '#ff8fa3',
  'brand-2': '#9acccb',
  'brand-3': '#e4d1a7',
  'brand-4': '#d6c7ca',
  'brand-5': '#e8e9eb',
}

RGB Array

[255, 143, 163], [154, 204, 203], [228, 209, 167], [214, 199, 202], [232, 233, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8FA3, #9ACCCB, #E4D1A7, #D6C7CA, #E8E9EB 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: #ff8fa3; --color-2: #9acccb; --color-3: #e4d1a7; --color-4: #d6c7ca; --color-5: #e8e9eb. 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