#F96975 + #F09A8A + #FED0BD + #D1C9C2 + #7D7B8F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F96975

Peach Pink · Salmon · Coral Red

HEX

#F96975

RGB

rgb(249, 105, 117)

HSL

hsl(355, 92%, 69%)

HSB

hsb(355, 58%, 98%)

CMYK

cmyk(0%, 58%, 53%, 2%)

Oklch

oklch(70.2% 0.176 17.8)

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

#F09A8A

Peach Pink · DarkSalmon · Coral Red

HEX

#F09A8A

RGB

rgb(240, 154, 138)

HSL

hsl(9, 77%, 74%)

HSB

hsb(9, 43%, 94%)

CMYK

cmyk(0%, 36%, 43%, 6%)

Oklch

oklch(76.9% 0.107 31.1)

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

#FED0BD

Apricot · Wheat · Peach Orange

HEX

#FED0BD

RGB

rgb(254, 208, 189)

HSL

hsl(18, 97%, 87%)

HSB

hsb(18, 26%, 100%)

CMYK

cmyk(0%, 18%, 26%, 0%)

Oklch

oklch(89.2% 0.058 43.6)

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

#D1C9C2

Apricot · Silver · Peach Orange

HEX

#D1C9C2

RGB

rgb(209, 201, 194)

HSL

hsl(28, 14%, 79%)

HSB

hsb(28, 7%, 82%)

CMYK

cmyk(0%, 4%, 7%, 18%)

Oklch

oklch(84.0% 0.013 63.9)

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

#7D7B8F

Deep Indigo · SlateGray · Warm Gray

HEX

#7D7B8F

RGB

rgb(125, 123, 143)

HSL

hsl(246, 8%, 52%)

HSB

hsb(246, 14%, 56%)

CMYK

cmyk(13%, 14%, 0%, 44%)

Oklch

oklch(59.2% 0.030 290.0)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F96975

67F9ED

Analogous

F967BC

F96975

F9A467

Triadic

F96975

73F967

6773F9

Split-Comp.

F96975

67F9A4

67BCF9

Tetradic

F96975

BCF967

67F9ED

A467F9

Contrast Matrix WCAG 2.1 Contrast

F96975	F09A8A	FED0BD	D1C9C2	7D7B8F
—	1.3 Fail	2.0 Fail	1.8 Fail	1.4 Fail
1.3 Fail	—	1.5 Fail	1.3 Fail	1.9 Fail
2.0 Fail	1.5 Fail	—	1.2 Fail	2.9 Fail
1.8 Fail	1.3 Fail	1.2 Fail	—	2.5 Fail
1.4 Fail	1.9 Fail	2.9 Fail	2.5 Fail	—

White BG

2.9Fail

2.2Fail

1.4Fail

1.6Fail

4.1AA Large

Black BG

7.3AAA

9.7AAA

15.0AAA

12.8AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBB972

CBCA8E

EAEAC2

CECDC4

7C7C8A

Deuteranopia

C3CE71

D0D68F

EDF0C3

CECFC4

7C7C89

Tritanopia

F2706F

EC9192

FCC5C6

D1C5C5

7D8686

Achromatopsia

959595

B2B2B2

DCDCDC

CBCBCB

7E7E7E

Shades & Tints Shades & Tints

#F96975

Dark

Light

#F09A8A

Dark

Light

#FED0BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f96975;
  --color-2: #f09a8a;
  --color-3: #fed0bd;
  --color-4: #d1c9c2;
  --color-5: #7d7b8f;
}

SCSS

$color-1: #f96975;
$color-2: #f09a8a;
$color-3: #fed0bd;
$color-4: #d1c9c2;
$color-5: #7d7b8f;

TAILWIND

colors: {
  'brand-1': '#f96975',
  'brand-2': '#f09a8a',
  'brand-3': '#fed0bd',
  'brand-4': '#d1c9c2',
  'brand-5': '#7d7b8f',
}

RGB Array

[249, 105, 117], [240, 154, 138], [254, 208, 189], [209, 201, 194], [125, 123, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F96975, #F09A8A, #FED0BD, #D1C9C2, #7D7B8F 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: #f96975; --color-2: #f09a8a; --color-3: #fed0bd; --color-4: #d1c9c2; --color-5: #7d7b8f. 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