#FAEDF2 + #97B8AB + #86B8A5 + #F296A1 + #E37B9C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FAEDF2

Rouge · SeaShell · Cherry Blossom

HEX

#FAEDF2

RGB

rgb(250, 237, 242)

HSL

hsl(337, 57%, 95%)

HSB

hsb(337, 5%, 98%)

CMYK

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

Oklch

oklch(95.8% 0.015 352.0)

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

#97B8AB

Jade · DarkGray · Apple Green

HEX

#97B8AB

RGB

rgb(151, 184, 171)

HSL

hsl(156, 19%, 66%)

HSB

hsb(156, 18%, 72%)

CMYK

cmyk(18%, 0%, 7%, 28%)

Oklch

oklch(75.4% 0.040 169.3)

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

#86B8A5

Jade · DarkSeaGreen · Apple Green

HEX

#86B8A5

RGB

rgb(134, 184, 165)

HSL

hsl(157, 26%, 62%)

HSB

hsb(157, 27%, 72%)

CMYK

cmyk(27%, 0%, 10%, 28%)

Oklch

oklch(74.2% 0.060 169.2)

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

#F296A1

Peach Pink · LightCoral · Coral Red

HEX

#F296A1

RGB

rgb(242, 150, 161)

HSL

hsl(353, 78%, 77%)

HSB

hsb(353, 38%, 95%)

CMYK

cmyk(0%, 38%, 33%, 5%)

Oklch

oklch(77.0% 0.111 12.3)

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

#E37B9C

Rouge · LightCoral · Rose Pink

HEX

#E37B9C

RGB

rgb(227, 123, 156)

HSL

hsl(341, 65%, 69%)

HSB

hsb(341, 46%, 89%)

CMYK

cmyk(0%, 46%, 31%, 11%)

Oklch

oklch(70.7% 0.133 0.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAEDF2

EBFAF4

Analogous

FAEBF8

FAEDF2

FAEDEB

Triadic

FAEDF2

F1FAEB

EBF1FA

Split-Comp.

FAEDF2

EBFAED

EBF8FA

Tetradic

FAEDF2

F8FAEB

EBFAF4

EDEBFA

Contrast Matrix WCAG 2.1 Contrast

FAEDF2	97B8AB	86B8A5	F296A1	E37B9C
—	1.9 Fail	2.0 Fail	1.9 Fail	2.4 Fail
1.9 Fail	—	1.0 Fail	1.0 Fail	1.3 Fail
2.0 Fail	1.0 Fail	—	1.0 Fail	1.2 Fail
1.9 Fail	1.0 Fail	1.0 Fail	—	1.3 Fail
2.4 Fail	1.3 Fail	1.2 Fail	1.3 Fail	—

White BG

1.1Fail

2.2Fail

2.8Fail

Black BG

18.5AAA

9.8AAA

9.4AAA

9.7AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4F1

A5A6AE

9C9CAA

CAC99E

B6B594

Deuteranopia

F5F6F0

A3A1AF

9995AB

D0D69E

BCC492

Tritanopia

F9F0F0

99B1B1

89ADAE

ED9C9C

DE8E8C

Achromatopsia

F1F1F1

ADADAD

A7A7A7

B3B3B3

9E9E9E

Shades & Tints Shades & Tints

#FAEDF2

Dark

Light

#97B8AB

Dark

Light

#86B8A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faedf2;
  --color-2: #97b8ab;
  --color-3: #86b8a5;
  --color-4: #f296a1;
  --color-5: #e37b9c;
}

SCSS

$color-1: #faedf2;
$color-2: #97b8ab;
$color-3: #86b8a5;
$color-4: #f296a1;
$color-5: #e37b9c;

TAILWIND

colors: {
  'brand-1': '#faedf2',
  'brand-2': '#97b8ab',
  'brand-3': '#86b8a5',
  'brand-4': '#f296a1',
  'brand-5': '#e37b9c',
}

RGB Array

[250, 237, 242], [151, 184, 171], [134, 184, 165], [242, 150, 161], [227, 123, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAEDF2, #97B8AB, #86B8A5, #F296A1, #E37B9C 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: #faedf2; --color-2: #97b8ab; --color-3: #86b8a5; --color-4: #f296a1; --color-5: #e37b9c. 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