From light, pale Sky Blue to the depths of Deep Blue, this color remains popular in art and design – and websites are no exception. Blue website design is everywhere – from Finance to Travel to Healthcare and every industry in between.

The Color Blue

“Blue has no dimensions; it is beyond dimensions, whereas the other colors are not… All colors arouse specific associative ideas… while blue suggests at most the sea and sky, and they, after all, are in actual, visible nature what is most abstract.” – Yves Klein

“Almost without exception, blue refers to the domain of abstraction and immateriality.”- Wassily Kandinsky

“Blue is the only color which maintains its own character in all its tones… it will always stay blue; whereas yellow is blackened in its shades, and fades away when lightened; red when darkened becomes brown, and diluted with white is no longer red, but another color – pink.” – Raoul Dufy

“The color blue – that is my color – and the color blue means you have left the drabness of day-to-day reality to be transported into – not a world of fantasy, it’s not a world of fantasy – but a world of freedom where you can say what you like and what you don’t like. This has been expressed forever by the color blue, which is really sky blue.” – Louise Bourgeois

(Want more? Check out Art Quotes.)

Blue Moods

How many moods does blue have? As many moods and expressions as people have. It seems there may be a shade of blue for everyone, from intense to serene.

When it comes to websites, you’ll find blue everywhere in design. Shades of blue go on for days, so we’ll focus on five groups:

  • Intense Blue
  • True Blue
  • Deep Blue
  • Sea Blue
  • Sky Blue

Intense Blue Website Design

“The world is blue.” – Yves Klein

Yves Klein was an influential French artist whose “chromatic devotion was so profound that in 1960 he patented a colour of his own invention, which he called International Klein Blue.” (Yves Klein: The man who invented a colour from BBC)

Klein Blue The Blue Epoch
Yves Klein, IKB 191, 1962

International Klein Blue, or IKB, is similar to ultramarine; it is bright, expansive, and deeply affecting. This blue is an experience.

IKB is brilliant and deep. Almost otherworldly, this color is capable of transporting viewers to another realm. Mesmerizing in its intensity, it simultaneously arouses and calms emotions.

Words to describe this Intense Blue shade include:

  • Spiritual
  • Abstract
  • Stirring

Use Intense Blue to capture attention, instead of more visually fatiguing colors like red, orange, or yellow. Don’t be fooled into thinking this blue is basic; instead, this bright, luminescent shade affects people in a profound way.

Use Intense Blue to make your visitors feel:

  • Uplifted
  • Inspired
  • Awakened

Intense Blue Website Design: Loopring

Meet Loopring, “…a unique project in the world of decentralized exchange.” (For more, visit Loopring’s Reddit page.) Loopring concerns itself with digital crytocurrency trading.

Its website design utilizes bright blue and white exclusively to create a clean, modern, minimalist vibe – one that probably appeals to its youthful, tech-savvy target audience.
Looping blue web design
Loopring

The color blue is used in this web design to evoke feelings of stability and constancy, common themes in websites centered on finance or financial services.

Intense Blue Website Design: Udeany

Udeany (pronounced “u-dean-e” according to the website’s About page) is a service to help students get out of debt. Udeany’s website design works with the three primary colors – blue, red, and yellow – to create a vibrant yet simple environment for its users. We see black and white throughout the design, too, as balance to and relief from all the bright colors.

Blue web design for udeany

This website design is similar to Loopring’s in that it is modern and simple and employs lots of white and blue. Udeany, however, uses hot colors in addition to cool blue and brings in black for weight and leverage.

The overall mood created with Udeany’s design is energetic yet stable; modern and youthful, but also serious and focused.

True Blue Website Design

This standard blue color can also be described as “true” blue. An example from Helen Frankenthaler titled Provincetown is an example (notice the primary colors – blue, red, and yellow).

Provincetown by Helen Frankenthaler, 1964

True Blue is a stable, dependable shade of blue. True Blue is used to evoke feelings of assurance in website visitors – to make them feel at ease and comfortable with your brand.

True Blue can be described as:

  • Accurate
  • Authentic
  • Appropriate

Use True Blue to relieve doubt and create a sense of security in your web visitors. This color helps visitors feel that your website is safe and your services are credible.

Use True Blue to make your visitors feel:

  • Calm
  • Stable
  • Secure

True Blue Website Design: Vexor

Vexor is a tool development teams use to continuously integrate their work. Its  website uses a calm, strong blue as a solid background and clean white typography – two elements that allow the animated, striped graphic to take center stage.

vexor blue web design

Vexor’s web design avoids plainness with most subtle of details: the blue that is just barely purple like a twilight sky, minty green stripes that undulate, and a quirky font that somehow ties it all together.

The feeling a visitor gets from this blue website design is like a very calm circus: things are moving and playful, but under control.

Web developers are technical and precise, yet possess an unconventional view of the world. This website design taps that peculiar, genius energy with more than a little help from the color blue.

Intense, True Blue Website Design: Block Collider

