← Back to Editor

#FDF866 · #201442 · #371851 · #68275D · #CB2474

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

#FDF866

Fresh Green · Khaki · Sunflower

HEX
#FDF866
RGB
rgb(253, 248, 102)
HSL
hsl(58, 97%, 70%)
HSB
hsb(58, 60%, 99%)
CMYK
cmyk(0%, 2%, 60%, 1%)
Oklch
oklch(95.6% 0.165 107.3)

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

#201442

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#201442
RGB
rgb(32, 20, 66)
HSL
hsl(256, 53%, 17%)
HSB
hsb(256, 70%, 26%)
CMYK
cmyk(52%, 70%, 0%, 74%)
Oklch
oklch(23.7% 0.083 290.7)

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

#371851

Royal Purple · MidnightBlue · Eggplant

HEX
#371851
RGB
rgb(55, 24, 81)
HSL
hsl(273, 54%, 21%)
HSB
hsb(273, 70%, 32%)
CMYK
cmyk(32%, 70%, 0%, 68%)
Oklch
oklch(28.6% 0.101 306.0)

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

#68275D

Rose Purple · Purple · Eggplant

HEX
#68275D
RGB
rgb(104, 39, 93)
HSL
hsl(310, 45%, 28%)
HSB
hsb(310, 63%, 41%)
CMYK
cmyk(0%, 63%, 11%, 59%)
Oklch
oklch(38.8% 0.117 334.7)

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

#CB2474

Dark Violet · MediumVioletRed · Camellia

HEX
#CB2474
RGB
rgb(203, 36, 116)
HSL
hsl(331, 70%, 47%)
HSB
hsb(331, 82%, 80%)
CMYK
cmyk(0%, 82%, 43%, 20%)
Oklch
oklch(56.1% 0.207 358.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF866
686DFD

Analogous

FDAE68
FDF866
B7FD68

Triadic

FDF866
68FDF8
F868FD

Split-Comp.

FDF866
68B7FD
AE68FD

Tetradic

FDF866
68FDAE
686DFD
FD68B7

Contrast Matrix WCAG 2.1 Contrast

FDF866
201442
371851
68275D
CB2474
—
15.2
AAA
13.3
AAA
9.2
AAA
4.6
AA
15.2
AAA
—
1.1
Fail
1.6
Fail
3.3
AA Large
13.3
AAA
1.1
Fail
—
1.4
Fail
2.9
Fail
9.2
AAA
1.6
Fail
1.4
Fail
—
2.0
Fail
4.6
AA
3.3
AA Large
2.9
Fail
2.0
Fail
—
White BG
1.1Fail
16.9AAA
14.9AAA
10.3AAA
5.2AA
Black BG
18.8AAA
1.2Fail
1.4Fail
2.0Fail
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFB89
1B1B37
2A2943
4C4B50
838161

Deuteranopia

FBFC92
1C1C34
2B2E40
50554D
8C995C

Tritanopia

FDA5AB
1F2E2C
353836
654643
C3514E

Achromatopsia

E9E9E9
1D1D1D
282828
414141
5F5F5F

Shades & Tints Shades & Tints

#FDF866

Dark
Light

#201442

Dark
Light

#371851

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf866;
  --color-2: #201442;
  --color-3: #371851;
  --color-4: #68275d;
  --color-5: #cb2474;
}

SCSS

$color-1: #fdf866;
$color-2: #201442;
$color-3: #371851;
$color-4: #68275d;
$color-5: #cb2474;

TAILWIND

colors: {
  'brand-1': '#fdf866',
  'brand-2': '#201442',
  'brand-3': '#371851',
  'brand-4': '#68275d',
  'brand-5': '#cb2474',
}

RGB Array

[253, 248, 102], [32, 20, 66], [55, 24, 81], [104, 39, 93], [203, 36, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDF866, #201442, #371851, #68275D, #CB2474 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #fdf866; --color-2: #201442; --color-3: #371851; --color-4: #68275d; --color-5: #cb2474. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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