#F7D6C3 + #F7B7B7 + #D98FB5 + #8689CB + #7B7E9C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7D6C3

Apricot · Bisque · Peach Orange

HEX

#F7D6C3

RGB

rgb(247, 214, 195)

HSL

hsl(22, 76%, 87%)

HSB

hsb(22, 21%, 97%)

CMYK

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

Oklch

oklch(89.9% 0.045 51.8)

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

#F7B7B7

Peach Pink · LightPink · Cherry Blossom

HEX

#F7B7B7

RGB

rgb(247, 183, 183)

HSL

hsl(0, 80%, 84%)

HSB

hsb(0, 26%, 97%)

CMYK

cmyk(0%, 26%, 26%, 3%)

Oklch

oklch(83.8% 0.075 18.8)

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

#D98FB5

Mauve · Orchid · Rose Pink

HEX

#D98FB5

RGB

rgb(217, 143, 181)

HSL

hsl(329, 49%, 71%)

HSB

hsb(329, 34%, 85%)

CMYK

cmyk(0%, 34%, 17%, 15%)

Oklch

oklch(73.6% 0.101 347.7)

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

#8689CB

Azure · MediumSlateBlue · Cobalt Blue

HEX

#8689CB

RGB

rgb(134, 137, 203)

HSL

hsl(237, 40%, 66%)

HSB

hsb(237, 34%, 80%)

CMYK

cmyk(34%, 33%, 0%, 20%)

Oklch

oklch(65.4% 0.098 281.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#7B7E9C

Azure · LightSlateGray · Navy Blue

HEX

#7B7E9C

RGB

rgb(123, 126, 156)

HSL

hsl(235, 14%, 55%)

HSB

hsb(235, 21%, 61%)

CMYK

cmyk(21%, 19%, 0%, 39%)

Oklch

oklch(60.1% 0.046 280.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D6C3

C5E5F7

Analogous

F7C5CB

F7D6C3

F7F0C5

Triadic

F7D6C3

C5F7D7

D7C5F7

Split-Comp.

F7D6C3

C5F7F0

C5CBF7

Tetradic

F7D6C3

CBF7C5

C5E5F7

F0C5F7

Contrast Matrix WCAG 2.1 Contrast

F7D6C3	F7B7B7	D98FB5	8689CB	7B7E9C
—	1.2 Fail	1.8 Fail	2.4 Fail	2.9 Fail
1.2 Fail	—	1.5 Fail	1.9 Fail	2.3 Fail
1.8 Fail	1.5 Fail	—	1.3 Fail	1.6 Fail
2.4 Fail	1.9 Fail	1.3 Fail	—	1.2 Fail
2.9 Fail	2.3 Fail	1.6 Fail	1.2 Fail	—

White BG

1.4Fail

1.7Fail

2.5Fail

3.3AA Large

4.0AA Large

Black BG

15.4AAA

12.4AAA

8.5AAA

6.5AA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8C8

DBDBB7

B9B8AC

8787BB

7C7C95

Deuteranopia

EBEDC9

DFE4B7

BDC3AA

8787B7

7C7C93

Tritanopia

F5CBCC

F4B7B7

D5A5A3

86AEAC

7B8F8E

Achromatopsia

DEDEDE

CACACA

A9A9A9

909090

818181

Shades & Tints Shades & Tints

#F7D6C3

Dark

Light

#F7B7B7

Dark

Light

#D98FB5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d6c3;
  --color-2: #f7b7b7;
  --color-3: #d98fb5;
  --color-4: #8689cb;
  --color-5: #7b7e9c;
}

SCSS

$color-1: #f7d6c3;
$color-2: #f7b7b7;
$color-3: #d98fb5;
$color-4: #8689cb;
$color-5: #7b7e9c;

TAILWIND

colors: {
  'brand-1': '#f7d6c3',
  'brand-2': '#f7b7b7',
  'brand-3': '#d98fb5',
  'brand-4': '#8689cb',
  'brand-5': '#7b7e9c',
}

RGB Array

[247, 214, 195], [247, 183, 183], [217, 143, 181], [134, 137, 203], [123, 126, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7D6C3, #F7B7B7, #D98FB5, #8689CB, #7B7E9C 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: #f7d6c3; --color-2: #f7b7b7; --color-3: #d98fb5; --color-4: #8689cb; --color-5: #7b7e9c. 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