← Back to Editor

#FFAD26 · #FFAFAA · #FF7198 · #F000CC · #8300A6

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 AppData Visualization

Color Details Color Details

#FFAD26

Ginger · GoldenRod · Warm Sun

HEX
#FFAD26
RGB
rgb(255, 173, 38)
HSL
hsl(37, 100%, 57%)
HSB
hsb(37, 85%, 100%)
CMYK
cmyk(0%, 32%, 85%, 0%)
Oklch
oklch(80.8% 0.163 72.9)

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

#FFAFAA

Peach Pink · LightPink · Cherry Blossom

HEX
#FFAFAA
RGB
rgb(255, 175, 170)
HSL
hsl(4, 100%, 83%)
HSB
hsb(4, 33%, 100%)
CMYK
cmyk(0%, 31%, 33%, 0%)
Oklch
oklch(82.9% 0.095 23.3)

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

#FF7198

Rouge · LightCoral · Rose Pink

HEX
#FF7198
RGB
rgb(255, 113, 152)
HSL
hsl(344, 100%, 72%)
HSB
hsb(344, 56%, 100%)
CMYK
cmyk(0%, 56%, 40%, 0%)
Oklch
oklch(73.0% 0.176 5.3)

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

#F000CC

Rose Purple · Magenta · Violet

HEX
#F000CC
RGB
rgb(240, 0, 204)
HSL
hsl(309, 100%, 47%)
HSB
hsb(309, 100%, 94%)
CMYK
cmyk(0%, 100%, 15%, 6%)
Oklch
oklch(65.0% 0.286 337.1)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#8300A6

Royal Purple · DarkMagenta · Eggplant

HEX
#8300A6
RGB
rgb(131, 0, 166)
HSL
hsl(287, 100%, 33%)
HSB
hsb(287, 100%, 65%)
CMYK
cmyk(21%, 100%, 0%, 35%)
Oklch
oklch(45.4% 0.222 316.0)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAD26
2478FF

Analogous

FF3D24
FFAD26
E5FF24

Triadic

FFAD26
24FFAB
AB24FF

Split-Comp.

FFAD26
24E5FF
3D24FF

Tetradic

FFAD26
24FF3D
2478FF
FF24E5

Contrast Matrix WCAG 2.1 Contrast

FFAD26
FFAFAA
FF7198
F000CC
8300A6
—
1.1
Fail
1.4
Fail
2.0
Fail
4.5
AA Large
1.1
Fail
—
1.5
Fail
2.1
Fail
4.8
AA
1.4
Fail
1.5
Fail
—
1.4
Fail
3.2
AA Large
2.0
Fail
2.1
Fail
1.4
Fail
—
2.2
Fail
4.5
AA Large
4.8
AA
3.2
AA Large
2.2
Fail
—
White BG
1.9Fail
1.8Fail
2.6Fail
3.8AA Large
8.3AAA
Black BG
11.3AAA
12.0AAA
8.1AAA
5.6AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB47
DCDCAB
C2C08F
88869B
4A497E

Deuteranopia

E0E64F
E1E7AC
CAD48C
96A88F
525C74

Tritanopia

FB6066
FBACAC
F88785
E4746B
7C5E57

Achromatopsia

B6B6B6
C6C6C6
A0A0A0
5F5F5F
3A3A3A

Shades & Tints Shades & Tints

#FFAD26

Dark
Light

#FFAFAA

Dark
Light

#FF7198

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffad26;
  --color-2: #ffafaa;
  --color-3: #ff7198;
  --color-4: #f000cc;
  --color-5: #8300a6;
}

SCSS

$color-1: #ffad26;
$color-2: #ffafaa;
$color-3: #ff7198;
$color-4: #f000cc;
$color-5: #8300a6;

TAILWIND

colors: {
  'brand-1': '#ffad26',
  'brand-2': '#ffafaa',
  'brand-3': '#ff7198',
  'brand-4': '#f000cc',
  'brand-5': '#8300a6',
}

RGB Array

[255, 173, 38], [255, 175, 170], [255, 113, 152], [240, 0, 204], [131, 0, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFAD26, #FFAFAA, #FF7198, #F000CC, #8300A6 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: #ffad26; --color-2: #ffafaa; --color-3: #ff7198; --color-4: #f000cc; --color-5: #8300a6. 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