JAVASCRIPT EXAMPLES Sortable Color Table
The table shown below represents the named colors that form part of CSS Color Module Level 3, derived from the SVG 1.0 specification. Each color is depicted in a row, with a 1) color swatch, 2) its standardized name, 3) its hue, saturation, and lightness (according to the HSL color space), 4) its representation as an HSL-formatted CSS style property value, 5) its red, green, and blue channel levels (according to the sRGB color space), and 6) its hex formatted RGB value.
What makes the table most compelling is that it is sortable by any one of the colors' properties, so you can get a sense of how properties such as hue, saturation, lightness, red level, etc. relate to different colors by sorting on those properties - in either ascending or descending order. Indicators alongside the column values also provide cues for visual reference. Click on one of the column headings to see. The indicator for hue values is a color of that hue, with saturation at max value, and lightness at center value. The indicators for saturation and lightness are a grayscale, where black represents min value and white represents max value. Indicators for red, green, and blue are various shades of pure red, green, and blue, respectively. The table is generated with the help of the Uize.Color module and the named colors defined in the Uize.Color.xSvgColors extension. The table is made sortable with the help of the Uize.Widget.TableSort module.