Classic Blue

Meet Classic Blue (#427BBE), a color that commands attention with its confident and grounded presence. Its familiar yet profound hue offers a solid foundation for any design palette, striking a perfect balance between dependability and visual interest without being overpowering.

What color is Classic Blue?

What is the meaning of Classic Blue?

How do I use Classic Blue (#427BBE) in UI design?

Using Classic Blue color codes

Classic Blue

#427BBE

Access our full UI & UX library today.

What color is Classic Blue?

What is the meaning of Classic Blue?

How do I use Classic Blue (#427BBE) in UI design?

Using Classic Blue color codes

Classic Blue Code Conversions

HEX

#427BBE

LAB

51, 3, -41

RGB

66, 123, 190

XYZ

18.6, 19.0, 51.4

HSL

212°, 49%, 50%

LCH

51, 41, 274°

HSB

212°, 65%, 75%

LUV

51, -23, -62

CMYK

65, 35, 0, 25

CMYK

65, 35, 0, 25

HWB

212°, 26%, 25%

Classic Blue Color Harmonies

Analogous

Analogous colors are neighbors on the color wheel. For Classic Blue, these adjacent hues create a harmonious and tranquil visual experience for users.

#42B9BE

#427BBE

#4742BE

#42B9BE

#427BBE

#4742BE

Complementary

To find a complementary color for Classic Blue, look directly across the color wheel. This pairing produces a striking, energetic visual contrast.

#427BBE

#BE8542

#427BBE

#BE8542

Split Complementary

A twist on the classic complementary scheme, split complementary pairs Classic Blue with the two colors adjacent to its direct opposite on the wheel.

#427BBE

#BE4742

#B9BE42

#427BBE

#BE4742

#B9BE42

Triadic

Triadic schemes use three colors equidistant on the color wheel. With Classic Blue as a base, this creates a vibrant, high-contrast palette.

#427BBE

#BE427B

#7BBE42

#427BBE

#BE427B

#7BBE42

Tetradic

A tetradic scheme pairs Classic Blue with three other hues, creating a rich palette from two sets of complementary colors on the wheel.

#427BBE

#BE42B9

#BE8542

#42BE47

#427BBE

#BE42B9

#BE8542

#42BE47

Square

A square color scheme uses four colors evenly spaced on the color wheel. This arrangement gives Classic Blue a vibrant, high-contrast, and balanced feel.

#427BBE

#BE42B9

#BE8542

#42BE47

#427BBE

#BE42B9

#BE8542

#42BE47

Classic Blue Contrast Simulation

Text Color

#

Background Color

#

4.81

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

4.81

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Classic Blue Color Variations

Shades

Shades are darker versions of Classic Blue, made by adding black for a weightier, deeper appearance.

#427BBE

#3969A3

#2F5888

#26466D

#1C3551

#132336

#09121B

#000000

#427BBE

#3969A3

#2F5888

#26466D

#1C3551

#132336

#09121B

#000000

Tints

Tints are lighter values of Classic Blue, created by adding white to soften the hue.

#427BBE

#5D8EC7

#78A1D1

#93B4DA

#AEC6E3

#C9D9EC

#E4ECF6

#FFFFFF

#427BBE

#5D8EC7

#78A1D1

#93B4DA

#AEC6E3

#C9D9EC

#E4ECF6

#FFFFFF

Tones

Tones are created by adding gray to Classic Blue, resulting in softer, more subdued variations.

#427BBE

#4B7CB5

#547CAC

#5D7DA3

#657E9B

#6E7F92

#777F89

#808080

#427BBE

#4B7CB5

#547CAC

#5D7DA3

#657E9B

#6E7F92

#777F89

#808080

Hues

Hues are variations of Classic Blue, differing in warmth or intensity to set different tones.

#427BBE

#6642BE

#BE42B9

#BE425C

#BE8542

#9ABE42

#42BE47

#42BEA4

#427BBE

#6642BE

#BE42B9

#BE425C

#BE8542

#9ABE42

#42BE47

#42BEA4

What Interfaces Use Colors Like Classic Blue?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox