Cobalt

Meet Cobalt, #0047AB, a blue with remarkable intensity. Its deep, saturated character gives it a powerful presence without the somberness of navy. This pure hue commands attention, making it a compelling choice for creating memorable and impactful visual statements in any design project.

What color is Cobalt?

What is the meaning of Cobalt?

How do I use Cobalt (#0047AB) in UI design?

Using Cobalt color codes

Cobalt

#0047AB

Access our full UI & UX library today.

What color is Cobalt?

What is the meaning of Cobalt?

How do I use Cobalt (#0047AB) in UI design?

Using Cobalt color codes

Cobalt Code Conversions

HEX

#0047AB

LAB

33, 23, -58

RGB

0, 71, 171

XYZ

9.6, 7.4, 39.5

HSL

215°, 100%, 34%

LCH

33, 63, 291°

HSB

215°, 100%, 67%

LUV

33, -16, -80

CMYK

100, 58, 0, 33

CMYK

100, 58, 0, 33

HWB

215°, 0%, 33%

Cobalt Color Harmonies

Analogous

Analogous colors sit beside Cobalt on the color wheel. Grouping them together produces a cohesive and tranquil palette, ideal for unified designs.

#009DAB

#0047AB

#0E00AB

#009DAB

#0047AB

#0E00AB

Complementary

Complementary colors are direct opposites on the color wheel. Pairing Cobalt with its complement creates a strong visual contrast, making both hues pop.

#0047AB

#AB6400

#0047AB

#AB6400

Split Complementary

For a sophisticated look, Cobalt's split complementary palette uses the two colors neighboring its direct complement, creating high contrast with less tension.

#0047AB

#AB0E00

#9DAB00

#0047AB

#AB0E00

#9DAB00

Triadic

Triadic palettes are formed by three hues evenly spaced on the color wheel. With Cobalt as the base, these combinations offer bold, harmonious contrast.

#0047AB

#AB0047

#47AB00

#0047AB

#AB0047

#47AB00

Tetradic

A tetradic scheme pairs Cobalt with three other colors, forming two complementary sets for a vibrant and balanced four-color palette.

#0047AB

#AB009D

#AB6400

#00AB0E

#0047AB

#AB009D

#AB6400

#00AB0E

Square

A square color scheme pairs Cobalt with three other colors, all equidistant on the color wheel, producing a vibrant and highly contrasting effect.

#0047AB

#AB009D

#AB6400

#00AB0E

#0047AB

#AB009D

#AB6400

#00AB0E

Cobalt Contrast Simulation

Text Color

#

Background Color

#

8.44

Excellent

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.

8.44

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Cobalt Color Variations

Shades

Shades are darker versions of Cobalt made by adding black for increased depth and weight.

#0047AB

#003D93

#00337A

#002962

#001E49

#001431

#000A18

#000000

#0047AB

#003D93

#00337A

#002962

#001E49

#001431

#000A18

#000000

Tints

Tints are lighter variations of Cobalt, created by adding white to produce a softer feel.

#0047AB

#2461B7

#497CC3

#6D96CF

#92B0DB

#B6CAE7

#DBE5F3

#FFFFFF

#0047AB

#2461B7

#497CC3

#6D96CF

#92B0DB

#B6CAE7

#DBE5F3

#FFFFFF

Tones

Tones are created by adding gray to Cobalt, resulting in softer, more subdued color variations.

#0047AB

#124FA5

#25579F

#375F99

#496892

#5B708C

#6E7886

#808080

#0047AB

#124FA5

#25579F

#375F99

#496892

#5B708C

#6E7886

#808080

Hues

Hues are variations of Cobalt that adjust intensity and temperature, affecting the overall design's feel.

#0047AB

#3900AB

#AB009D

#AB001C

#AB6400

#72AB00

#00AB0E

#00AB8F

#0047AB

#3900AB

#AB009D

#AB001C

#AB6400

#72AB00

#00AB0E

#00AB8F

What Interfaces Use Colors Like Cobalt?

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