Colour Inspector Notes

What does it do?

This utility allows you to examine all the 140 named web colours as well as 25 more colors prefixed by Elevate.

You can search for colours using several different methods to lookup a required colour.

It allows you to list similar named colours to the selected colour as well as listing 5 shades of lighter and darker colors for the selected color.

RGB Colors

Colors are usually defined in Windows according to the amount of Red, Green and Blue. These values can range from 0 to 255.

Instead of using decimal numbers, numbers for colors can also be expressed using hexadecimal numbers where the letters A-F are enlisted to represent the numbers 10-15. So the numbers #A0 = 160 (10 * 16 +0), #CA = 202 (12 * 16 + 10) and #FF = 255 (15 * 16 +15).

The A in ARGB represents the ALPHA CHANNEL. This is a number between 0-255 that represents opacity (or transparency). If the value is 255, the color is opaque and any object behind the color cannot be seen. At 0 opacity, then the object behind the color is completely visible and at 128 you will be able to see both the the foreground and background images.

  • ARGB – Decimal: An integer formed by calculating (A * 255 * 255 * 255) + (R * 255 * 255) + (G * 255) + B
  • RGB – Decimal: An integer formed by calculating (R * 255 * 255) + (G * 255) + B
  • ARGB – Hex: A integer that uses hexadecimal digits to represent the number. ##FF0080CA is equivalent to A=255, R=0, G=128 and B=202.
  • Minimum Color: Minimum value of R, G, B
  • Maximum Color: Maximum value of R, G, B
  • Diff: The difference between maximum color and minimum color

HSL Colors

HSL represents Hue, Saturation and Lightness.

Hue is a number between 240 and is represented by a circle of colors with Red being 0, Green 80 and Blue 160. Yellow being half way between Red and Green has a hue of 40. Sometimes 360 is maximum value of the hue, so Red, Green and Blue would be 0, 120 and 240 with Yellow being 60.

Saturation can be represented as a percentage value or a number between 0-240. The higher the value, the brighter the color. Red has a saturation value of 240 and crimson 200. A value of 0 will make any color grey.

Lightness is the amount of white or black that has been added to the color. Similarly to saturation, it can be represented as a percentage value or a number between 0-240. 50% or 120 is the “normal” value. Red has a lightness of 120. Pink is 210 and maroon 60.

Perceived Brightness

We perceive red more intensely than green and blue even less intensely than green. The Luminance (Y) and Perceived Brightness (Y*) are calculated to give an indication of how intensely we perceive a color.

Y is expressed here as value between 0 and 1 and Y* as a percentage. If Y* is less than 76% then the color of the text is displayed in white otherwise it is displayed as black.

Sorting

Clicking on a column header will cycle the sorting of rows as Unsorted, Ascending or Descending, as indicated by the triangular glyphs.

To sort on multiple columns, click on the primary sort column header then hold the shift key whilst clicking on the column header of the secondary sort columns.

Calculations

Colors are considered to be similar if the difference in hue <= 10, difference in saturation <= 40 and difference in lightness <= 30.

Colors are neutral if the difference between maximum RGB and minimum RGB is less than 40.

The Luminance (Y) and Perceived Brightness Y(*) are calculated by the following steps.

  • Convert the R, G and B values to a fraction between 0 and 1 by dividing each value by 255, resulting in the values of R0, G0 and B0.
  • if R0 <= 0.04045 then calculate R1 = R0 / 12.92. Do the same for G0 and B0.
  • if R0 > 0.04045 then calculate R1 = ((R0 + 0.055)/1.055) ^ 2.4. Do the same for G0 and B0.
  • Luminance (Y) = (R1 * 0.2126) + (G1 * 0.7152) + (B1 * 0.0722)
  • if Y <= 0.00856 then Perceived Brightness (Y*) = Y * 903.3
  • if Y > 0.00856 then Perceived Brightness (Y*) = Y ^ (1/3) * 116 – 16