#F0607F + #C98F9E + #CCB8C1 + #DFE6E5 + #F2FFF5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0607F

Peach Pink · LightCoral · Coral Red

HEX

#F0607F

RGB

rgb(240, 96, 127)

HSL

hsl(347, 83%, 66%)

HSB

hsb(347, 60%, 94%)

CMYK

cmyk(0%, 60%, 47%, 6%)

Oklch

oklch(68.0% 0.178 10.0)

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

#C98F9E

Rouge · Tan · Rose Pink

HEX

#C98F9E

RGB

rgb(201, 143, 158)

HSL

hsl(344, 35%, 67%)

HSB

hsb(344, 29%, 79%)

CMYK

cmyk(0%, 29%, 21%, 21%)

Oklch

oklch(71.1% 0.073 2.1)

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

#CCB8C1

Rouge · Silver · Cherry Blossom

HEX

#CCB8C1

RGB

rgb(204, 184, 193)

HSL

hsl(333, 16%, 76%)

HSB

hsb(333, 10%, 80%)

CMYK

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

Oklch

oklch(80.2% 0.026 348.7)

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

#DFE6E5

Jade · Lavender · Glacier Blue

HEX

#DFE6E5

RGB

rgb(223, 230, 229)

HSL

hsl(171, 12%, 89%)

HSB

hsb(171, 3%, 90%)

CMYK

cmyk(3%, 0%, 0%, 10%)

Oklch

oklch(91.9% 0.008 186.9)

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

#F2FFF5

Emerald · Snow · Mint Green

HEX

#F2FFF5

RGB

rgb(242, 255, 245)

HSL

hsl(134, 100%, 97%)

HSB

hsb(134, 5%, 100%)

CMYK

cmyk(5%, 0%, 4%, 0%)

Oklch

oklch(98.8% 0.019 152.8)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0607F

60F0D1

Analogous

F060C7

F0607F

F08960

Triadic

F0607F

80F060

6080F0

Split-Comp.

F0607F

60F089

60C7F0

Tetradic

F0607F

C7F060

60F0D1

8960F0

Contrast Matrix WCAG 2.1 Contrast

F0607F	C98F9E	CCB8C1	DFE6E5	F2FFF5
—	1.2 Fail	1.7 Fail	2.5 Fail	3.1 AA Large
1.2 Fail	—	1.4 Fail	2.1 Fail	2.6 Fail
1.7 Fail	1.4 Fail	—	1.5 Fail	1.8 Fail
2.5 Fail	2.1 Fail	1.5 Fail	—	1.2 Fail
3.1 AA Large	2.6 Fail	1.8 Fail	1.2 Fail	—

White BG

3.1AA Large

2.7Fail

1.9Fail

1.3Fail

1.0Fail

Black BG

6.7AA

7.9AAA

11.2AAA

16.6AAA

20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B077

B0AF9A

C3C3BF

E2E2E5

F8F8F7

Deuteranopia

BAC576

B3B89A

C5C6BE

E2E1E5

F7F6F8

Tritanopia

E97270

C69897

CBBDBD

DFE5E5

F3F9FA

Achromatopsia

8F8F8F

A2A2A2

BFBFBF

E4E4E4

FAFAFA

Shades & Tints Shades & Tints

#F0607F

Dark

Light

#C98F9E

Dark

Light

#CCB8C1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0607f;
  --color-2: #c98f9e;
  --color-3: #ccb8c1;
  --color-4: #dfe6e5;
  --color-5: #f2fff5;
}

SCSS

$color-1: #f0607f;
$color-2: #c98f9e;
$color-3: #ccb8c1;
$color-4: #dfe6e5;
$color-5: #f2fff5;

TAILWIND

colors: {
  'brand-1': '#f0607f',
  'brand-2': '#c98f9e',
  'brand-3': '#ccb8c1',
  'brand-4': '#dfe6e5',
  'brand-5': '#f2fff5',
}

RGB Array

[240, 96, 127], [201, 143, 158], [204, 184, 193], [223, 230, 229], [242, 255, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0607F, #C98F9E, #CCB8C1, #DFE6E5, #F2FFF5 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: #f0607f; --color-2: #c98f9e; --color-3: #ccb8c1; --color-4: #dfe6e5; --color-5: #f2fff5. 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