Windsurfer

Presenting Windsurfer (#A3BBE0), a cool, desaturated blue that stands apart. Its most striking quality is a subtle lavender undertone, which gives it a sophisticated, almost ethereal presence, distinct from more common sky or baby blues in a designer's palette.

What color is Windsurfer?

What is the meaning of Windsurfer?

How do I use Windsurfer (#A3BBE0) in UI design?

Using Windsurfer color codes

Windsurfer

#A3BBE0

Access our full UI & UX library today.

What color is Windsurfer?

What is the meaning of Windsurfer?

How do I use Windsurfer (#A3BBE0) in UI design?

Using Windsurfer color codes

Windsurfer Code Conversions

HEX

#A3BBE0

LAB

75, 0, -21

RGB

163, 187, 224

XYZ

46.3, 48.7, 77.5

HSL

216°, 50%, 76%

LCH

75, 21, 270°

HSB

216°, 27%, 88%

LUV

75, -14, -33

CMYK

27, 17, 0, 12

CMYK

27, 17, 0, 12

HWB

216°, 64%, 12%

Windsurfer Color Harmonies

Analogous

By selecting colors adjacent to Windsurfer on the color wheel, an analogous palette is formed, offering a pleasing and serene composition.

#A3DAE0

#A3BBE0

#AAA3E0

#A3DAE0

#A3BBE0

#AAA3E0

Complementary

Complementary colors sit opposite each other on the color wheel. Pairing one with Windsurfer results in a high-impact, vibrant duo with maximum contrast.

#A3BBE0

#E0C8A3

#A3BBE0

#E0C8A3

Split Complementary

A split complementary scheme pairs Windsurfer with the two colors adjacent to its direct complement, offering high contrast with more nuanced harmony.

#A3BBE0

#E0AAA3

#D9E0A3

#A3BBE0

#E0AAA3

#D9E0A3

Triadic

A triadic color scheme uses three hues equally spaced on the color wheel. With Windsurfer (#A3BBE0) as a base, this creates a vibrant, high-contrast palette.

#A3BBE0

#E0A3BB

#BBE0A3

#A3BBE0

#E0A3BB

#BBE0A3

Tetradic

A tetradic palette builds on Windsurfer with three additional hues, creating two pairs of complementary colors for a versatile and balanced visual effect.

#A3BBE0

#E0A3D9

#E0C8A3

#A3E0A9

#A3BBE0

#E0A3D9

#E0C8A3

#A3E0A9

Square

A square scheme selects four colors equidistant on the color wheel. This arrangement produces a vibrant, high-contrast palette that remains visually balanced.

#A3BBE0

#E0A3D9

#E0C8A3

#A3E0A9

#A3BBE0

#E0A3D9

#E0C8A3

#A3E0A9

Windsurfer Contrast Simulation

Text Color

#

Background Color

#

10.74

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

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Windsurfer Color Variations

Shades

Shades are darker versions of Windsurfer, made by adding black for more depth and weight.

#A3BBE0

#8CA0C0

#7486A0

#5D6B80

#465060

#2F3540

#171B20

#000000

#A3BBE0

#8CA0C0

#7486A0

#5D6B80

#465060

#2F3540

#171B20

#000000

Tints

Tints are lighter versions of Windsurfer, created by mixing in white for a softer appearance.

#A3BBE0

#B0C5E4

#BDCEE9

#CAD8ED

#D8E2F2

#E5ECF6

#F2F5FB

#FFFFFF

#A3BBE0

#B0C5E4

#BDCEE9

#CAD8ED

#D8E2F2

#E5ECF6

#F2F5FB

#FFFFFF

Tones

Tones are variations of Windsurfer created by adding gray, which softens its saturation.

#A3BBE0

#9EB3D2

#99AAC5

#94A2B7

#8F99A9

#8A919B

#85888E

#808080

#A3BBE0

#9EB3D2

#99AAC5

#94A2B7

#8F99A9

#8A919B

#85888E

#808080

Hues

Hues are variations of Windsurfer's base color, differing in their intensity or temperature.

#A3BBE0

#B9A3E0

#E0A3D9

#E0A3AC

#E0C8A3

#CAE0A3

#A3E0A9

#A3E0D7

#A3BBE0

#B9A3E0

#E0A3D9

#E0A3AC

#E0C8A3

#CAE0A3

#A3E0A9

#A3E0D7

What Interfaces Use Colors Like Windsurfer?

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