← Back to Editor

#F6D4C6 · #FBBE53 · #ED9318 · #A489BD · #5748A3

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

#F6D4C6

Apricot · Bisque · Peach Orange

HEX
#F6D4C6
RGB
rgb(246, 212, 198)
HSL
hsl(18, 73%, 87%)
HSB
hsb(18, 20%, 96%)
CMYK
cmyk(0%, 14%, 20%, 4%)
Oklch
oklch(89.5% 0.043 43.7)

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

#FBBE53

Ginger · SandyBrown · Warm Sun

HEX
#FBBE53
RGB
rgb(251, 190, 83)
HSL
hsl(38, 95%, 65%)
HSB
hsb(38, 67%, 98%)
CMYK
cmyk(0%, 24%, 67%, 2%)
Oklch
oklch(83.8% 0.140 78.7)

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

#ED9318

Ginger · GoldenRod · Warm Sun

HEX
#ED9318
RGB
rgb(237, 147, 24)
HSL
hsl(35, 86%, 51%)
HSB
hsb(35, 90%, 93%)
CMYK
cmyk(0%, 38%, 90%, 7%)
Oklch
oklch(74.0% 0.159 66.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#A489BD

Lilac · DarkGray · Lilac Purple

HEX
#A489BD
RGB
rgb(164, 137, 189)
HSL
hsl(271, 28%, 64%)
HSB
hsb(271, 28%, 74%)
CMYK
cmyk(13%, 28%, 0%, 26%)
Oklch
oklch(67.3% 0.081 308.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#5748A3

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#5748A3
RGB
rgb(87, 72, 163)
HSL
hsl(250, 39%, 46%)
HSB
hsb(250, 56%, 64%)
CMYK
cmyk(47%, 56%, 0%, 36%)
Oklch
oklch(46.6% 0.141 287.1)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6D4C6
C6E8F6

Analogous

F6C6CF
F6D4C6
F6ECC6

Triadic

F6D4C6
C6F6D4
D4C6F6

Split-Comp.

F6D4C6
C6F6EC
C6CFF6

Tetradic

F6D4C6
CFF6C6
C6E8F6
ECC6F6

Contrast Matrix WCAG 2.1 Contrast

F6D4C6
FBBE53
ED9318
A489BD
5748A3
—
1.2
Fail
1.7
Fail
2.2
Fail
5.3
AA
1.2
Fail
—
1.4
Fail
1.8
Fail
4.4
AA Large
1.7
Fail
1.4
Fail
—
1.3
Fail
3.1
AA Large
2.2
Fail
1.8
Fail
1.3
Fail
—
2.4
Fail
5.3
AA
4.4
AA Large
3.1
AA Large
2.4
Fail
—
White BG
1.4Fail
1.7Fail
2.4Fail
3.0AA Large
7.3AAA
Black BG
15.2AAA
12.6AAA
8.8AAA
6.9AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7C9
E1E06D
C6C536
9898B0
51508D

Deuteranopia

E9ECCA
E4E973
CBD23D
9A9CAD
515388

Tritanopia

F4CCCD
F88186
E84D52
A3A6A4
567C78

Achromatopsia

DDDDDD
C4C4C4
A0A0A0
979797
575757

Shades & Tints Shades & Tints

#F6D4C6

Dark
Light

#FBBE53

Dark
Light

#ED9318

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6d4c6;
  --color-2: #fbbe53;
  --color-3: #ed9318;
  --color-4: #a489bd;
  --color-5: #5748a3;
}

SCSS

$color-1: #f6d4c6;
$color-2: #fbbe53;
$color-3: #ed9318;
$color-4: #a489bd;
$color-5: #5748a3;

TAILWIND

colors: {
  'brand-1': '#f6d4c6',
  'brand-2': '#fbbe53',
  'brand-3': '#ed9318',
  'brand-4': '#a489bd',
  'brand-5': '#5748a3',
}

RGB Array

[246, 212, 198], [251, 190, 83], [237, 147, 24], [164, 137, 189], [87, 72, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6D4C6, #FBBE53, #ED9318, #A489BD, #5748A3 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f6d4c6; --color-2: #fbbe53; --color-3: #ed9318; --color-4: #a489bd; --color-5: #5748a3. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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