← Back to Editor

#F1D8B1 · #FD9D3C · #F20743 · #0F8880 · #3F1157

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

#F1D8B1

Goose Yellow · Wheat · Peach Orange

HEX
#F1D8B1
RGB
rgb(241, 216, 177)
HSL
hsl(37, 70%, 82%)
HSB
hsb(37, 27%, 95%)
CMYK
cmyk(0%, 10%, 27%, 5%)
Oklch
oklch(89.3% 0.058 78.9)

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

#FD9D3C

Ginger · Coral · Warm Sun

HEX
#FD9D3C
RGB
rgb(253, 157, 60)
HSL
hsl(30, 98%, 61%)
HSB
hsb(30, 76%, 99%)
CMYK
cmyk(0%, 38%, 76%, 1%)
Oklch
oklch(77.9% 0.156 61.6)

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

#F20743

Vermilion · Crimson · Passion Red

HEX
#F20743
RGB
rgb(242, 7, 67)
HSL
hsl(345, 94%, 49%)
HSB
hsb(345, 97%, 95%)
CMYK
cmyk(0%, 97%, 72%, 5%)
Oklch
oklch(61.0% 0.243 19.4)

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

#0F8880

Mineral Blue · Teal · Mint Ice

HEX
#0F8880
RGB
rgb(15, 136, 128)
HSL
hsl(176, 80%, 30%)
HSB
hsb(176, 89%, 53%)
CMYK
cmyk(89%, 0%, 6%, 47%)
Oklch
oklch(56.6% 0.096 187.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3F1157

Royal Purple · MidnightBlue · Dark Purple

HEX
#3F1157
RGB
rgb(63, 17, 87)
HSL
hsl(279, 67%, 20%)
HSB
hsb(279, 80%, 34%)
CMYK
cmyk(28%, 80%, 0%, 66%)
Oklch
oklch(29.3% 0.121 311.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1D8B1
B1CAF1

Analogous

F1B8B1
F1D8B1
EAF1B1

Triadic

F1D8B1
B1F1D9
D9B1F1

Split-Comp.

F1D8B1
B1EAF1
B8B1F1

Tetradic

F1D8B1
B1F1B8
B1CAF1
F1B1EA

Contrast Matrix WCAG 2.1 Contrast

F1D8B1
FD9D3C
F20743
0F8880
3F1157
—
1.5
Fail
3.1
AA Large
3.1
AA Large
10.6
AAA
1.5
Fail
—
2.1
Fail
2.1
Fail
7.0
AAA
3.1
AA Large
2.1
Fail
—
1.0
Fail
3.4
AA Large
3.1
AA Large
2.1
Fail
1.0
Fail
—
3.4
AA Large
10.6
AAA
7.0
AAA
3.4
AA Large
3.4
AA Large
—
White BG
1.4Fail
2.1Fail
4.3AA Large
4.3AA Large
14.7AAA
Black BG
15.2AAA
10.1AAA
4.9AA
4.9AA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6BA
D3D353
8C8A34
434482
2B2B46

Deuteranopia

E8EABD
D9E059
9AAB31
3C3382
2E3142

Tritanopia

F0C2C4
F8666A
E62927
158384
3D3936

Achromatopsia

DBDBDB
AFAFAF
545454
636363
272727

Shades & Tints Shades & Tints

#F1D8B1

Dark
Light

#FD9D3C

Dark
Light

#F20743

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1d8b1;
  --color-2: #fd9d3c;
  --color-3: #f20743;
  --color-4: #0f8880;
  --color-5: #3f1157;
}

SCSS

$color-1: #f1d8b1;
$color-2: #fd9d3c;
$color-3: #f20743;
$color-4: #0f8880;
$color-5: #3f1157;

TAILWIND

colors: {
  'brand-1': '#f1d8b1',
  'brand-2': '#fd9d3c',
  'brand-3': '#f20743',
  'brand-4': '#0f8880',
  'brand-5': '#3f1157',
}

RGB Array

[241, 216, 177], [253, 157, 60], [242, 7, 67], [15, 136, 128], [63, 17, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1D8B1, #FD9D3C, #F20743, #0F8880, #3F1157 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: #f1d8b1; --color-2: #fd9d3c; --color-3: #f20743; --color-4: #0f8880; --color-5: #3f1157. 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