Hero Image

The Hero image is the first image or banner that greets you when you visit a website landing page. The image is commonly placed at the front and center of the website landing page. It generally covers the complete width of a webpage and leaves only space for navigation bars and CTAs.

The Hero image can consist of an image with added text or can be dynamic ( carousel images, f.ex.)  or static. This is the image that every visitor sees before he starts scrolling down the landing page or visiting site menu links. It’s the business card of the website of your company.

The placement of Hero images gives you visual appeal, readability, interactivity, and storytelling advantages.

Every company only has a few seconds to leave a positive impression or spark the visitor's interest with a presumably short attention span; that’s why a hero image's resolution and overall aesthetic quality must be outstanding. A compelling Hero image lets people remain on your site and possibly turn them into future customers.


In color theory and graphic design, HSB stands for hue, saturation, and brightness. Sometimes, it is HSV (hue, saturation, and value) or HSL (hue, saturation, and lightness).


The hue is the main property of color, a number between 0 and 360. Hue is the color it most resembles on the color wheel, from 0° to 360°. As an agreement, the hue for red is set to 0° for most color spaces with a hue. The hue is measured in degrees on the color wheel. In painting, the hue is the pure color pigment without added white or black pigment.



Saturation is the richness and intensity of a color. The saturation of a color can be measured with a number between 0 and 100.

100% is the richest, most saturated version of a color, 0% will be a light gray for light colors and a dark gray for dark colors.


The brightness of color can be measured with a number between 0 and 100.

0% brightness is defined as pure black, and 100% brightness is defined as pure white.

In graphic design programs, the HSB values are generally organized with three sliders:

In Linearity Curve (formerly Vectornator), you can access the HSB sliders in Curve by clicking directly on the Sliders Menu in the Color Widget.

Get started with Linearity today.

Get Started for free