American Blue

Meet American Blue (#3B3B6D), a deep and muted shade that commands attention without shouting. Its unique character stems from a sophisticated blend of navy and slate, giving it a solid presence and a touch of quiet complexity that sets it apart from primary blues.

What color is American Blue?

What is the meaning of American Blue?

How do I use American Blue (#3B3B6D) in UI design?

Using American Blue color codes

American Blue

#3B3B6D

Access our full UI & UX library today.

What color is American Blue?

What is the meaning of American Blue?

How do I use American Blue (#3B3B6D) in UI design?

Using American Blue color codes

American Blue Code Conversions

HEX

#3B3B6D

LAB

27, 14, -29

RGB

59, 59, 109

XYZ

6.1, 5.2, 15.1

HSL

240°, 30%, 33%

LCH

27, 32, 296°

HSB

240°, 46%, 43%

LUV

27, -3, -38

CMYK

46, 46, 0, 57

CMYK

46, 46, 0, 57

HWB

240°, 23%, 57%

American Blue Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. With American Blue, these neighboring shades produce a cohesive and tranquil palette.

#3B546D

#3B3B6D

#543B6D

#3B546D

#3B3B6D

#543B6D

Complementary

Complementary colors sit directly opposite each other on the color wheel. For American Blue, this pairing creates a striking, high-contrast visual effect.

#3B3B6D

#6D6D3B

#3B3B6D

#6D6D3B

Split Complementary

A split complementary scheme pairs American Blue with the two colors adjacent to its opposite, creating a high-contrast look with less visual tension.

#3B3B6D

#6D543B

#546D3B

#3B3B6D

#6D543B

#546D3B

Triadic

Triadic color schemes use three hues equally spaced on the color wheel. For American Blue, this creates a vibrant, high-contrast, and balanced palette.

#3B3B6D

#6D3B3B

#3B6D3B

#3B3B6D

#6D3B3B

#3B6D3B

Tetradic

A tetradic scheme pairs American Blue with three other colors, forming two complementary pairs on the color wheel for a vibrant, balanced palette.

#3B3B6D

#6D3B54

#6D6D3B

#3B6D54

#3B3B6D

#6D3B54

#6D6D3B

#3B6D54

Square

A square color scheme uses four colors equidistant on the color wheel, giving American Blue a set of highly contrasting yet balanced companion colors.

#3B3B6D

#6D3B54

#6D6D3B

#3B6D54

#3B3B6D

#6D3B54

#6D6D3B

#3B6D54

American Blue Contrast Simulation

Text Color

#

Background Color

#

10.33

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.

10.33

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

American Blue Color Variations

Shades

Shades of American Blue are darker versions made by adding black, creating depth and weight.

#3B3B6D

#33335D

#2A2A4E

#22223E

#19192F

#11111F

#080810

#000000

#3B3B6D

#33335D

#2A2A4E

#22223E

#19192F

#11111F

#080810

#000000

Tints

Tints of American Blue are created by adding white, which results in softer, lighter hues.

#3B3B6D

#575782

#737397

#8F8FAC

#ABABC0

#C7C7D5

#E3E3EA

#FFFFFF

#3B3B6D

#575782

#737397

#8F8FAC

#ABABC0

#C7C7D5

#E3E3EA

#FFFFFF

Tones

Tones of American Blue are created by mixing in gray, producing softer, desaturated variations.

#3B3B6D

#454570

#4F4F72

#595975

#626278

#6C6C7B

#76767D

#808080

#3B3B6D

#454570

#4F4F72

#595975

#626278

#6C6C7B

#76767D

#808080

Hues

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

#3B3B6D

#603B6D

#6D3B54

#6D473B

#6D6D3B

#476D3B

#3B6D54

#3B606D

#3B3B6D

#603B6D

#6D3B54

#6D473B

#6D6D3B

#476D3B

#3B6D54

#3B606D

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