← Back to Editor

#FF286A · #FF0F2F · #FF4800 · #FFB402 · #A5FF15

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FF286A

Dark Violet · DeepPink · Rose Pink

HEX
#FF286A
RGB
rgb(255, 40, 106)
HSL
hsl(342, 100%, 58%)
HSB
hsb(342, 84%, 100%)
CMYK
cmyk(0%, 84%, 58%, 0%)
Oklch
oklch(65.1% 0.242 11.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FF0F2F

Vermilion · Crimson · Passion Red

HEX
#FF0F2F
RGB
rgb(255, 15, 47)
HSL
hsl(352, 100%, 53%)
HSB
hsb(352, 94%, 100%)
CMYK
cmyk(0%, 94%, 82%, 0%)
Oklch
oklch(63.3% 0.252 24.8)

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

#FF4800

Tangerine · OrangeRed · Amber Brown

HEX
#FF4800
RGB
rgb(255, 72, 0)
HSL
hsl(17, 100%, 50%)
HSB
hsb(17, 100%, 100%)
CMYK
cmyk(0%, 72%, 100%, 0%)
Oklch
oklch(66.3% 0.227 36.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#FFB402

Ochre · Orange · Honey Gold

HEX
#FFB402
RGB
rgb(255, 180, 2)
HSL
hsl(42, 100%, 50%)
HSB
hsb(42, 99%, 100%)
CMYK
cmyk(0%, 29%, 99%, 0%)
Oklch
oklch(82.0% 0.170 78.4)

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

#A5FF15

Grass Green · GreenYellow · Olive Green

HEX
#A5FF15
RGB
rgb(165, 255, 21)
HSL
hsl(83, 100%, 54%)
HSB
hsb(83, 92%, 100%)
CMYK
cmyk(35%, 0%, 92%, 0%)
Oklch
oklch(90.8% 0.244 130.9)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF286A
29FFBF

Analogous

FF29D4
FF286A
FF5429

Triadic

FF286A
69FF29
2969FF

Split-Comp.

FF286A
29FF54
29D4FF

Tetradic

FF286A
D4FF29
29FFBF
5429FF

Contrast Matrix WCAG 2.1 Contrast

FF286A
FF0F2F
FF4800
FFB402
A5FF15
—
1.1
Fail
1.1
Fail
2.0
Fail
2.9
Fail
1.1
Fail
—
1.2
Fail
2.2
Fail
3.2
AA Large
1.1
Fail
1.2
Fail
—
1.9
Fail
2.7
Fail
2.0
Fail
2.2
Fail
1.9
Fail
—
1.4
Fail
2.9
Fail
3.2
AA Large
2.7
Fail
1.4
Fail
—
White BG
3.6AA Large
3.9AA Large
3.4AA Large
1.8Fail
1.2Fail
Black BG
5.8AA
5.4AA
6.2AA
11.8AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A05A
979527
B0AE11
DFDE2D
CCCD4E

Deuteranopia

AEBF56
A5B725
BAC816
E3E937
C7C05B

Tritanopia

F44D4B
F32120
F61F22
FB4F57
AA7A84

Achromatopsia

707070
5A5A5A
777777
B6B6B6
C9C9C9

Shades & Tints Shades & Tints

#FF286A

Dark
Light

#FF0F2F

Dark
Light

#FF4800

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff286a;
  --color-2: #ff0f2f;
  --color-3: #ff4800;
  --color-4: #ffb402;
  --color-5: #a5ff15;
}

SCSS

$color-1: #ff286a;
$color-2: #ff0f2f;
$color-3: #ff4800;
$color-4: #ffb402;
$color-5: #a5ff15;

TAILWIND

colors: {
  'brand-1': '#ff286a',
  'brand-2': '#ff0f2f',
  'brand-3': '#ff4800',
  'brand-4': '#ffb402',
  'brand-5': '#a5ff15',
}

RGB Array

[255, 40, 106], [255, 15, 47], [255, 72, 0], [255, 180, 2], [165, 255, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FF286A, #FF0F2F, #FF4800, #FFB402, #A5FF15 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: #ff286a; --color-2: #ff0f2f; --color-3: #ff4800; --color-4: #ffb402; --color-5: #a5ff15. 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 summer-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