#FFD7D1 + #F2B3A1 + #D597AE + #9AC4AE + #61BAA8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFD7D1

Peach Pink · Bisque · Cherry Blossom

HEX

#FFD7D1

RGB

rgb(255, 215, 209)

HSL

hsl(8, 100%, 91%)

HSB

hsb(8, 18%, 100%)

CMYK

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

Oklch

oklch(91.1% 0.046 28.0)

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

#F2B3A1

Peach Pink · BurlyWood · Coral Red

HEX

#F2B3A1

RGB

rgb(242, 179, 161)

HSL

hsl(13, 76%, 79%)

HSB

hsb(13, 33%, 95%)

CMYK

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

Oklch

oklch(82.1% 0.078 36.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D597AE

Rouge · Tan · Rose Pink

HEX

#D597AE

RGB

rgb(213, 151, 174)

HSL

hsl(338, 42%, 71%)

HSB

hsb(338, 29%, 84%)

CMYK

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

Oklch

oklch(74.3% 0.080 355.2)

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

#9AC4AE

Celadon · DarkGray · Apple Green

HEX

#9AC4AE

RGB

rgb(154, 196, 174)

HSL

hsl(149, 26%, 69%)

HSB

hsb(149, 21%, 77%)

CMYK

cmyk(21%, 0%, 11%, 23%)

Oklch

oklch(78.4% 0.054 162.0)

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

#61BAA8

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#61BAA8

RGB

rgb(97, 186, 168)

HSL

hsl(168, 39%, 55%)

HSB

hsb(168, 48%, 73%)

CMYK

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

Oklch

oklch(72.8% 0.090 178.8)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD7D1

D1F9FF

Analogous

FFD1E2

FFD7D1

FFEED1

Triadic

FFD7D1

D1FFD7

D7D1FF

Split-Comp.

FFD7D1

D1FFEE

D1E2FF

Tetradic

FFD7D1

E2FFD1

D1F9FF

EED1FF

Contrast Matrix WCAG 2.1 Contrast

FFD7D1	F2B3A1	D597AE	9AC4AE	61BAA8
—	1.4 Fail	1.8 Fail	1.5 Fail	1.7 Fail
1.4 Fail	—	1.3 Fail	1.1 Fail	1.3 Fail
1.8 Fail	1.3 Fail	—	1.2 Fail	1.0 Fail
1.5 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.7 Fail	1.3 Fail	1.0 Fail	1.2 Fail	—

White BG

1.3Fail

1.8Fail

2.4Fail

1.9Fail

2.3Fail

Black BG

15.9AAA

11.7AAA

8.9AAA

10.9AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEDD2

D7D6A5

BABAA8

ACADB3

8888AC

Deuteranopia

F0F3D3

DADFA6

BEC2A7

AAA7B5

827CAD

Tritanopia

FDD4D4

EFA9AA

D2A4A3

9CB8B8

65B0B1

Achromatopsia

E2E2E2

C4C4C4

ACACAC

B5B5B5

9D9D9D

Shades & Tints Shades & Tints

#FFD7D1

Dark

Light

#F2B3A1

Dark

Light

#D597AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd7d1;
  --color-2: #f2b3a1;
  --color-3: #d597ae;
  --color-4: #9ac4ae;
  --color-5: #61baa8;
}

SCSS

$color-1: #ffd7d1;
$color-2: #f2b3a1;
$color-3: #d597ae;
$color-4: #9ac4ae;
$color-5: #61baa8;

TAILWIND

colors: {
  'brand-1': '#ffd7d1',
  'brand-2': '#f2b3a1',
  'brand-3': '#d597ae',
  'brand-4': '#9ac4ae',
  'brand-5': '#61baa8',
}

RGB Array

[255, 215, 209], [242, 179, 161], [213, 151, 174], [154, 196, 174], [97, 186, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD7D1, #F2B3A1, #D597AE, #9AC4AE, #61BAA8 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: #ffd7d1; --color-2: #f2b3a1; --color-3: #d597ae; --color-4: #9ac4ae; --color-5: #61baa8. 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