Bluebonnet

Bluebonnet (#341CFF) is a blue with serious punch. What makes this hue so arresting is its high saturation and pure, almost luminous quality. It’s a color that feels born from the screen, offering designers a shade of blue with distinct clarity and energy.

What color is Bluebonnet?

What is the meaning of Bluebonnet?

How do I use Bluebonnet (#341CFF) in UI design?

Using Bluebonnet color codes

Bluebonnet

#341CFF

Access our full UI & UX library today.

What color is Bluebonnet?

What is the meaning of Bluebonnet?

How do I use Bluebonnet (#341CFF) in UI design?

Using Bluebonnet color codes

Bluebonnet Code Conversions

HEX

#341CFF

LAB

36, 75, -102

RGB

52, 28, 255

XYZ

19.9, 8.8, 95.2

HSL

246°, 100%, 55%

LCH

36, 127, 306°

HSB

246°, 89%, 100%

LUV

36, -7, -133

CMYK

80, 89, 0, 0

CMYK

80, 89, 0, 0

HWB

246°, 11%, 0%

Bluebonnet Color Harmonies

Analogous

Built from colors adjacent on the color wheel, Bluebonnet's analogous palette offers a balanced and tranquil visual experience perfect for unified designs.

#1C76FF

#341CFF

#A51CFF

#1C76FF

#341CFF

#A51CFF

Complementary

Complementary colors sit directly opposite each other on the color wheel. Pairing Bluebonnet with its complement creates a high-contrast, visually striking combination.

#341CFF

#E7FF1C

#341CFF

#E7FF1C

Split Complementary

Split complementary schemes for Bluebonnet (#341CFF) use the two colors adjacent to its direct complement, offering a vibrant yet balanced high-contrast palette.

#341CFF

#FFA51C

#76FF1C

#341CFF

#FFA51C

#76FF1C

Triadic

Triadic palettes are built from three colors situated at equal distances on the color wheel, producing a vibrant and balanced combination with strong contrast.

#341CFF

#FF341C

#1CFF34

#341CFF

#FF341C

#1CFF34

Tetradic

A tetradic scheme uses four colors that form a rectangle on the color wheel, giving Bluebonnet two pairs of complementary, dynamic partners.

#341CFF

#FF1C76

#E7FF1C

#1CFFA5

#341CFF

#FF1C76

#E7FF1C

#1CFFA5

Square

Square color schemes pair four colors evenly spaced on the color wheel. Starting with Bluebonnet, this method yields a palette with strong, balanced contrast.

#341CFF

#FF1C76

#E7FF1C

#1CFFA5

#341CFF

#FF1C76

#E7FF1C

#1CFFA5

Bluebonnet Contrast Simulation

Text Color

#

Background Color

#

7.62

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.

7.62

Excellent

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Bluebonnet Color Variations

Shades

Shades are darker versions of Bluebonnet, created by adding black for more depth and weight.

#341CFF

#2D18DB

#2514B6

#1E1092

#160C6D

#0F0849

#070424

#000000

#341CFF

#2D18DB

#2514B6

#1E1092

#160C6D

#0F0849

#070424

#000000

Tints

Tints are lighter versions of Bluebonnet, achieved by adding white to soften the hue.

#341CFF

#513CFF

#6E5DFF

#8B7DFF

#A89EFF

#C5BEFF

#E2DFFF

#FFFFFF

#341CFF

#513CFF

#6E5DFF

#8B7DFF

#A89EFF

#C5BEFF

#E2DFFF

#FFFFFF

Tones

Tones are muted versions of Bluebonnet, created by adding gray to soften the color’s saturation.

#341CFF

#3F2AED

#4A39DB

#5547C9

#5F55B6

#6A63A4

#757292

#808080

#341CFF

#3F2AED

#4A39DB

#5547C9

#5F55B6

#6A63A4

#757292

#808080

Hues

Hues are variations of Bluebonnet (#341CFF) that differ in intensity, creating distinct visual effects.

#341CFF

#DE1CFF

#FF1C76

#FF6D1C

#E7FF1C

#3DFF1C

#1CFFA5

#1CAEFF

#341CFF

#DE1CFF

#FF1C76

#FF6D1C

#E7FF1C

#3DFF1C

#1CFFA5

#1CAEFF

What Interfaces Use Colors Like Bluebonnet?

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