Columbia Blue

Columbia Blue, #9BDDFF, is a strikingly clear and bright shade of cyan-blue. Its high brightness and pure hue give it a clean, digital-native quality that feels both refreshing and modern, making it a standout choice for contemporary interface design.

What color is Columbia Blue?

What is the meaning of Columbia Blue?

How do I use Columbia Blue (#9BDDFF) in UI design?

Using Columbia Blue color codes

Columbia Blue

#9BDDFF

Access our full UI & UX library today.

What color is Columbia Blue?

What is the meaning of Columbia Blue?

How do I use Columbia Blue (#9BDDFF) in UI design?

Using Columbia Blue color codes

Columbia Blue Code Conversions

HEX

#9BDDFF

LAB

85, -12, -23

RGB

155, 221, 255

XYZ

57.4, 65.9, 104.3

HSL

200°, 100%, 80%

LCH

85, 26, 242°

HSB

200°, 39%, 100%

LUV

85, -32, -35

CMYK

39, 13, 0, 0

CMYK

39, 13, 0, 0

HWB

200°, 61%, 0%

Columbia Blue Color Harmonies

Analogous

Analogous colors are neighbors on the color wheel. For Columbia Blue, this creates a harmonious and serene palette, perfect for cohesive designs.

#9BFFEF

#9BDDFF

#9BABFF

#9BFFEF

#9BDDFF

#9BABFF

Complementary

To find a complementary color for Columbia Blue, look to the opposite side of the color wheel for a vibrant and high-contrast partner.

#9BDDFF

#FFBD9B

#9BDDFF

#FFBD9B

Split Complementary

A split complementary scheme for Columbia Blue pairs it with the two colors adjacent to its direct opposite, creating a vibrant yet balanced palette.

#9BDDFF

#FF9BAB

#FFEF9B

#9BDDFF

#FF9BAB

#FFEF9B

Triadic

A triadic scheme pairs Columbia Blue with two other colors, equally spaced on the color wheel, creating a vibrant and balanced high-contrast palette.

#9BDDFF

#FF9BDD

#DDFF9B

#9BDDFF

#FF9BDD

#DDFF9B

Tetradic

A tetradic scheme for Columbia Blue involves four hues in total, created by selecting two distinct pairs of complementary colors.

#9BDDFF

#EF9BFF

#FFBD9B

#ABFF9B

#9BDDFF

#EF9BFF

#FFBD9B

#ABFF9B

Square

The square color scheme pairs Columbia Blue with three other hues, all equidistant on the color wheel for a balanced, high-contrast effect.

#9BDDFF

#EF9BFF

#FFBD9B

#ABFF9B

#9BDDFF

#EF9BFF

#FFBD9B

#ABFF9B

Columbia Blue Contrast Simulation

Text Color

#

Background Color

#

14.18

Super

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.

14.18

Super

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Columbia Blue Color Variations

Shades

Adding black to Columbia Blue creates its shades, which ground the color with added weight.

#9BDDFF

#85BDDB

#6F9EB6

#597E92

#425F6D

#2C3F49

#162024

#000000

#9BDDFF

#85BDDB

#6F9EB6

#597E92

#425F6D

#2C3F49

#162024

#000000

Tints

Tints of Columbia Blue are created by mixing in white, resulting in softer, airier variations.

#9BDDFF

#A9E2FF

#B8E7FF

#C6ECFF

#D4F0FF

#E2F5FF

#F1FAFF

#FFFFFF

#9BDDFF

#A9E2FF

#B8E7FF

#C6ECFF

#D4F0FF

#E2F5FF

#F1FAFF

#FFFFFF

Tones

Tones of Columbia Blue are created by adding gray, resulting in softer, more subtle variations.

#9BDDFF

#97D0ED

#93C2DB

#8FB5C9

#8CA8B6

#889BA4

#848D92

#808080

#9BDDFF

#97D0ED

#93C2DB

#8FB5C9

#8CA8B6

#889BA4

#848D92

#808080

Hues

Hues are variations of Columbia Blue, differing in intensity or temperature to create distinct moods.

#9BDDFF

#A49BFF

#EF9BFF

#FF9BC4

#FFBD9B

#F6FF9B

#ABFF9B

#9BFFD6

#9BDDFF

#A49BFF

#EF9BFF

#FF9BC4

#FFBD9B

#F6FF9B

#ABFF9B

#9BFFD6

What Interfaces Use Colors Like Columbia 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