← Back to Editor

#F1DDC4 · #F7BB25 · #FF254F · #6A3C60 · #21022C

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

#F1DDC4

Goose Yellow · Bisque · Peach Orange

HEX
#F1DDC4
RGB
rgb(241, 221, 196)
HSL
hsl(33, 62%, 86%)
HSB
hsb(33, 19%, 95%)
CMYK
cmyk(0%, 8%, 19%, 5%)
Oklch
oklch(90.7% 0.040 73.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F7BB25

Ginger · GoldenRod · Sunflower

HEX
#F7BB25
RGB
rgb(247, 187, 37)
HSL
hsl(43, 93%, 56%)
HSB
hsb(43, 85%, 97%)
CMYK
cmyk(0%, 24%, 85%, 3%)
Oklch
oklch(82.5% 0.162 83.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FF254F

Vermilion · Crimson · Passion Red

HEX
#FF254F
RGB
rgb(255, 37, 79)
HSL
hsl(348, 100%, 57%)
HSB
hsb(348, 85%, 100%)
CMYK
cmyk(0%, 85%, 69%, 0%)
Oklch
oklch(64.5% 0.243 18.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#6A3C60

Rose Purple · DimGray · Eggplant

HEX
#6A3C60
RGB
rgb(106, 60, 96)
HSL
hsl(313, 28%, 33%)
HSB
hsb(313, 43%, 42%)
CMYK
cmyk(0%, 43%, 9%, 58%)
Oklch
oklch(42.5% 0.082 335.4)

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

#21022C

Royal Purple · Black · Dark Purple

HEX
#21022C
RGB
rgb(33, 2, 44)
HSL
hsl(284, 91%, 9%)
HSB
hsb(284, 95%, 17%)
CMYK
cmyk(25%, 95%, 0%, 83%)
Oklch
oklch(18.8% 0.085 315.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1DDC4
C5D9F1

Analogous

F1C7C5
F1DDC4
EFF1C5

Triadic

F1DDC4
C5F1DE
DEC5F1

Split-Comp.

F1DDC4
C5EFF1
C7C5F1

Tetradic

F1DDC4
C5F1C7
C5D9F1
F1C5EF

Contrast Matrix WCAG 2.1 Contrast

F1DDC4
F7BB25
FF254F
6A3C60
21022C
—
1.3
Fail
2.8
Fail
6.5
AA
14.3
AAA
1.3
Fail
—
2.1
Fail
5.0
AA
10.9
AAA
2.8
Fail
2.1
Fail
—
2.3
Fail
5.1
AA
6.5
AA
5.0
AA
2.3
Fail
—
2.2
Fail
14.3
AAA
10.9
AAA
5.1
AA
2.2
Fail
—
White BG
1.3Fail
1.7Fail
3.7AA Large
8.6AAA
18.9AAA
Black BG
15.9AAA
12.1AAA
5.6AA
2.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8CA
DDDC49
A19F45
565657
141322

Deuteranopia

EAEBCC
E1E552
ADBE42
595C55
15181F

Tritanopia

F0CFD0
F4666C
F43D3B
68504F
1F1A18

Achromatopsia

E0E0E0
BCBCBC
6B6B6B
4E4E4E
101010

Shades & Tints Shades & Tints

#F1DDC4

Dark
Light

#F7BB25

Dark
Light

#FF254F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1ddc4;
  --color-2: #f7bb25;
  --color-3: #ff254f;
  --color-4: #6a3c60;
  --color-5: #21022c;
}

SCSS

$color-1: #f1ddc4;
$color-2: #f7bb25;
$color-3: #ff254f;
$color-4: #6a3c60;
$color-5: #21022c;

TAILWIND

colors: {
  'brand-1': '#f1ddc4',
  'brand-2': '#f7bb25',
  'brand-3': '#ff254f',
  'brand-4': '#6a3c60',
  'brand-5': '#21022c',
}

RGB Array

[241, 221, 196], [247, 187, 37], [255, 37, 79], [106, 60, 96], [33, 2, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1DDC4, #F7BB25, #FF254F, #6A3C60, #21022C 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: #f1ddc4; --color-2: #f7bb25; --color-3: #ff254f; --color-4: #6a3c60; --color-5: #21022c. 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