← Back to Editor

#0074B8 · #32A1E6 · #69CAFF · #BFE9FF · #FFFFFF

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

#0074B8

Lake Blue · Teal · Prussian Blue

HEX
#0074B8
RGB
rgb(0, 116, 184)
HSL
hsl(202, 100%, 36%)
HSB
hsb(202, 100%, 72%)
CMYK
cmyk(100%, 37%, 0%, 28%)
Oklch
oklch(54.0% 0.136 245.2)

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

#32A1E6

Lake Blue · DodgerBlue · Navy Blue

HEX
#32A1E6
RGB
rgb(50, 161, 230)
HSL
hsl(203, 78%, 55%)
HSB
hsb(203, 78%, 90%)
CMYK
cmyk(78%, 30%, 0%, 10%)
Oklch
oklch(67.9% 0.140 241.3)

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

#69CAFF

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#69CAFF
RGB
rgb(105, 202, 255)
HSL
hsl(201, 100%, 71%)
HSB
hsb(201, 59%, 100%)
CMYK
cmyk(59%, 21%, 0%, 0%)
Oklch
oklch(80.1% 0.118 234.8)

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

#BFE9FF

Sky Blue · LightBlue · Sky Blue

HEX
#BFE9FF
RGB
rgb(191, 233, 255)
HSL
hsl(201, 100%, 87%)
HSB
hsb(201, 25%, 100%)
CMYK
cmyk(25%, 9%, 0%, 0%)
Oklch
oklch(91.1% 0.053 230.9)

Traditional「Sky Blue」· Paint「Sky 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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0074B8
B84300

Analogous

00B89F
0074B8
0018B8

Triadic

0074B8
B80074
74B800

Split-Comp.

0074B8
B80018
B89F00

Tetradic

0074B8
9F00B8
B84300
18B800

Contrast Matrix WCAG 2.1 Contrast

0074B8
32A1E6
69CAFF
BFE9FF
FFFFFF
—
1.8
Fail
2.7
Fail
3.9
AA Large
5.0
AA
1.8
Fail
—
1.6
Fail
2.2
Fail
2.8
Fail
2.7
Fail
1.6
Fail
—
1.4
Fail
1.8
Fail
3.9
AA Large
2.2
Fail
1.4
Fail
—
1.3
Fail
5.0
AA
2.8
Fail
1.8
Fail
1.3
Fail
—
White BG
5.0AA
2.8Fail
1.8Fail
1.3Fail
1.0Fail
Black BG
4.2AA Large
7.4AAA
11.5AAA
16.3AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3233A8
6263D5
9394F2
D1D2FA
FFFFFF

Deuteranopia

2C23A4
5C53D1
8D86EF
CFCCF8
FFFFFF

Tritanopia

069B98
38C8C5
6EE8E6
C1F5F5
FFFFFF

Achromatopsia

595959
888888
B3B3B3
DFDFDF
FFFFFF

Shades & Tints Shades & Tints

#0074B8

Dark
Light

#32A1E6

Dark
Light

#69CAFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0074b8;
  --color-2: #32a1e6;
  --color-3: #69caff;
  --color-4: #bfe9ff;
  --color-5: #ffffff;
}

SCSS

$color-1: #0074b8;
$color-2: #32a1e6;
$color-3: #69caff;
$color-4: #bfe9ff;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#0074b8',
  'brand-2': '#32a1e6',
  'brand-3': '#69caff',
  'brand-4': '#bfe9ff',
  'brand-5': '#ffffff',
}

RGB Array

[0, 116, 184], [50, 161, 230], [105, 202, 255], [191, 233, 255], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0074B8, #32A1E6, #69CAFF, #BFE9FF, #FFFFFF 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: #0074b8; --color-2: #32a1e6; --color-3: #69caff; --color-4: #bfe9ff; --color-5: #ffffff. 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