YourFriendPaul's RGB-HSL Conversion and Hue Table

Convert RGB to HSL, HSL to RGB, or make a color table containing a single hue that has varying saturation and light.

Dr. Jane Xenos wrote a small manual explaining some osteopathic techniques you can do at home.

Order Manual Therapy: A Self-help Guide to Osteopathic Treatment from Amazon.com.

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

Input HSL (0-ffffff, hex):
— computed RGB (hex, dec, frac):
unknown
— computed HSL (hex, dec, frac, deg):
unknown

RGB to HSL Converter

Input RGB (0-ffffff, hex):
— computed RGB (hex, dec, frac):
unknown
— computed HSL (hex, dec, frac, deg):
unknown

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.

RGB (0-ffffff, hex):
HSL (0-ffffff, hex):
Hue (0-ff, hex):
Sat min (0-ff, hex):
Sat max (0-ff, hex):
Light min (0-ff, hex):
Light max (0-ff, hex):
Light boxes (1-17):
HSL Light compression (0 default):

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.

for 0 <= x <= .5 use: i*sin(x*Π)/2+(1-i)*x
for .5 <= x <= 1 use: i/2+i*(1-sin(x*Π))/2+(1-i)*x
Home Page for YourFriendPaul