About: I’m a ColdFusion/CFML web application developer at SunStar Media located in Monterey, CA. I am a fan of technology, music and web development.
Location:
Monterey, CA
Joined:
Aug 18, 2017
ColdFusion colorTools CFC (In Progress)
Publish Date: Feb 27
0 0
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:
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.):
Returns a random WCAG HEX color with minimum contrast and maximum luminance filters with option to make unique and ensure that next color isn't too similiar to previously generated color.
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>');
}
