#F1827D + #DEAA99 + #CCC9B8 + #A9DFC9 + #D2D8D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1827D

Peach Pink · LightCoral · Coral Red

HEX

#F1827D

RGB

rgb(241, 130, 125)

HSL

hsl(3, 81%, 72%)

HSB

hsb(3, 48%, 95%)

CMYK

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

Oklch

oklch(72.8% 0.137 23.7)

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

#DEAA99

Apricot · Tan · Warm Sun

HEX

#DEAA99

RGB

rgb(222, 170, 153)

HSL

hsl(15, 51%, 74%)

HSB

hsb(15, 31%, 87%)

CMYK

cmyk(0%, 23%, 31%, 13%)

Oklch

oklch(78.1% 0.066 38.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CCC9B8

Fresh Green · Silver · Lemon Cream

HEX

#CCC9B8

RGB

rgb(204, 201, 184)

HSL

hsl(51, 16%, 76%)

HSB

hsb(51, 10%, 80%)

CMYK

cmyk(0%, 1%, 10%, 20%)

Oklch

oklch(83.4% 0.023 98.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#A9DFC9

Jade · LightBlue · Apple Green

HEX

#A9DFC9

RGB

rgb(169, 223, 201)

HSL

hsl(156, 46%, 77%)

HSB

hsb(156, 24%, 87%)

CMYK

cmyk(24%, 0%, 10%, 13%)

Oklch

oklch(86.0% 0.063 167.9)

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

#D2D8D9

Sky Blue · LightGray · Pearl Gray

HEX

#D2D8D9

RGB

rgb(210, 216, 217)

HSL

hsl(189, 8%, 84%)

HSB

hsb(189, 3%, 85%)

CMYK

cmyk(3%, 0%, 0%, 15%)

Oklch

oklch(87.8% 0.007 208.8)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1827D

7EECF1

Analogous

F17EB2

F1827D

F1BD7E

Triadic

F1827D

7EF184

847EF1

Split-Comp.

F1827D

7EF1BD

7EB2F1

Tetradic

F1827D

B2F17E

7EECF1

BD7EF1

Contrast Matrix WCAG 2.1 Contrast

F1827D	DEAA99	CCC9B8	A9DFC9	D2D8D9
—	1.3 Fail	1.5 Fail	1.7 Fail	1.8 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.4 Fail
1.5 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.7 Fail	1.4 Fail	1.1 Fail	—	1.0 Fail
1.8 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

2.6Fail

2.0Fail

1.7Fail

1.5Fail

1.4Fail

Black BG

8.2AAA

10.3AAA

12.6AAA

14.1AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C07E

C7C79D

CBCBBC

C0C1CE

D5D5D9

Deuteranopia

C7D07F

CBCE9E

CBCBBD

BDB9D0

D4D4D9

Tritanopia

EB7F7F

DBA0A1

CCBFC0

ACD3D3

D2D9D9

Achromatopsia

A3A3A3

B8B8B8

C8C8C8

CCCCCC

D6D6D6

Shades & Tints Shades & Tints

#F1827D

Dark

Light

#DEAA99

Dark

Light

#CCC9B8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1827d;
  --color-2: #deaa99;
  --color-3: #ccc9b8;
  --color-4: #a9dfc9;
  --color-5: #d2d8d9;
}

SCSS

$color-1: #f1827d;
$color-2: #deaa99;
$color-3: #ccc9b8;
$color-4: #a9dfc9;
$color-5: #d2d8d9;

TAILWIND

colors: {
  'brand-1': '#f1827d',
  'brand-2': '#deaa99',
  'brand-3': '#ccc9b8',
  'brand-4': '#a9dfc9',
  'brand-5': '#d2d8d9',
}

RGB Array

[241, 130, 125], [222, 170, 153], [204, 201, 184], [169, 223, 201], [210, 216, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1827D, #DEAA99, #CCC9B8, #A9DFC9, #D2D8D9 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: #f1827d; --color-2: #deaa99; --color-3: #ccc9b8; --color-4: #a9dfc9; --color-5: #d2d8d9. 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