CSS Color

Note: for demonstration purposes. Content and articulation comes later ~ 5th September 2001.

color cube full
color cube outset
1. rgba(255,255,255,0.0) ~ fuchsia composite on a white background
1. rgba(255,0,255,0.0) ~ fuchsia composite on a white background
color cube inset
1. rgba(0,0,0,0.0) ~ fuchsia composite on a black background
1. rgba(0,0,0,0.0) ~ fuchsia composite on a black background

HSL planes in sRGB color space

Aqua to Red sRGB color plane
rgb(0,255,255)
hsl(180,100%,50%)
rgb(63,255,255)
hsl(180,100%,62%)
rgb(127,255,255)
hsl(180,100%,75%)
rgb(191,255,255)
hsl(180,100%,87%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(0,191,191)
hsl(180,100%,37%)
rgb(63,191,191)
hsl(180,50%,50%)
rgb(127,191,191)
hsl(180,33%,62%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(255,191,191)
hsl(0,100%,87%)
rgb(0,127,127)
hsl(180,100%,25%)
rgb(63,127,127)
hsl(180,34%,37%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(191,127,127)
hsl(0,33%,62%)
rgb(255,127,127)
hsl(0,100%,75%)
rgb(0,63,63)
hsl(180,100%,12%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(127,63,63)
hsl(0,34%,37%)
rgb(191,63,63)
hsl(0,50%,50%)
rgb(255,63,63)
hsl(0,100%,62%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(63,0,0)
hsl(0,100%,12%)
rgb(127,0,0)
hsl(0,100%,25%)
rgb(191,0,0)
hsl(0,100%,37%)
rgb(255,0,0)
hsl(0,100%,50%)
Fuchsia to Lime sRGB color plane
rgb(255,0,255)
hsl(300,100%,50%)
rgb(255,63,255)
hsl(300,100%,62%)
rgb(255,127,255)
hsl(300,100%,75%)
rgb(255,191,255)
hsl(300,100%,87%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,0,191)
hsl(300,100%,37%)
rgb(191,63,191)
hsl(300,50%,50%)
rgb(191,127,191)
hsl(300,33%,62%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(191,255,191)
hsl(120,100%,87%)
rgb(127,0,127)
hsl(300,100%,25%)
rgb(127,63,127)
hsl(300,34%,37%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(127,191,127)
hsl(120,33%,62%)
rgb(127,255,127)
hsl(120,100%,75%)
rgb(63,0,63)
hsl(300,100%,12%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(63,127,63)
hsl(120,34%,37%)
rgb(63,191,63)
hsl(120,50%,50%)
rgb(63,255,63)
hsl(120,100%,62%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,63,0)
hsl(120,100%,12%)
rgb(0,127,0)
hsl(120,100%,25%)
rgb(0,191,0)
hsl(120,100%,37%)
rgb(0,255,0)
hsl(120,100%,50%)
Yellow to Blue sRGB color plane
rgb(255,255,0)
hsl(60,100%,50%)
rgb(255,255,63)
hsl(60,100%,62%)
rgb(255,255,127)
hsl(60,100%,75%)
rgb(255,255,191)
hsl(60,100%,87%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,0)
hsl(60,100%,37%)
rgb(191,191,63)
hsl(60,50%,50%)
rgb(191,191,127)
hsl(60,33%,62%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(191,191,255)
hsl(240,100%,87%)
rgb(127,127,0)
hsl(60,100%,25%)
rgb(127,127,63)
hsl(60,34%,37%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(127,127,191)
hsl(240,33%,62%)
rgb(127,127,255)
hsl(240,100%,75%)
rgb(63,63,0)
hsl(60,100%,12%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(63,63,127)
hsl(240,34%,37%)
rgb(63,63,191)
hsl(240,50%,50%)
rgb(63,63,255)
hsl(240,100%,62%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,0,63)
hsl(240,100%,12%)
rgb(0,0,127)
hsl(240,100%,25%)
rgb(0,0,191)
hsl(240,100%,37%)
rgb(0,0,255)
hsl(240,100%,50%)
Spring Green to Deep Pinkish sRGB color plane 3
rgb(0,255,127)
hsl(150,100%,50%)
rgb(127,255,255)
hsl(150,100%,75%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(63,191,127)
hsl(150,50%,50%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(0,127,63)
hsl(150,100%,25%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(255,127,191)
hsl(330,100%,75%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(191,63,127)
hsl(330,50%,50%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(127,0,63)
hsl(330,100%,25%)
rgb(255,0,127)
hsl(330,100%,50%)
Chartreuse to Violet/Indigo sRGB color plane 2
rgb(127,255,0)
hsl(90,100%,50%)
rgb(191,255,127)
hsl(90,100%,75%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(127,191,63)
hsl(90,50%,50%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(63,127,0)
hsl(90,100%,25%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(191,127,255)
hsl(270,100%,75%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(127,63,191)
hsl(270,50%,50%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(63,0,127)
hsl(270,100%,25%)
rgb(127,0,255)
hsl(270,100%,50%)
Dark Orange to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,191,127)
hsl(30,100%,75%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,127,63)
hsl(30,50%,50%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,63,0)
hsl(30,100%,25%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(127,191,255)
hsl(210,100%,75%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(63,127,191)
hsl(210,50%,50%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,63,127)
hsl(210,100%,25%)
rgb(0,127,255)
hsl(210,100%,50%)
Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
2 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
3 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
4 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
5 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
6 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)
two 1 Spring Green/Aquamarine to DodgerBlue sRGB color plane
rgb(255,127,0)
hsl(30,100%,50%)
rgb(255,255,255)
hsl(0,0%,100%)
rgb(255,127,0)
hsl(30,100%,50%)
rgb(191,191,191)
hsl(0,0%,75%)
rgb(127,127,127)
hsl(0,0%,50%)
rgb(63,63,63)
hsl(0,0%,25%)
rgb(63,127,191)
hsl(210,50%,50%)
rgb(0,0,0)
hsl(0,0%,0%)
rgb(0,127,255)
hsl(210,100%,50%)

Gradients

  1. white to transparent-black composite of a white background
  2. white to transparent-black composite on a black background
  3. black to transparent-white composite of a white background
  4. black to transparent-white composite of a black background
1. white to transparent-black composite of a white background
pathnon-premultipliedcomposite on white
0%0rgba(255,255,255,1.0)rgb(255,255,255)
6.25%16rgba(239,239,239,0.9375)rgb(240,240,240)
12.5%32rgba(223,223,223,0.875)rgb(227,227,227)
25%64rgba(191,191,191,0.75)rgb(207,207,207)
50%127rgba(127,127,127,0.5)rgb(191,191,191)
75%191rgba(64,64,64,0.25)rgb(207,207,207)
87.5%223rgba(32,32,32,0.125)rgb(227,227,227)
93.75%239rgba(16,16,16,0.0625)rgb(240,240,240)
100%255rgba(0,0,0,0.0)rgb(255,255,255)
2. white to transparent-black composite on a black background
pathnon-premultipliedcomposite on black
0%0rgba(255,255,255,1.0)rgb(255,255,255)
6.25%16rgba(239,239,239,0.9375)rgb(224,224,224)
12.5%32rgba(223,223,223,0.875)rgb(195,195,195)
25%64rgba(191,191,191,0.75)rgb(143,143,143)
50%127rgba(127,127,127,0.5)rgb(64,64,64)
75%191rgba(64,64,64,0.25)rgb(16,16,16)
87.5%223rgba(32,32,32,0.125)rgb(4,4,4)
93.75%239rgba(16,16,16,0.0625)rgb(1,1,1)
100%255rgba(0,0,0,0.0)rgb(0,0,0)
3. black to transparent-white composite of a white background
pathnon-premultipliedcomposite on white
0%0rgba(0,0,0,1.0)rgb(0,0,0)
6.25%16rgba(29,29,29,0.9375)rgb(31,31,31)
12.5%32rgba(52,52,52,0.875)rgb(60,60,60)
25%64rgba(84,84,84,0.75)rgb(112,112,112)
50%127rgba(127,127,127,0.5)rgb(191,191,191)
75%191rgba(191,191,191,0.25)rgb(239,239,239)
87.5%223rgba(223,223,223,0.125)rgb(251,251,251)
93.75%239rgba(239,239,239,0.0625)rgb(254,254,254)
100%255rgba(255,255,255,0.0)rgb(255,255,255)
4. black to transparent-white composite of a black background
pathnon-premultipliedcomposite on black
0%0rgba(0,0,0,1.0)rgb(0,0,0)
6.25%16rgba(16,16,16,0.9375)rgb(15,15,15)
12.5%32rgba(32,32,32,0.875)rgb(28,28,28)
25%64rgba(64,64,64,0.75)rgb(48,48,48)
50%127rgba(127,127,127,0.5)rgb(64,64,64)
75%191rgba(191,191,191,0.25)rgb(48,48,48)
87.5%223rgba(223,223,223,0.125)rgb(28,28,28)
93.75%239rgba(239,239,239,0.0625)rgb(15,15,15)
100%255rgba(255,255,255,0.0)rgb(0,0,0)