← Back to Editor

#A31C5D · #F18B5A · #F5CCBE · #F7E9E4 · #AFD0D1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#A31C5D

Dark Violet · Brown · Camellia

HEX
#A31C5D
RGB
rgb(163, 28, 93)
HSL
hsl(331, 71%, 37%)
HSB
hsb(331, 83%, 64%)
CMYK
cmyk(0%, 83%, 43%, 36%)
Oklch
oklch(47.8% 0.176 357.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F18B5A

Apricot · Coral · Warm Sun

HEX
#F18B5A
RGB
rgb(241, 139, 90)
HSL
hsl(19, 84%, 65%)
HSB
hsb(19, 63%, 95%)
CMYK
cmyk(0%, 42%, 63%, 5%)
Oklch
oklch(73.7% 0.140 45.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F5CCBE

Apricot · Pink · Peach Orange

HEX
#F5CCBE
RGB
rgb(245, 204, 190)
HSL
hsl(15, 73%, 85%)
HSB
hsb(15, 22%, 96%)
CMYK
cmyk(0%, 17%, 22%, 4%)
Oklch
oklch(87.7% 0.050 39.7)

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

#F7E9E4

Apricot · Linen · Peach Orange

HEX
#F7E9E4
RGB
rgb(247, 233, 228)
HSL
hsl(16, 54%, 93%)
HSB
hsb(16, 8%, 97%)
CMYK
cmyk(0%, 6%, 8%, 3%)
Oklch
oklch(94.4% 0.017 40.8)

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

#AFD0D1

Sky Blue · LightSteelBlue · Lake Green

HEX
#AFD0D1
RGB
rgb(175, 208, 209)
HSL
hsl(182, 27%, 75%)
HSB
hsb(182, 16%, 82%)
CMYK
cmyk(16%, 0%, 0%, 18%)
Oklch
oklch(83.4% 0.035 198.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A31C5D
1BA161

Analogous

A11B9F
A31C5D
A11E1B

Triadic

A31C5D
5CA11B
1B5CA1

Split-Comp.

A31C5D
1BA11E
1B9FA1

Tetradic

A31C5D
9FA11B
1BA161
1E1BA1

Contrast Matrix WCAG 2.1 Contrast

A31C5D
F18B5A
F5CCBE
F7E9E4
AFD0D1
—
3.0
Fail
4.9
AA
6.2
AA
4.4
AA Large
3.0
Fail
—
1.7
Fail
2.1
Fail
1.5
Fail
4.9
AA
1.7
Fail
—
1.2
Fail
1.1
Fail
6.2
AA
2.1
Fail
1.2
Fail
—
1.4
Fail
4.4
AA Large
1.5
Fail
1.1
Fail
1.4
Fail
—
White BG
7.3AAA
2.4Fail
1.5Fail
1.2Fail
1.6Fail
Black BG
2.9Fail
8.6AAA
14.3AAA
17.7AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

69674D
C5C466
E3E3C1
F1F1E5
BDBED1

Deuteranopia

707B4A
CBD269
E6E9C2
F2F3E6
BBB9D1

Tritanopia

9C413E
EC6F71
F3C4C5
F6E6E6
B1D1D1

Achromatopsia

4C4C4C
A4A4A4
D7D7D7
EDEDED
C6C6C6

Shades & Tints Shades & Tints

#A31C5D

Dark
Light

#F18B5A

Dark
Light

#F5CCBE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a31c5d;
  --color-2: #f18b5a;
  --color-3: #f5ccbe;
  --color-4: #f7e9e4;
  --color-5: #afd0d1;
}

SCSS

$color-1: #a31c5d;
$color-2: #f18b5a;
$color-3: #f5ccbe;
$color-4: #f7e9e4;
$color-5: #afd0d1;

TAILWIND

colors: {
  'brand-1': '#a31c5d',
  'brand-2': '#f18b5a',
  'brand-3': '#f5ccbe',
  'brand-4': '#f7e9e4',
  'brand-5': '#afd0d1',
}

RGB Array

[163, 28, 93], [241, 139, 90], [245, 204, 190], [247, 233, 228], [175, 208, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A31C5D, #F18B5A, #F5CCBE, #F7E9E4, #AFD0D1 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #a31c5d; --color-2: #f18b5a; --color-3: #f5ccbe; --color-4: #f7e9e4; --color-5: #afd0d1. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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