← Back to Editor

#2099DA · #9ED3F0 · #FFFFFF · #F4C714 · #F3FB05

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 AppData Visualization

Color Details Color Details

#2099DA

Lake Blue · DodgerBlue · Navy Blue

HEX
#2099DA
RGB
rgb(32, 153, 218)
HSL
hsl(201, 74%, 49%)
HSB
hsb(201, 85%, 85%)
CMYK
cmyk(85%, 30%, 0%, 15%)
Oklch
oklch(65.1% 0.138 239.2)

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

#9ED3F0

Sky Blue · LightBlue · Cobalt Blue

HEX
#9ED3F0
RGB
rgb(158, 211, 240)
HSL
hsl(201, 73%, 78%)
HSB
hsb(201, 34%, 94%)
CMYK
cmyk(34%, 12%, 0%, 6%)
Oklch
oklch(84.0% 0.068 232.5)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#F4C714

Ginger · Gold · Sunflower

HEX
#F4C714
RGB
rgb(244, 199, 20)
HSL
hsl(48, 91%, 52%)
HSB
hsb(48, 92%, 96%)
CMYK
cmyk(0%, 18%, 92%, 4%)
Oklch
oklch(84.5% 0.170 91.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F3FB05

Autumn Sage · Yellow · Honey Gold

HEX
#F3FB05
RGB
rgb(243, 251, 5)
HSL
hsl(62, 97%, 50%)
HSB
hsb(62, 98%, 98%)
CMYK
cmyk(3%, 0%, 98%, 2%)
Oklch
oklch(95.0% 0.210 112.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2099DA
D96120

Analogous

20D9BE
2099DA
203CD9

Triadic

2099DA
D92099
99D920

Split-Comp.

2099DA
D9203C
D9BE20

Tetradic

2099DA
BE20D9
D96120
3CD920

Contrast Matrix WCAG 2.1 Contrast

2099DA
9ED3F0
FFFFFF
F4C714
F3FB05
—
2.0
Fail
3.2
AA Large
2.0
Fail
2.8
Fail
2.0
Fail
—
1.6
Fail
1.0
Fail
1.4
Fail
3.2
AA Large
1.6
Fail
—
1.6
Fail
1.1
Fail
2.0
Fail
1.0
Fail
1.6
Fail
—
1.4
Fail
2.8
Fail
1.4
Fail
1.1
Fail
1.4
Fail
—
White BG
3.2AA Large
1.6Fail
1.0Fail
1.6Fail
1.1Fail
Black BG
6.6AA
13.0AAA
21.0AAA
13.0AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5455CA
B5B5E9
FFFFFF
E1E03F
F6F741

Deuteranopia

4D44C7
B2AEE7
FFFFFF
E3E64A
F6F54F

Tritanopia

26BEBB
A1E3E2
FFFFFF
F26269
F3707A

Achromatopsia

7C7C7C
C6C6C6
FFFFFF
C0C0C0
DDDDDD

Shades & Tints Shades & Tints

#2099DA

Dark
Light

#9ED3F0

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2099da;
  --color-2: #9ed3f0;
  --color-3: #ffffff;
  --color-4: #f4c714;
  --color-5: #f3fb05;
}

SCSS

$color-1: #2099da;
$color-2: #9ed3f0;
$color-3: #ffffff;
$color-4: #f4c714;
$color-5: #f3fb05;

TAILWIND

colors: {
  'brand-1': '#2099da',
  'brand-2': '#9ed3f0',
  'brand-3': '#ffffff',
  'brand-4': '#f4c714',
  'brand-5': '#f3fb05',
}

RGB Array

[32, 153, 218], [158, 211, 240], [255, 255, 255], [244, 199, 20], [243, 251, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2099DA, #9ED3F0, #FFFFFF, #F4C714, #F3FB05 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #2099da; --color-2: #9ed3f0; --color-3: #ffffff; --color-4: #f4c714; --color-5: #f3fb05. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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