Soothing Sapphire

Meet Soothing Sapphire (#3A7FBF), a blue that commands attention with its remarkable clarity and balance. This hue sits perfectly between a deep navy and a bright sky blue, offering a versatile yet distinct character for any design palette without being overpowering.

What color is Soothing Sapphire?

What is the meaning of Soothing Sapphire?

How do I use Soothing Sapphire (#3A7FBF) in UI design?

Using Soothing Sapphire color codes

Soothing Sapphire

#3A7FBF

Access our full UI & UX library today.

What color is Soothing Sapphire?

What is the meaning of Soothing Sapphire?

How do I use Soothing Sapphire (#3A7FBF) in UI design?

Using Soothing Sapphire color codes

Soothing Sapphire Code Conversions

HEX

#3A7FBF

LAB

52, -1, -40

RGB

58, 127, 191

XYZ

18.7, 19.8, 52.1

HSL

209°, 53%, 49%

LCH

52, 40, 269°

HSB

209°, 70%, 75%

LUV

52, -26, -61

CMYK

70, 34, 0, 25

CMYK

70, 34, 0, 25

HWB

209°, 23%, 25%

Soothing Sapphire Color Harmonies

Analogous

Pairing Soothing Sapphire with its neighbors on the color wheel creates an analogous scheme, known for its cohesive and serene visual appeal.

#3ABFBD

#3A7FBF

#3A3CBF

#3ABFBD

#3A7FBF

#3A3CBF

Complementary

To find Soothing Sapphire's complementary partners, look to the opposite side of the color wheel. These pairings produce a vibrant, energetic visual contrast.

#3A7FBF

#BF7A3A

#3A7FBF

#BF7A3A

Split Complementary

The split complementary scheme pairs Soothing Sapphire with the two colors that sit on either side of its complement for a vibrant, balanced look.

#3A7FBF

#BF3A3C

#BFBD3A

#3A7FBF

#BF3A3C

#BFBD3A

Triadic

A triadic scheme pairs Soothing Sapphire with two other colors, forming an equilateral triangle on the color wheel for a dynamic and harmonious effect.

#3A7FBF

#BF3A7F

#7FBF3A

#3A7FBF

#BF3A7F

#7FBF3A

Tetradic

A tetradic scheme offers rich palettes by pairing Soothing Sapphire with its complement, plus another complementary pair, forming a rectangle on the color wheel.

#3A7FBF

#BD3ABF

#BF7A3A

#3DBF3A

#3A7FBF

#BD3ABF

#BF7A3A

#3DBF3A

Square

Square color schemes pair four equidistant colors on the color wheel. The result is a vibrant and balanced palette built around Soothing Sapphire.

#3A7FBF

#BD3ABF

#BF7A3A

#3DBF3A

#3A7FBF

#BD3ABF

#BF7A3A

#3DBF3A

Soothing Sapphire Contrast Simulation

Text Color

#

Background Color

#

4.97

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.97

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Soothing Sapphire Color Variations

Shades

Adding black to Soothing Sapphire creates its darker shades, which introduce depth and gravity.

#3A7FBF

#326DA4

#295B88

#21496D

#193652

#112437

#08121B

#000000

#3A7FBF

#326DA4

#295B88

#21496D

#193652

#112437

#08121B

#000000

Tints

Tints of Soothing Sapphire are created by mixing in white, resulting in softer, lighter variations.

#3A7FBF

#5691C8

#72A4D1

#8EB6DA

#ABC8E4

#C7DAED

#E3EDF6

#FFFFFF

#3A7FBF

#5691C8

#72A4D1

#8EB6DA

#ABC8E4

#C7DAED

#E3EDF6

#FFFFFF

Tones

Tones of Soothing Sapphire are created by adding gray, resulting in softer, more muted versions.

#3A7FBF

#447FB6

#4E7FAD

#587FA4

#62809B

#6C8092

#768089

#808080

#3A7FBF

#447FB6

#4E7FAD

#587FA4

#62809B

#6C8092

#768089

#808080

Hues

Hues are variations of Soothing Sapphire that differ in intensity, creating distinct moods.

#3A7FBF

#593ABF

#BD3ABF

#BF3A5E

#BF7A3A

#A0BF3A

#3DBF3A

#3ABF9B

#3A7FBF

#593ABF

#BD3ABF

#BF3A5E

#BF7A3A

#A0BF3A

#3DBF3A

#3ABF9B

What Interfaces Use Colors Like Soothing Sapphire?

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