Color Shades and Tints Finder

Hue

Color Combinations

Adjust Color

Lightness

Saturation

Temperature

Lower

Higher

Lower

Higher

Cooler

Warmer

Reset
Adjust

Color Tints

#

#

#

#

#

#

#

#

#

#

Color Shades

#

#

#

#

#

#

#

#

#

#

Color Composition

System

Original Units

Percents

RGB

HSL

HSV

CMYK

ArtyClick "Color Shades and Tints Finder"

Getting Started with a Color

To select a color:

  • Enter a HEX code in the color bar (e.g. #FF0000 or #FF0), or

  • Enter an RGB code in the color bar (e.g. RGB(255,0,0)), or

  • Use the color picker by clicking on the color wheel to select a color

Color Overview

Main fields describing the selected color:


Control Panel for Fine-Tuning a Color

Color characteristics used to slightly adjust a color:

  • Lightness: low (adding black) and high (adding white)

  • Saturation: low (adding grey) and high (reducing grey)

  • Temperature: cool (adding blue) and warm (adding yellow or red)


Finding Color Tints (High Lightness)

A color tint is achieved by mixing a color with white, which reduces the color darkness. While it increases the color luminance, it also decreases its saturation.

color tints example by ArtyClick

Tip: for warm colors, to increase a color's luminance without compromising on the color saturation, try to add yellow (#FFFF00) instead (shifting color temperature towards yellow).


Finding Color Shades (Low Lightness)

A color shade is achieved by mixing a color with black, which increases the color darkness. While it decreases the color luminance, it also decreases its saturation.

color shades example by ArtyClick

Tip: for cool colors, to decrease a color's luminance without compromising on the color saturation, try to add blue (#0000FF) instead (shifting color temperature towards blue).


Finding Color Tones (Saturation)

The color tone is produced by mixing a color with grey. Since grey is a combination of white and black, it is equivalent to applying both tinting and shading simultaneously.

color tones example by ArtyClick

Tip: color tones serve best as background colors as they are neutral and don't distract from the main elements, which are usually in brighter, more saturated colors.


Adjusting Color Temperature

Colors are split into 2 groups by their temperature: warm and cool. Warm colors include yellow, orange and red. Blue is a cool color. The definition of color temperature is not finite and rather relative. For instance, every color can have a warm and a cool version. Yellow with a hint of orange in it (e.g. golden yellow) is considered a warm yellow, while yellow with a hint of blue in it (greenish yellow) is cool. A similar concept applies to purple: a blueish purple is cooler than a reddish purple.

color temperature example by ArtyClick

Color temperature is directly linked to color psychology. Traditionally, warm colors are associated with emotional warmth and compassion, while cool colors are linked to logic and seriousness. For instance, many food industry logos are in warm colors, such as yellow, orange and red, as they appeal to our emotions (including hunger). Business logos, on the other hand, are often in cool colors, including any variations of blue, as they convey an impression of seriousness and rationalism.


Color Composition

  • RGB: an additive color model in which Red, Green, and Blue lights are added together to reproduce colors

  • HSL: an alternative cylindrical-coordinate representation of the RGB color model using Hue, Saturation and Lightness

  • HSV: an alternative cylindrical-coordinate representation of the RGB color model using Hue, Saturation and Value

  • CMYK: a subtractive color model used in color printing (Cyan, Magenta, Yellow and Key - black)


Color Combinations

There are rules defined in the color theory describing the process of obtaining colors to create color combinations or schemes. Most of them involve the employment of the color wheel to find analogous (similar), complementary (contrasting) or monochromatic (same hue but different lightness or saturation) colors. Although these guidelines represent a good starting point, there are further aspects often considered to create harmonious color schemes, such as color temperature and luminance (absolute lightness of a color).

color wheel and color combinations

Color combinations presented above have been preselected on the basis of several rules and they can be used for getting started with a color scheme or adding colors to an existing color palette.