← Back to Editor

#20DFF9 · #F0CC0A · #2073E8 · #EF7726 · #2AE4F7

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

#20DFF9

Lake Blue · Cyan · Lake Green

HEX
#20DFF9
RGB
rgb(32, 223, 249)
HSL
hsl(187, 95%, 55%)
HSB
hsb(187, 87%, 98%)
CMYK
cmyk(87%, 10%, 0%, 2%)
Oklch
oklch(83.0% 0.140 210.1)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#F0CC0A

Autumn Sage · Gold · Honey Gold

HEX
#F0CC0A
RGB
rgb(240, 204, 10)
HSL
hsl(51, 92%, 49%)
HSB
hsb(51, 96%, 94%)
CMYK
cmyk(0%, 15%, 96%, 6%)
Oklch
oklch(85.1% 0.174 96.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#2073E8

Azure · DodgerBlue · Navy Blue

HEX
#2073E8
RGB
rgb(32, 115, 232)
HSL
hsl(215, 81%, 52%)
HSB
hsb(215, 86%, 91%)
CMYK
cmyk(86%, 50%, 0%, 9%)
Oklch
oklch(57.5% 0.194 258.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#EF7726

Tangerine · Chocolate · Warm Sun

HEX
#EF7726
RGB
rgb(239, 119, 38)
HSL
hsl(24, 86%, 54%)
HSB
hsb(24, 84%, 94%)
CMYK
cmyk(0%, 50%, 84%, 6%)
Oklch
oklch(69.7% 0.171 49.3)

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

#2AE4F7

Lake Blue · Turquoise · Lake Green

HEX
#2AE4F7
RGB
rgb(42, 228, 247)
HSL
hsl(186, 93%, 57%)
HSB
hsb(186, 83%, 97%)
CMYK
cmyk(83%, 8%, 0%, 3%)
Oklch
oklch(84.2% 0.138 206.0)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20DFF9
F9391F

Analogous

1FF9A6
20DFF9
1F73F9

Triadic

20DFF9
F91FE0
E0F91F

Split-Comp.

20DFF9
F91F73
F9A61F

Tetradic

20DFF9
A61FF9
F9391F
73F91F

Contrast Matrix WCAG 2.1 Contrast

20DFF9
F0CC0A
2073E8
EF7726
2AE4F7
—
1.0
Fail
2.8
Fail
1.8
Fail
1.0
Fail
1.0
Fail
—
2.9
Fail
1.8
Fail
1.0
Fail
2.8
Fail
2.9
Fail
—
1.6
Fail
2.9
Fail
1.8
Fail
1.8
Fail
1.6
Fail
—
1.8
Fail
1.0
Fail
1.0
Fail
2.9
Fail
1.8
Fail
—
White BG
1.6Fail
1.6Fail
4.5AA Large
2.9Fail
1.6Fail
Black BG
13.0AAA
13.3AAA
4.7AA
7.3AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7374F3
E0E039
4445CC
BBBA3A
7B7CF2

Deuteranopia

6859F1
E3E544
3F39C5
C2CB3E
7062F1

Tritanopia

2AEEED
EE5E66
24B5B0
E9494C
33EFEE

Achromatopsia

A9A9A9
C1C1C1
686868
929292
AFAFAF

Shades & Tints Shades & Tints

#20DFF9

Dark
Light

#F0CC0A

Dark
Light

#2073E8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20dff9;
  --color-2: #f0cc0a;
  --color-3: #2073e8;
  --color-4: #ef7726;
  --color-5: #2ae4f7;
}

SCSS

$color-1: #20dff9;
$color-2: #f0cc0a;
$color-3: #2073e8;
$color-4: #ef7726;
$color-5: #2ae4f7;

TAILWIND

colors: {
  'brand-1': '#20dff9',
  'brand-2': '#f0cc0a',
  'brand-3': '#2073e8',
  'brand-4': '#ef7726',
  'brand-5': '#2ae4f7',
}

RGB Array

[32, 223, 249], [240, 204, 10], [32, 115, 232], [239, 119, 38], [42, 228, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20DFF9, #F0CC0A, #2073E8, #EF7726, #2AE4F7 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: #20dff9; --color-2: #f0cc0a; --color-3: #2073e8; --color-4: #ef7726; --color-5: #2ae4f7. 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