Dan Becker's Color Palettes

This page shows a number of different color palettes that are available in HTML and CSS (cascading style sheets). There are new expressive capabilities in CSS4 and CSS5.

Additionally there are new monitors that go beyond the older sRGB color space and are able to show many more colors in the new P3 and REC2020 color spaces.

I hope this page is useful to photographers, artists, and creative hobbyists.

HSL H=+30° S=100% L+50%

Variation of CSS HSL model with 30° H spread, S=100%, L=50%.

0 100 50
30 100 50
60 100 50
90 100 50
120 100 50
150 100 50
180 100 50
210 100 50
240 100 50
270 100 50
300 100 50
330 100 50

Icon Color Wheel Samples

Twelve color palette sampled from a photo of the Premier Icon Color Wheel. Color names are as given on the color wheel.

red 0 80 50
red-orange 10 80 50
orange 30 80 50
yellow-orange 40 80 50
yellow 50 90 50
yellow-green 80 50 50
green 130 45 35
blue-green 160 45 45
blue 205 45 45
blue-violet 240 25 40
violet 260 30 40
red-violet 305 30 40

HSL H=+15° S=100% L+50%

Further variation of CSS HSL model (hue, saturatiuon, lightness) with 15° H spread, S=100%, L=50%. Adding names to match spectral color terms.

red 0 100 50
15 100 50
red-yellow (orange) 30 100 50
45 100 50
yellow 60 100 50
75 100 50
yellow-green (lime) 90 100 50
105 100 50
green 120 100 50
135 100 50
green-cyan (spring green) 150 100 50
165 100 50
cyan 180 100 50
195 100 50
blue-cyan (azure) 210 100 50
225 100 50
blue 240 100 50
255 100 50
blue-magenta (violet) 270 100 50
285 100 50
magenta 300 100 50
315 100 50
red-magenta (pink rose) 330 100 50
345 100 50

Twelve Bit Palette

Twelve bit palette with luminance control as described in The 12-bit rainbow palette. "The resulting palette has evenly-spaced hues, only small variations in chroma, and smoothly increasing and decreasing luminance." The site uses 3 RGB hex digits and 4096 color resolution as defined in CSS 4. In this 3 digit notation #ed0 is #eedd00 and #a35 is #aa3355.

The first row is the 12-bit palette as expressed by 3 RGB hex digits. The second row is the 3 digit hex RGB converted to HSL by a color picker tool. The third through fifth rows are mono equivalents of the rainbow palette as defined by the article, the (R+G+B)/3, and,the (max(RGB)+min(RGB))/2 methods.

red #c66
orange #e94
yellow #ed0
yellow-green #9d5
green #4d8
cyan #2cb
blue-cyan #0bc
blue #09c
blue-violet #36b
purple #639
magenta #817
red-magenta #a35
red 0 50 60
orange 30 83 60
yellow 56 100 47
yellow-green 90 67 60
green 147 69 57
cyan 174 71 47
blue-cyan 185 100 40
blue 195 25 40
blue-violet 218 57 47
purple 270 50 40
magenta 309 78 30
red-magenta 334 54 43
red mono 52
orange mono 66
yellow mono 79
yellow-green mono 73
green mono 65
cyan mono 59
blue-cyan mono 52
blue mono 44
blue-violet mono 38
purple mono 31
magenta mono 25
red-magenta mono 26
red cc 66 66 = 53
orange ee 99 44 = 60
yellow ee dd 00 = 60
yellow-green 99 dd 55 = 60
green 44 dd 88 = 56
cyan 22 cc bb = 56
blue-cyan 00 bb cc = 51
blue 00 99 cc = 60
blue-violet 33 66 bb = 44
purple 66 33 99 = 26
magenta 88 11 77 = 36
red-magenta aa 33 55 = 40
red cc 66 = 60
orange ee 44 = 60
yellow ee 00 = 47
yellow-green dd 55 = 60
green 44 dd = 57
cyan 22 cc = 47
blue-cyan 00 cc = 40
blue 00 cc = 40
blue-violet 33 bb = 47
purple 33 99 = 40
magenta 88 11 = 30
red-magenta aa 33 = 43

HSL Color Table Examples

Recreation of CSS 4 HSL Example. Each table represents a 30° increment of the hue value. The X axis represents saturation and the Y axis represents lightness.

000° Reds
030° Red-Yellows (=Orange)
060° Yellows
090° Yellow-Greens
120° Greens
150° Green-Cyans
180° Cyans
210° Blue-Cyans
240° Blues
270° Blue-Magentas
300° Magentas
330° Red-Magentas

OKLCH sRGB (non-P3, non-REC2020)

OKLCH (OK Lightness, Chroma, Hue) is a new type of color model that is included in CSS4. Here is a very good OKLCH color picker and description. CSS 5 will provide color functions for specifying color spaces and resolving relative colors such as color-mix(in lch, plum 40%, pink) and background-color: color-mix(in srgb, #34c9eb 50%, white).

Varying the H in OKLCH HSL H=+30°, L=max% C=max and avoiding P3 and REC2020 color spaces.

00
red 30
red-yellow (orange) 60
yellow 90
yellow-green 120
green 150
180
cyan 210
blue 240
270
purple 300
magenta 330

OKLCH P3 (non-REC2020)

Varying the H in OKLCH HSL H=+30°, L=max% C=max and avoiding the REC2020 color space. There will be color fallbacks when the P3 color is not available in the display/browser.

00
red 30
red-yellow (orange) 60
yellow 90
yellow-green 120
green 150
180
cyan 210
blue 240
270
purple 300
magenta 330

OKLCH REC2020

Varying the H in OKLCH HSL H=+30°, L=max% C=max. There will be color fallbacks when the REC2020 color is not available in the display/browser.

00
red 30
red-yellow (orange) 60
yellow 90
yellow-green 120
green 150
180
cyan 210
blue 240
270
purple 300
magenta 330