One way to get harmonious colors on a website is to use only one hue. Color variations are made by changing only the saturation and value (or lightness) while leaving the hue constant.
The Hue Table makes a display that does just that. It has text with the RGB and HSL values for each color displayed, so it is easy to copy a color for use in a graphics program or on a web page. The text can be turned off to make color comparisons easier.
The HSL to RGB and the RGB to HSL converters are handy when only one type of value is available and the other type is needed. Sometimes rounding errors can occur so the results are calculated and displayed in both directions. In other words, when using an RGB input the results displayed with show RGB to HSL, followed by that HSL value converted back to RGB.
Hit Enter after any input to begin the conversion or table generation.
After the tools there is a brief description about the table's compression option.
The Tools
HSL to RGB Converter
RGB to HSL Converter
Hue Table
The table shows a variety of values for saturation and light for a fixed hue value. The text in the table cells is hex HSL over hex RGB.
Color values entered in the RGB, HSL or Hue boxes will generate a table of colors for the calculated hue.
The Sat and Light values change the limits that will be used to make the table. This is useful if, for example, you want to only look at very saturated colors, or only light values.
The compression option can put more of the color boxes either in the mid-range lightness values (higher compression) or at the ends of the light and dark values (lower compression). A value of 0 makes the light values equally spaced.
Any field that changes (hit return) will update the table. Illegal values are ignored and the table will not be changed.
The Calculations
Most of you don't care about this section at all. It's a little background for the how and why of a couple of the calculations and decisions.
Light Default Values
Why aren't the default values for light minimum and maximum set to 0 and FF? When a table row is displayed that includes L=0 or L=FF, those entire rows are either black or white, and that isn't very useful.
A better solution is to use a starting point of 1/2 of the increment. For 17 boxes (16 equal increments):
incr = 0x100/0x10 = 16
y = x * incr + incr / 2
so Y = 08, 18, 28, 38, ...
So the Light Min is set to L=8 and the Light Max is set to L=F8, hex of course.
Compressing the Light Curve
It can be difficult to see color differences at both ends of the L (Light, value) curve. Before I added the ability to change the Light and Saturation limits for the table, the solution was to allow the Light curve to be compressed.
Without compression the mapping of the interval steps in the table is 1:1, or:
y = x
The compression selector allows mapping the Light values in a non-linear way.
Instead of displaying in even increments, using compression will weigh them so shorter intervals can be used where they are needed to show more detail. The method being used is to combine a sine wave with the straight mapping. The mapping equation gives values from 0 to 1 for both input and output. However the sine wave needs to change direction at the 50% point, so it is easier to implement with two equations.
i*sin(x*Π)/2+(1-i)*x
for .5 <= x <= 1 use:
i/2+i*(1-sin(x*Π))/2+(1-i)*x