← Back to Editor

#FFF2A1 · #FF2B44 · #851723 · #1C0B00 · #3B1C09

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

#FFF2A1

Fresh Green · Khaki · Lemon Cream

HEX
#FFF2A1
RGB
rgb(255, 242, 161)
HSL
hsl(52, 100%, 82%)
HSB
hsb(52, 37%, 100%)
CMYK
cmyk(0%, 5%, 37%, 0%)
Oklch
oklch(95.3% 0.102 100.2)

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

#FF2B44

Vermilion · Crimson · Passion Red

HEX
#FF2B44
RGB
rgb(255, 43, 68)
HSL
hsl(353, 100%, 58%)
HSB
hsb(353, 83%, 100%)
CMYK
cmyk(0%, 83%, 73%, 0%)
Oklch
oklch(64.6% 0.240 22.3)

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

#851723

Vermilion · Brown · Wine Red

HEX
#851723
RGB
rgb(133, 23, 35)
HSL
hsl(353, 71%, 31%)
HSB
hsb(353, 83%, 52%)
CMYK
cmyk(0%, 83%, 74%, 48%)
Oklch
oklch(40.3% 0.144 21.5)

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

#1C0B00

Tangerine · Black · Cinnamon

HEX
#1C0B00
RGB
rgb(28, 11, 0)
HSL
hsl(24, 100%, 5%)
HSB
hsb(24, 100%, 11%)
CMYK
cmyk(0%, 61%, 100%, 89%)
Oklch
oklch(17.2% 0.040 61.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#3B1C09

Tangerine · Black · Cinnamon

HEX
#3B1C09
RGB
rgb(59, 28, 9)
HSL
hsl(23, 74%, 13%)
HSB
hsb(23, 85%, 23%)
CMYK
cmyk(0%, 53%, 85%, 77%)
Oklch
oklch(26.6% 0.057 49.6)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF2A1
A3AFFF

Analogous

FFC5A3
FFF2A1
DDFFA3

Triadic

FFF2A1
A3FFF3
F3A3FF

Split-Comp.

FFF2A1
A3DDFF
C5A3FF

Tetradic

FFF2A1
A3FFC5
A3AFFF
FFA3DD

Contrast Matrix WCAG 2.1 Contrast

FFF2A1
FF2B44
851723
1C0B00
3B1C09
—
3.3
AA Large
8.6
AAA
16.8
AAA
13.6
AAA
3.3
AA Large
—
2.6
Fail
5.2
AA
4.2
AA Large
8.6
AAA
2.6
Fail
—
2.0
Fail
1.6
Fail
16.8
AAA
5.2
AA
2.0
Fail
—
1.2
Fail
13.6
AAA
4.2
AA Large
1.6
Fail
1.2
Fail
—
White BG
1.1Fail
3.7AA Large
9.8AAA
19.1AAA
15.5AAA
Black BG
18.5AAA
5.7AA
2.1Fail
1.1Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9B5
A3A13E
555420
151403
2E2D0E

Deuteranopia

FAFBB9
B0BF3C
5C641F
161703
2F320F

Tritanopia

FEC4C7
F43938
801E1D
1B0505
391112

Achromatopsia

EDEDED
6D6D6D
393939
0F0F0F
232323

Shades & Tints Shades & Tints

#FFF2A1

Dark
Light

#FF2B44

Dark
Light

#851723

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff2a1;
  --color-2: #ff2b44;
  --color-3: #851723;
  --color-4: #1c0b00;
  --color-5: #3b1c09;
}

SCSS

$color-1: #fff2a1;
$color-2: #ff2b44;
$color-3: #851723;
$color-4: #1c0b00;
$color-5: #3b1c09;

TAILWIND

colors: {
  'brand-1': '#fff2a1',
  'brand-2': '#ff2b44',
  'brand-3': '#851723',
  'brand-4': '#1c0b00',
  'brand-5': '#3b1c09',
}

RGB Array

[255, 242, 161], [255, 43, 68], [133, 23, 35], [28, 11, 0], [59, 28, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF2A1, #FF2B44, #851723, #1C0B00, #3B1C09 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: #fff2a1; --color-2: #ff2b44; --color-3: #851723; --color-4: #1c0b00; --color-5: #3b1c09. 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