← Back to Editor

#357AE8 · #9E83C7 · #FA8993 · #FAB26E · #FFDB63

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 App

Color Details Color Details

#357AE8

Azure · DodgerBlue · Navy Blue

HEX
#357AE8
RGB
rgb(53, 122, 232)
HSL
hsl(217, 80%, 56%)
HSB
hsb(217, 77%, 91%)
CMYK
cmyk(77%, 47%, 0%, 9%)
Oklch
oklch(59.5% 0.181 259.5)

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

#9E83C7

Wisteria · DarkGray · Lilac Purple

HEX
#9E83C7
RGB
rgb(158, 131, 199)
HSL
hsl(264, 38%, 65%)
HSB
hsb(264, 34%, 78%)
CMYK
cmyk(21%, 34%, 0%, 22%)
Oklch
oklch(66.1% 0.103 301.9)

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

#FA8993

Peach Pink · LightCoral · Coral Red

HEX
#FA8993
RGB
rgb(250, 137, 147)
HSL
hsl(355, 92%, 76%)
HSB
hsb(355, 45%, 98%)
CMYK
cmyk(0%, 45%, 41%, 2%)
Oklch
oklch(75.6% 0.137 15.3)

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

#FAB26E

Apricot · SandyBrown · Warm Sun

HEX
#FAB26E
RGB
rgb(250, 178, 110)
HSL
hsl(29, 93%, 71%)
HSB
hsb(29, 56%, 98%)
CMYK
cmyk(0%, 29%, 56%, 2%)
Oklch
oklch(81.8% 0.119 63.2)

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

#FFDB63

Ginger · Khaki · Sunflower

HEX
#FFDB63
RGB
rgb(255, 219, 99)
HSL
hsl(46, 100%, 69%)
HSB
hsb(46, 61%, 100%)
CMYK
cmyk(0%, 14%, 61%, 0%)
Oklch
oklch(89.9% 0.143 92.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

357AE8
E9A435

Analogous

35D4E9
357AE8
4A35E9

Triadic

357AE8
E9357A
7AE935

Split-Comp.

357AE8
E94A35
D4E935

Tetradic

357AE8
E935D4
E9A435
35E94A

Contrast Matrix WCAG 2.1 Contrast

357AE8
9E83C7
FA8993
FAB26E
FFDB63
—
1.3
Fail
1.8
Fail
2.3
Fail
3.1
AA Large
1.3
Fail
—
1.4
Fail
1.8
Fail
2.4
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
2.3
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
3.1
AA Large
2.4
Fail
1.7
Fail
1.3
Fail
—
White BG
4.1AA Large
3.2AA Large
2.3Fail
1.8Fail
1.3Fail
Black BG
5.1AA
6.5AA
9.1AAA
11.7AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5353CD
9292B7
C9C891
DBDA7E
EFEF80

Deuteranopia

4F4AC7
9496B3
D0D890
DFE482
F2F487

Tritanopia

38B8B4
9DAAA7
F48F8E
F68B8E
FD979C

Achromatopsia

727272
939393
ACACAC
C0C0C0
D8D8D8

Shades & Tints Shades & Tints

#357AE8

Dark
Light

#9E83C7

Dark
Light

#FA8993

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #357ae8;
  --color-2: #9e83c7;
  --color-3: #fa8993;
  --color-4: #fab26e;
  --color-5: #ffdb63;
}

SCSS

$color-1: #357ae8;
$color-2: #9e83c7;
$color-3: #fa8993;
$color-4: #fab26e;
$color-5: #ffdb63;

TAILWIND

colors: {
  'brand-1': '#357ae8',
  'brand-2': '#9e83c7',
  'brand-3': '#fa8993',
  'brand-4': '#fab26e',
  'brand-5': '#ffdb63',
}

RGB Array

[53, 122, 232], [158, 131, 199], [250, 137, 147], [250, 178, 110], [255, 219, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #357AE8, #9E83C7, #FA8993, #FAB26E, #FFDB63 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: #357ae8; --color-2: #9e83c7; --color-3: #fa8993; --color-4: #fab26e; --color-5: #ffdb63. 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