Similar in design to both Loopring and Udeany, Block Collider also uses a blue and white color theme and custom illustrations to create an aura that is both lively and sedate. Its homepage is painted first in ultramarine and gradates into deep, dark blue territory.

Block Collinder blue web design.

B;ocl Collinder web design

Block Collinder’s web design experience feels calm yet engaged, as though things are moving quietly behind the scenes. Yellow and orange add points of color  to further enliven the mood, almost like candles in a cave.

The Deep Blue

“Vermeer’s blues are silent, but they touch your soul.” – Jonathan Jones

The Great Wave off Kanagawa, a woodblock print by the Japanese ukiyo-e artist Hokusai, creates a feeling of awe in viewers. This highly popular work showcases Deep Blue waves hugged with teal and topped with frothy white.

The Great Wave Off Kanagawa by Katsushika Hokusai, 19th century color woodcut
The Great Wave Off Kanagawa by Katsushika Hokusai, 19th century color woodcut

Deep Blue shades include Indigo or Prussian Blue, and provide a sense of mystery, awe, and power. When used in website design, Deep Blue is serious with a touch intrigue.

In Rooms by the Sea, Edward Hopper depicts the sky  “Described as the view he would have seen out the back door of his studio, it was a literal representation of silence and solitude.”

A door opens to the blue sky and blue ocean
Rooms by the Sea by Edward Hopper, 1951

Other words that describe Deep Blue:

  • Somber
  • Impressive
  • Compelling

In your website design, use Deep Blue to create feelings of:

  • Intimacy
  • Intrigue
  • Seriousness

Deep Blue Website Design: Digital Asset

Dark, deep blue – sometimes called Indigo or Prussian blue – helps create a professional, steady feeling on Digital Asset’s website. This is an excellent choice for the target audience: financial institutions that need to share data securely.

Digital Asset blue web design

Digital Asset blue website design

The website design uses beautiful authentic photography to elevate the level of trustworthiness. Notice how the colors in the photograph above are similar to the peach and ivory colors used by Hokusai in The Great Wave referenced above. (The bright blue lines striped along the dark blue server in the website graphics also remind me of the two blues in Hokusai’s wave – anyone else?)

Sea Blue

“Blue is the colour to choose when creativity is a priority. People are less literal and more exploratory with blue… Blue is open, free, and peaceful.” – Dr. Juliet Zhu

Blue with a touch of green is sometimes called Sea Blue. This shade is blue with yellow added to it to create a range of colors from teal to turquoise. A beautiful example can be found in Almond Blossom by Vincent Van Gogh.

Almond Blossom by Vincent Van Gogh

This blue shade is described as:

  • Tranquil
  • Freeing
  • Boundless

Use this shade of blue to create these feelings in your website visitors:

  • Peaceful
  • Adventurous
  • Unplugged

Swim in Sea Blue with Habitas

The very blue website design for Habitas showcases stunning photography in deep teal and aqua. The experience on this website is luxurious, indulgent, and carefree – perfect for a travel or destination website like Habitas.

Habitas homepage video blueHabitas wblue web design.

Thanks to its green shade, Sea Blue is earthier than more traditional blues. This color pairs delightfully with gray, ivory or sand, and brown.

Sky Blue

“How sweet to be a Cloud. Floating in the Blue!” – A. A. Milne

Sky Blue is both bright and light, a color that produces joy and delight. In Untitled (Basquiat Skull), Jean-Michel Basquiat uses this color as a backdrop to the hodgepodge face he colors with brown, black, yellow, and white. Using a carefree color like Sky Blue allows Basquiat’s creation to almost float in space. Additionally, it’s an excellent contrast to the deeper colors that represent darker, heavier themes.

skull painting by basquiat
Untitled (Basquiat Skull) by Jean-Michel Basquiat, 1981

When describing Sky Blue, you might use:

  • Airy
  • Cheerful
  • Weightless

This is a great choice to use in your website design to produce feelings of:

  • Optimism
  • Excitement
  • Freedom

Sky Blue Website Design for Bold Earth

Bold Earth is a website for teenagers and their parents. It offers travel experiences that may include education or service. This web design uses Sky Blue to construct a high-energy design that takes you from the tops of a mountain to the depths of the ocean.

Bold Earth website design uses blue in its design.

Bold Earth blue web design

The feeling a visitor receives from Bold Earth’s website is one of fun and excitement. Gorgeous photography and professional content add a sense of quality and significance, giving users the impression that this is a serious website.

Blue Resources

10 Artists and Their Blue Periods – Schirne

A Brief History of Blue – Artsy

Blue – the color of constancy – Pantone

Helen Frankenthaler – WikiArt

#TheLIST: The 10 Female Artists You Need to Know – Bazaar

Eight blue moments in art history – Tate

Edward Hopper – edward-hopper.org

Say Hello!

Give Artonic a call or e-mail us if you’re interested in website design, development, or marketing.

517-902-7851

info@artonicweb.com

Michigan, USA

Subscribe to Artonic's Blog Stay on top of the topics that are important to your business!

Email Address