#F7E6D8 + #F0ACA8 + #CF6D72 + #A79CA7 + #C0D3CD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7E6D8

Apricot · Beige · Peach Orange

HEX

#F7E6D8

RGB

rgb(247, 230, 216)

HSL

hsl(27, 66%, 91%)

HSB

hsb(27, 13%, 97%)

CMYK

cmyk(0%, 7%, 13%, 3%)

Oklch

oklch(93.5% 0.026 62.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F0ACA8

Peach Pink · LightPink · Coral Red

HEX

#F0ACA8

RGB

rgb(240, 172, 168)

HSL

hsl(3, 71%, 80%)

HSB

hsb(3, 30%, 94%)

CMYK

cmyk(0%, 28%, 30%, 6%)

Oklch

oklch(80.8% 0.081 22.8)

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

#CF6D72

Peach Pink · LightCoral · Coral Red

HEX

#CF6D72

RGB

rgb(207, 109, 114)

HSL

hsl(357, 51%, 62%)

HSB

hsb(357, 47%, 81%)

CMYK

cmyk(0%, 47%, 45%, 19%)

Oklch

oklch(64.8% 0.124 17.9)

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

#A79CA7

Ash · DarkGray · Silver Sand

HEX

#A79CA7

RGB

rgb(167, 156, 167)

HSL

hsl(300, 6%, 63%)

HSB

hsb(300, 7%, 65%)

CMYK

cmyk(0%, 7%, 0%, 35%)

Oklch

oklch(70.6% 0.020 325.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C0D3CD

Jade · LightGray · Glacier Blue

HEX

#C0D3CD

RGB

rgb(192, 211, 205)

HSL

hsl(161, 18%, 79%)

HSB

hsb(161, 9%, 83%)

CMYK

cmyk(9%, 0%, 3%, 17%)

Oklch

oklch(85.1% 0.022 174.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7E6D8

D9EAF7

Analogous

F7D9DA

F7E6D8

F7F6D9

Triadic

F7E6D8

D9F7E7

E7D9F7

Split-Comp.

F7E6D8

D9F7F6

D9DAF7

Tetradic

F7E6D8

DAF7D9

D9EAF7

F6D9F7

Contrast Matrix WCAG 2.1 Contrast

F7E6D8	F0ACA8	CF6D72	A79CA7	C0D3CD
—	1.5 Fail	2.8 Fail	2.2 Fail	1.3 Fail
1.5 Fail	—	1.8 Fail	1.4 Fail	1.2 Fail
2.8 Fail	1.8 Fail	—	1.3 Fail	2.2 Fail
2.2 Fail	1.4 Fail	1.3 Fail	—	1.7 Fail
1.3 Fail	1.2 Fail	2.2 Fail	1.7 Fail	—

White BG

1.2Fail

1.9Fail

3.5AA Large

2.6Fail

1.6Fail

Black BG

17.3AAA

11.2AAA

6.1AA

8.0AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0EFDB

D3D2A9

A5A471

A2A2A4

C8C8CE

Deuteranopia

F1F2DC

D7DCA9

AAB271

A3A4A4

C7C6CF

Tritanopia

F6DEDF

EDAAAA

CA7070

A6A2A2

C1D0D0

Achromatopsia

E9E9E9

C0C0C0

8B8B8B

A1A1A1

CDCDCD

Shades & Tints Shades & Tints

#F7E6D8

Dark

Light

#F0ACA8

Dark

Light

#CF6D72

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7e6d8;
  --color-2: #f0aca8;
  --color-3: #cf6d72;
  --color-4: #a79ca7;
  --color-5: #c0d3cd;
}

SCSS

$color-1: #f7e6d8;
$color-2: #f0aca8;
$color-3: #cf6d72;
$color-4: #a79ca7;
$color-5: #c0d3cd;

TAILWIND

colors: {
  'brand-1': '#f7e6d8',
  'brand-2': '#f0aca8',
  'brand-3': '#cf6d72',
  'brand-4': '#a79ca7',
  'brand-5': '#c0d3cd',
}

RGB Array

[247, 230, 216], [240, 172, 168], [207, 109, 114], [167, 156, 167], [192, 211, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7E6D8, #F0ACA8, #CF6D72, #A79CA7, #C0D3CD 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: #f7e6d8; --color-2: #f0aca8; --color-3: #cf6d72; --color-4: #a79ca7; --color-5: #c0d3cd. 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