← Back to Editor

#FF3333 · #FF794D · #FFFFA6 · #5C5744 · #000000

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

#FF3333

Vermilion · Crimson · Passion Red

HEX
#FF3333
RGB
rgb(255, 51, 51)
HSL
hsl(0, 100%, 60%)
HSB
hsb(0, 80%, 100%)
CMYK
cmyk(0%, 80%, 80%, 0%)
Oklch
oklch(64.9% 0.237 27.0)

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

#FF794D

Apricot · Coral · Warm Sun

HEX
#FF794D
RGB
rgb(255, 121, 77)
HSL
hsl(15, 100%, 65%)
HSB
hsb(15, 70%, 100%)
CMYK
cmyk(0%, 53%, 70%, 0%)
Oklch
oklch(72.6% 0.174 38.5)

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

#FFFFA6

Fresh Green · Wheat · Lemon Cream

HEX
#FFFFA6
RGB
rgb(255, 255, 166)
HSL
hsl(60, 100%, 83%)
HSB
hsb(60, 35%, 100%)
CMYK
cmyk(0%, 0%, 35%, 0%)
Oklch
oklch(98.0% 0.110 108.3)

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

#5C5744

Ochre · DarkOliveGreen · Honey Gold

HEX
#5C5744
RGB
rgb(92, 87, 68)
HSL
hsl(48, 15%, 31%)
HSB
hsb(48, 26%, 36%)
CMYK
cmyk(0%, 5%, 26%, 64%)
Oklch
oklch(45.6% 0.030 95.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3333
33FFFF

Analogous

FF3399
FF3333
FF9933

Triadic

FF3333
33FF33
3333FF

Split-Comp.

FF3333
33FF99
3399FF

Tetradic

FF3333
99FF33
33FFFF
9933FF

Contrast Matrix WCAG 2.1 Contrast

FF3333
FF794D
FFFFA6
5C5744
000000
—
1.4
Fail
3.5
AA Large
2.0
Fail
5.8
AA
1.4
Fail
—
2.5
Fail
2.8
Fail
8.1
AAA
3.5
AA Large
2.5
Fail
—
6.9
AA
20.1
AAA
2.0
Fail
2.8
Fail
6.9
AA
—
2.9
Fail
5.8
AA
8.1
AAA
20.1
AAA
2.9
Fail
—
White BG
3.6AA Large
2.6Fail
1.0Fail
7.2AAA
21.0AAA
Black BG
5.8AA
8.1AAA
20.1AAA
2.9Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A533
C5C458
FFFFBC
5A5A49
000000

Deuteranopia

B3C233
CDD75A
FFFFC1
5A5A4A
000000

Tritanopia

F53333
F86062
FFCDD0
5C4C4D
000000

Achromatopsia

707070
9C9C9C
F5F5F5
565656
000000

Shades & Tints Shades & Tints

#FF3333

Dark
Light

#FF794D

Dark
Light

#FFFFA6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3333;
  --color-2: #ff794d;
  --color-3: #ffffa6;
  --color-4: #5c5744;
  --color-5: #000000;
}

SCSS

$color-1: #ff3333;
$color-2: #ff794d;
$color-3: #ffffa6;
$color-4: #5c5744;
$color-5: #000000;

TAILWIND

colors: {
  'brand-1': '#ff3333',
  'brand-2': '#ff794d',
  'brand-3': '#ffffa6',
  'brand-4': '#5c5744',
  'brand-5': '#000000',
}

RGB Array

[255, 51, 51], [255, 121, 77], [255, 255, 166], [92, 87, 68], [0, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3333, #FF794D, #FFFFA6, #5C5744, #000000 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: #ff3333; --color-2: #ff794d; --color-3: #ffffa6; --color-4: #5c5744; --color-5: #000000. 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