← Back to Editor

#F23536 · #FF5D0D · #FF8B13 · #FFD165 · #35A67C

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 App

Color Details Color Details

#F23536

Vermilion · Crimson · Passion Red

HEX
#F23536
RGB
rgb(242, 53, 54)
HSL
hsl(360, 88%, 58%)
HSB
hsb(360, 78%, 95%)
CMYK
cmyk(0%, 78%, 78%, 5%)
Oklch
oklch(62.8% 0.224 26.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Soft Aurora

#FF5D0D

Tangerine · OrangeRed · Warm Sun

HEX
#FF5D0D
RGB
rgb(255, 93, 13)
HSL
hsl(20, 100%, 53%)
HSB
hsb(20, 95%, 100%)
CMYK
cmyk(0%, 64%, 95%, 0%)
Oklch
oklch(68.5% 0.210 40.2)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FF8B13

Ginger · Orange · Warm Sun

HEX
#FF8B13
RGB
rgb(255, 139, 19)
HSL
hsl(31, 100%, 54%)
HSB
hsb(31, 93%, 100%)
CMYK
cmyk(0%, 45%, 93%, 0%)
Oklch
oklch(74.9% 0.178 56.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FFD165

Ginger · SandyBrown · Sunflower

HEX
#FFD165
RGB
rgb(255, 209, 101)
HSL
hsl(42, 100%, 70%)
HSB
hsb(42, 60%, 100%)
CMYK
cmyk(0%, 18%, 60%, 0%)
Oklch
oklch(88.0% 0.136 86.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#35A67C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#35A67C
RGB
rgb(53, 166, 124)
HSL
hsl(158, 52%, 43%)
HSB
hsb(158, 68%, 65%)
CMYK
cmyk(68%, 0%, 25%, 35%)
Oklch
oklch(65.1% 0.119 164.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F23536
36F2F2

Analogous

F23694
F23536
F29436

Triadic

F23536
36F236
3636F2

Split-Comp.

F23536
36F294
3694F2

Tetradic

F23536
94F236
36F2F2
9436F2

Contrast Matrix WCAG 2.1 Contrast

F23536
FF5D0D
FF8B13
FFD165
35A67C
—
1.3
Fail
1.7
Fail
2.7
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
2.1
Fail
1.0
Fail
1.7
Fail
1.3
Fail
—
1.6
Fail
1.3
Fail
2.7
Fail
2.1
Fail
1.6
Fail
—
2.1
Fail
1.3
Fail
1.0
Fail
1.3
Fail
2.1
Fail
—
White BG
3.9AA Large
3.1AA Large
2.3Fail
1.4Fail
3.0AA Large
Black BG
5.3AA
6.8AA
9.0AAA
14.6AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09E36
B9B720
CDCC30
EBEB7F
666786

Deuteranopia

ABB936
C2CE25
D4DC37
EEF185
5F5789

Tritanopia

E93636
F73033
F9474C
FD9498
3B8E90

Achromatopsia

6E6E6E
848484
A0A0A0
D2D2D2
7F7F7F

Shades & Tints Shades & Tints

#F23536

Dark
Light

#FF5D0D

Dark
Light

#FF8B13

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f23536;
  --color-2: #ff5d0d;
  --color-3: #ff8b13;
  --color-4: #ffd165;
  --color-5: #35a67c;
}

SCSS

$color-1: #f23536;
$color-2: #ff5d0d;
$color-3: #ff8b13;
$color-4: #ffd165;
$color-5: #35a67c;

TAILWIND

colors: {
  'brand-1': '#f23536',
  'brand-2': '#ff5d0d',
  'brand-3': '#ff8b13',
  'brand-4': '#ffd165',
  'brand-5': '#35a67c',
}

RGB Array

[242, 53, 54], [255, 93, 13], [255, 139, 19], [255, 209, 101], [53, 166, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F23536, #FF5D0D, #FF8B13, #FFD165, #35A67C is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f23536; --color-2: #ff5d0d; --color-3: #ff8b13; --color-4: #ffd165; --color-5: #35a67c. 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. 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