← Back to Editor

#F6DC88 · #FDBA5F · #FB663C · #DF1F4E · #5E0F25

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

#F6DC88

Goose Yellow · Khaki · Sunflower

HEX
#F6DC88
RGB
rgb(246, 220, 136)
HSL
hsl(46, 86%, 75%)
HSB
hsb(46, 45%, 96%)
CMYK
cmyk(0%, 11%, 45%, 4%)
Oklch
oklch(89.8% 0.108 92.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FDBA5F

Ginger · SandyBrown · Warm Sun

HEX
#FDBA5F
RGB
rgb(253, 186, 95)
HSL
hsl(35, 98%, 68%)
HSB
hsb(35, 62%, 99%)
CMYK
cmyk(0%, 26%, 62%, 1%)
Oklch
oklch(83.4% 0.132 72.6)

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

#FB663C

Peach Pink · Tomato · Coral Red

HEX
#FB663C
RGB
rgb(251, 102, 60)
HSL
hsl(13, 96%, 61%)
HSB
hsb(13, 76%, 98%)
CMYK
cmyk(0%, 59%, 76%, 2%)
Oklch
oklch(69.3% 0.191 36.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DF1F4E

Vermilion · Crimson · Passion Red

HEX
#DF1F4E
RGB
rgb(223, 31, 78)
HSL
hsl(345, 76%, 50%)
HSB
hsb(345, 86%, 87%)
CMYK
cmyk(0%, 86%, 65%, 13%)
Oklch
oklch(58.4% 0.219 15.6)

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

#5E0F25

Dark Violet · Maroon · Raspberry

HEX
#5E0F25
RGB
rgb(94, 15, 37)
HSL
hsl(343, 72%, 21%)
HSB
hsb(343, 84%, 37%)
CMYK
cmyk(0%, 84%, 61%, 63%)
Oklch
oklch(32.0% 0.111 10.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6DC88
88A2F6

Analogous

F6A688
F6DC88
D9F688

Triadic

F6DC88
88F6DC
DC88F6

Split-Comp.

F6DC88
88D9F6
A688F6

Tetradic

F6DC88
88F6A6
88A2F6
F688D9

Contrast Matrix WCAG 2.1 Contrast

F6DC88
FDBA5F
FB663C
DF1F4E
5E0F25
—
1.3
Fail
2.2
Fail
3.5
AA Large
9.9
AAA
1.3
Fail
—
1.7
Fail
2.8
Fail
7.9
AAA
2.2
Fail
1.7
Fail
—
1.6
Fail
4.5
AA Large
3.5
AA Large
2.8
Fail
1.6
Fail
—
2.8
Fail
9.9
AAA
7.9
AAA
4.5
AA Large
2.8
Fail
—
White BG
1.4Fail
1.7Fail
3.0Fail
4.7AA
13.4AAA
Black BG
15.5AAA
12.4AAA
7.1AAA
4.4AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB9C
E0DF75
BAB946
8C8A43
3C3B20

Deuteranopia

ECEEA1
E4E97A
C3CE49
97A540
40461E

Tritanopia

F5ACB0
FA868A
F44E50
D53A38
5A1B1B

Achromatopsia

DADADA
C4C4C4
8E8E8E
5E5E5E
292929

Shades & Tints Shades & Tints

#F6DC88

Dark
Light

#FDBA5F

Dark
Light

#FB663C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6dc88;
  --color-2: #fdba5f;
  --color-3: #fb663c;
  --color-4: #df1f4e;
  --color-5: #5e0f25;
}

SCSS

$color-1: #f6dc88;
$color-2: #fdba5f;
$color-3: #fb663c;
$color-4: #df1f4e;
$color-5: #5e0f25;

TAILWIND

colors: {
  'brand-1': '#f6dc88',
  'brand-2': '#fdba5f',
  'brand-3': '#fb663c',
  'brand-4': '#df1f4e',
  'brand-5': '#5e0f25',
}

RGB Array

[246, 220, 136], [253, 186, 95], [251, 102, 60], [223, 31, 78], [94, 15, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6DC88, #FDBA5F, #FB663C, #DF1F4E, #5E0F25 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: #f6dc88; --color-2: #fdba5f; --color-3: #fb663c; --color-4: #df1f4e; --color-5: #5e0f25. 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