Playing around with colors in VBA

There are a few items on this site that cover color ramps and other color manipulation topics. I've built up a few snippets on color management in VBA so I thought I should centralize them for easy reference.  There is a Google Apps Script of most of this stuff on this site also. See Playing around with GAS color

Getting started with color

Let's start with a few of the color concepts that we'll use in the functions I'm going to show you. All the functions mentioned can be found in the usefulColorStuff module of the cDataSet.xlsm workbook.

RGB

The RGB color model is covered here and is the simplest representation of color model, whose main usage is for the specification of color on electronic devices such as computer screens. The combination of values ranging from 0-255 for each of the colors red, green and blue (hence RGB) leads to a particular color. In VBA these can be combined with the RGB(r,g,b) function to produce a single number which can be applied, for example as the background color of a cell. That gives a possible range of 0-16777215 different colors, where rgb(255,255,255) = 16777215 - the color white, and rgb(0,0,0) gives 0 - the color black.

For web design, these color codes are normally represented as hexadecimal, from #0 to #ffffff, made up of the hex values for #red.green.blue. One thing to watch out for is that the order of bytes is reversed from the natural VBA order. 

For example hex(rgb(255,0,0)) is #ff but the hexHtml representation for rgb(255,0,0) is #ff0000. The byte order is imply reversed. Here are some functions to convert back and forwards to RGB


Extract the individual color codes from


Convert to and from htmlHex

Luminance

Luma is a measure of light in a color that can be used to determine whether there is a good contrast between two colors. I use it to pick the color of text I should use given a background color. 

Calculate luminance


Contrast ratio

This is the ratio of contrast between 2 colors. The w3 organization has recommendations on suitable contrast ratios that improve legibility.

Calculate contrast ratio


10:1 is recommended for text/background combinations. Here's a small clip of some pantone colors as a background showing the contrast ratio of various white and black text (its the last column) . 


You can see it gets harder to read the low contrast ratios.


CYMK
Cyan, Yellow, Magenta, Black (the k of cymk), is another color representation model that is used in printing systems. If you look at the ink colors in your printer you'll see that typically they are these colors.  Whereas RGB was an additive system (red, green, blue adding together to eventually make white at maximum values), cymk is a subtractive system (maximum values are black). When you consider that CYMK is about printing, and a blank sheet of paper is white this makes sense. 

This is a very different color model to RGB and there is not a direct mapping, but here's an approximation of how to convert between the two

    p.black = min(1 - p.red / 255, 1 - p.green / 255, 1 - p.blue / 255)
    If p.black < 1 Then
        p.cyan = (1 - p.red / 255 - p.black) / (1 - p.black)
        p.magenta = (1 - p.green / 255 - p.black) / (1 - p.black)
        p.yellow = (1 - p.blue / 255 - p.black) / (1 - p.black)
    End If

HSL

This is a model based on Hue, saturation and lightness. Hue is 0- 360, and saturation and lightness is a percentage. Acknowledgement to http://www.easyrgb.com/ for the algorithm.

Calculate HSL

Text color

Although you can figure out contrasting colors by manipulating the r,g and b values, I think it's better to use just black and white, and deciding on which by the value of the luminance - high luminance, use black, low, use white. 

Colorprops custom type.


Since all these can be useful and are straightforward to calculated, I use a custom type to store them all in. That way I can other color spaces as I need to without disturbing much. So far the type looks like this

Public Type colorProps
    ' this is a single type to hold everything i know how to calculate about a color
    rgb As Long
    red As Long
    green As Long
    blue As Long
    htmlHex As String
    textColor As Long
    luminance As Double
    contrastRatio As Double
    cyan As Double
    magenta As Double
    yellow As Double
    black As Double
    hue As Double
    saturation As Double
    lightness As Double
End Type



Populating the colorProps type


The color table

In the cDataSet.xlsm workbook (colorTable tab), there is a large table of colors. These are Pantone colors, html colors, dulux paint colors and various others. I'll be adding to them over time, but also creating a REST queryable source that will allow you look up colors by type and name. Here's the headings and the beginning of that table



The 4th column onwards were all calculated using the formulas described above. To understand the code below you'll probably need to be familiar with Data Manipulation Classes, which are used for excel data abstraction. Pretty straightforward usage for the purposes of this.


Updating the color map


For help and more information join our forum,follow the blog or follow me on twitter .



Comments