While working on some internal graphs to represent daily Fastly WAF/CDN statistics, I realized that I needed to generate some additional random colors. I started to use the returnRandomHEXColors UDF from CFLib. Out of the first 10 colors that were generated, the first 5 looked very similar and one of them was white and didn't contrast very well on a white background.

My initial thought was to create a single UDF, but it wasn't that simple as the function required additional support for max luminance & min contrast. I didn't want to have to remember to keep 3 UDFs together in order for them to retain functionality. I also was already performing HEX-to-RGB conversion when using HEX colors with the Chart.js javascript library, so it seemed natural to include these related functions to the CFC so I wouldn't have to "repeat myself".

makeWCAGChartColor

My approach, which could very well be overkill, was to:

• compare against an array of existing colors (to prevent duplication)
• identify last color used and ensure the new color meets a WCAG minimum contrast requirement (contrast min: 4.5)
• calculate luminance to ensure the result is not too bright (luminance max: 0.7)
• provide a fallback in case a color can't be determined after 100 attempts
• return color value as uppercase HEX
  • Better readability and scannability
  • Wider adoption in professional style guides and tools
  • Consistency with historical and team-based workflows
  • It didn't need to look "modern", just be consistent

Here's what default usage source currently looks like:

colorTools = new colorTools();

for (i = 1; i lte 25; i += 1) {
    color = colorTools.makeWCAGChartColor();
    writeoutput('<div style="display:inline-block; width:100px; height:50px; background-color:##' & color & '; border:1px solid ##000; margin:5px; text-align:center; line-height:50px; font-family:Arial, sans-serif; font-size:14px; color:##fff; text-shadow:0 0 2px ##000;">' & color & '</div>');
}

... and here's the result:

I've added some other public helper functions too, like:

• calculateContrast
• calculateLuminance
• hexToRGB
• rgbToHex

I included the ColorBrewer palette and all named W3C X11 colors and these values can be retrieved via the getVariable() method:

• colorTools.getVariable("colorBrewerPalette") // returns a struct of named palettes with array of colors
• colorTools.getVariable("w3cx11") // returns a struct of named colors

More updates and functionality will follow soon. Now that I have my extra colors, I need to get back to integrating the interactive Chart.js graphs.

Feel free to contact me if there's a nagging color issue that has always bugged you or if you have any ideas for future features. (I'm going to personally review the projects that we've developed during the last 25 years to identify other color-related features that would be useful.)

Here's the Github repository (I'm not using a gist for this one.):

colorTools = new colorTools()

for (i = 1; i lte 25; i += 1) {
    color = colorTools.makeWCAGChartColor();
    writeoutput('<div style="display:inline-block; width:100px; height:50px; background-color:##' & color & '; border:1px solid ##000; margin:5px; text-align:center; line-height:50px; font-family:Arial, sans-serif; font-size:14px; color:##fff; text-shadow:0 0 2px ##000;">' & color & '</div>');
}