#F7E9E9 + #CCDCDE + #A5BEC2 + #BA9595 + #FF7373 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7E9E9

Peach Pink · Linen · Cherry Blossom

HEX

#F7E9E9

RGB

rgb(247, 233, 233)

HSL

hsl(0, 47%, 94%)

HSB

hsb(0, 6%, 97%)

CMYK

cmyk(0%, 6%, 6%, 3%)

Oklch

oklch(94.5% 0.015 17.4)

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

#CCDCDE

Sky Blue · LightGray · Glacier Blue

HEX

#CCDCDE

RGB

rgb(204, 220, 222)

HSL

hsl(187, 21%, 84%)

HSB

hsb(187, 8%, 87%)

CMYK

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

Oklch

oklch(88.3% 0.017 205.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#A5BEC2

Sky Blue · Silver · Lake Green

HEX

#A5BEC2

RGB

rgb(165, 190, 194)

HSL

hsl(188, 19%, 70%)

HSB

hsb(188, 15%, 76%)

CMYK

cmyk(15%, 2%, 0%, 24%)

Oklch

oklch(78.4% 0.028 208.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BA9595

Peach Pink · DarkGray · Coral Red

HEX

#BA9595

RGB

rgb(186, 149, 149)

HSL

hsl(0, 21%, 66%)

HSB

hsb(0, 20%, 73%)

CMYK

cmyk(0%, 20%, 20%, 27%)

Oklch

oklch(70.4% 0.045 18.3)

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

#FF7373

Peach Pink · Salmon · Coral Red

HEX

#FF7373

RGB

rgb(255, 115, 115)

HSL

hsl(0, 100%, 73%)

HSB

hsb(0, 55%, 100%)

CMYK

cmyk(0%, 55%, 55%, 0%)

Oklch

oklch(72.4% 0.171 22.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7E9E9

E9F7F7

Analogous

F7E9F0

F7E9E9

F7F0E9

Triadic

F7E9E9

E9F7E9

E9E9F7

Split-Comp.

F7E9E9

E9F7F0

E9F0F7

Tetradic

F7E9E9

F0F7E9

E9F7F7

F0E9F7

Contrast Matrix WCAG 2.1 Contrast

F7E9E9	CCDCDE	A5BEC2	BA9595	FF7373
—	1.2 Fail	1.7 Fail	2.3 Fail	2.2 Fail
1.2 Fail	—	1.4 Fail	1.9 Fail	1.9 Fail
1.7 Fail	1.4 Fail	—	1.4 Fail	1.4 Fail
2.3 Fail	1.9 Fail	1.4 Fail	—	1.0 Fail
2.2 Fail	1.9 Fail	1.4 Fail	1.0 Fail	—

White BG

1.2Fail

1.4Fail

2.0Fail

2.7Fail

2.6Fail

Black BG

17.8AAA

14.9AAA

10.7AAA

7.8AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1E9

D3D3DE

B0B0C1

AAAA95

C2C173

Deuteranopia

F2F3E9

D2D1DD

AEADC1

ACAF95

CBD573

Tritanopia

F6E9E9

CDDDDD

A6C0C0

B89595

F87373

Achromatopsia

EDEDED

D7D7D7

B7B7B7

A0A0A0

9D9D9D

Shades & Tints Shades & Tints

#F7E9E9

Dark

Light

#CCDCDE

Dark

Light

#A5BEC2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7e9e9;
  --color-2: #ccdcde;
  --color-3: #a5bec2;
  --color-4: #ba9595;
  --color-5: #ff7373;
}

SCSS

$color-1: #f7e9e9;
$color-2: #ccdcde;
$color-3: #a5bec2;
$color-4: #ba9595;
$color-5: #ff7373;

TAILWIND

colors: {
  'brand-1': '#f7e9e9',
  'brand-2': '#ccdcde',
  'brand-3': '#a5bec2',
  'brand-4': '#ba9595',
  'brand-5': '#ff7373',
}

RGB Array

[247, 233, 233], [204, 220, 222], [165, 190, 194], [186, 149, 149], [255, 115, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7E9E9, #CCDCDE, #A5BEC2, #BA9595, #FF7373 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: #f7e9e9; --color-2: #ccdcde; --color-3: #a5bec2; --color-4: #ba9595; --color-5: #ff7373. 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