← Back to Editor

#8F6770 · #F77B74 · #F7AF97 · #F2C8AA · #F2EABD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#8F6770

Crimson · Gray · Passion Red

HEX
#8F6770
RGB
rgb(143, 103, 112)
HSL
hsl(347, 16%, 48%)
HSB
hsb(347, 28%, 56%)
CMYK
cmyk(0%, 28%, 22%, 44%)
Oklch
oklch(55.8% 0.053 4.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F77B74

Peach Pink · Salmon · Coral Red

HEX
#F77B74
RGB
rgb(247, 123, 116)
HSL
hsl(3, 89%, 71%)
HSB
hsb(3, 53%, 97%)
CMYK
cmyk(0%, 50%, 53%, 3%)
Oklch
oklch(72.4% 0.153 24.9)

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

#F7AF97

Apricot · BurlyWood · Peach Orange

HEX
#F7AF97
RGB
rgb(247, 175, 151)
HSL
hsl(15, 86%, 78%)
HSB
hsb(15, 39%, 97%)
CMYK
cmyk(0%, 29%, 39%, 3%)
Oklch
oklch(81.6% 0.091 39.2)

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

#F2C8AA

Apricot · Wheat · Peach Orange

HEX
#F2C8AA
RGB
rgb(242, 200, 170)
HSL
hsl(25, 73%, 81%)
HSB
hsb(25, 30%, 95%)
CMYK
cmyk(0%, 17%, 30%, 5%)
Oklch
oklch(86.2% 0.063 57.3)

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

#F2EABD

Fresh Green · Wheat · Lemon Cream

HEX
#F2EABD
RGB
rgb(242, 234, 189)
HSL
hsl(51, 67%, 85%)
HSB
hsb(51, 22%, 95%)
CMYK
cmyk(0%, 3%, 22%, 5%)
Oklch
oklch(93.2% 0.059 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F6770
678E85

Analogous

8E6783
8F6770
8E7267

Triadic

8F6770
6F8E67
676F8E

Split-Comp.

8F6770
678E72
67838E

Tetradic

8F6770
838E67
678E85
72678E

Contrast Matrix WCAG 2.1 Contrast

8F6770
F77B74
F7AF97
F2C8AA
F2EABD
—
1.9
Fail
2.7
Fail
3.1
AA Large
4.0
AA Large
1.9
Fail
—
1.4
Fail
1.7
Fail
2.1
Fail
2.7
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
3.1
AA Large
1.7
Fail
1.2
Fail
—
1.3
Fail
4.0
AA Large
2.1
Fail
1.5
Fail
1.3
Fail
—
White BG
4.8AA
2.6Fail
1.8Fail
1.5Fail
1.2Fail
Black BG
4.3AA Large
8.0AAA
11.5AAA
13.6AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7D6E
C1C076
D8D79D
E0DFB1
EFEEC8

Deuteranopia

80836D
C9D276
DCE19E
E2E5B3
EFF0CB

Tritanopia

8D6C6C
F17777
F3A1A2
F0B7B8
F2D0D2

Achromatopsia

747474
9F9F9F
C2C2C2
D1D1D1
E7E7E7

Shades & Tints Shades & Tints

#8F6770

Dark
Light

#F77B74

Dark
Light

#F7AF97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f6770;
  --color-2: #f77b74;
  --color-3: #f7af97;
  --color-4: #f2c8aa;
  --color-5: #f2eabd;
}

SCSS

$color-1: #8f6770;
$color-2: #f77b74;
$color-3: #f7af97;
$color-4: #f2c8aa;
$color-5: #f2eabd;

TAILWIND

colors: {
  'brand-1': '#8f6770',
  'brand-2': '#f77b74',
  'brand-3': '#f7af97',
  'brand-4': '#f2c8aa',
  'brand-5': '#f2eabd',
}

RGB Array

[143, 103, 112], [247, 123, 116], [247, 175, 151], [242, 200, 170], [242, 234, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F6770, #F77B74, #F7AF97, #F2C8AA, #F2EABD is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8f6770; --color-2: #f77b74; --color-3: #f7af97; --color-4: #f2c8aa; --color-5: #f2eabd. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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