MozillaZine

SVG filters, the final frontier in theming.

Discuss application theming and theme development.
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 24th, 2014, 12:39 pm

Not sure where-else to stuff this for now, but here is an HTML chart of all of the CSS3 color names in relation to each other. For some reason this doesn't seem to exist anywhere online. Instead the colors are uselessly listed in alphabetical order! I've organized them into Hue rows and columns based on Lightness. Main rows are colors with 100% Saturation, lower Saturation colors are shown underneath. Non-named colors are generated using the Hue and Lightness of each row and column. This is not an *exact* chart, and you will notice that many named colors do not follow the pattern exactly. Instead this is meant to be a relational reference. This will be included as a reference page in a future version of SVG Colors theme.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- ******** Patrick J. Dempsey 2014 ******** -->
<html>   
  <head>
      <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
      <title>CSS3 Color Names</title>
  </head>

  <body style="background-color:hsl(0,0%,10%);font-family:sans-serif;font-size:x-small">
          <br><br>
          <center>
         
        <div class="">
           <table class="table">
                <tr style="color:white">
                  <td ></td>
                  <td >20%</td>
                  <td >25%</td>
                  <td >27%</td>
                  <td >34%</td>
                  <td >41%</td>
                  <td style="font-weight:bold">50%</td>
                  <td >58%</td>
                  <td >66%</td>
                  <td >75%</td>
                  <td >83%</td>
                  <td >88%</td>
                  <td >94%</td>
                  <td >97%</td>
                </tr>             
                <tr>
                  <td style="background-color:hsl(0,0%,0%);color:white;font-weight:bold">Black</td>
                  <td style="background-color:hsl(0,0%,20%);color:white"></td>
                  <td style="background-color:hsl(0,0%,25%);color:white"></td>
                  <td style="background-color:hsl(0,0%,27%);color:white"></td>
                  <td style="background-color:hsl(0,0%,34%);color:white"></td>
                  <td style="background-color:hsl(0,0%,41%);font-weight:bold;color:white">DimGray<br>DimGrey</td>
                  <td style="background-color:hsl(0,0%,50%);font-weight:bold;color:white">Gray<br>Grey</td>
                  <td style="background-color:hsl(0,0%,58%)"></td>
                  <td style="background-color:hsl(0,0%,66%);font-weight:bold">DarkGray<br>DarkGrey</td>
                  <td style="background-color:hsl(0,0%,75%);font-weight:bold">Silver</td>                 
                  <td style="background-color:hsl(0,0%,83%);font-weight:bold">LightGray<br>LightGrey</td>
                  <td style="background-color:hsl(0,0%,86%);font-weight:bold">Gainsboro</td>
                  <td style="background-color:hsl(0,0%,94%)"></td>
                  <td style="background-color:hsl(0,0%,96%);font-weight:bold">WhiteSmoke</td>
                  <td style="background-color:hsl(0,0%,100%);font-weight:bold">White</td>
                  <td ><br><br></td>
                </tr>
                <tr>
                  <td style="color:white"><br>0</td>
                  <td rowspan="2" style="background-color:hsl(0,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(0,100%,25%);font-weight:bold;color:white" valign="top">Maroon</td>
                  <td rowspan="2" style="background-color:hsl(0,100%,27%);font-weight:bold;color:white" valign="top">DarkRed</td>
                  <td rowspan="2" style="background-color:hsl(0,100%,34%);color:white"></td>
                  <td style="background-color:hsl(0,100%,41%);color:white"></td>
                  <td style="background-color:hsl(0,100%,50%);font-weight:bold;color:white" valign="top">Red</td>
                  <td style="background-color:hsl(0,100%,58%)"></td>
                  <td style="background-color:hsl(9,100%,64%);font-weight:bold" valign="top">Tomato</td>
                  <td style="background-color:hsl(6,93%,71%);font-weight:bold" valign="top">Salmon</td>
                  <td rowspan="2" style="background-color:hsl(0,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(0,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(6,100%,94%);font-weight:bold" valign="top">MistyRose</td>
                  <td rowspan="2" style="background-color:hsl(0,100%,99%);font-weight:bold" valign="top">Snow</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(0,59%,41%);color:white">Brown</td>
                  <td style="background-color:hsl(0,68%,42%);color:white">FireBrick</td>
                  <td style="background-color:hsl(0,53%,58%);color:white">IndianRed</td>
                  <td style="background-color:hsl(0,25%,65%)">RosyBrown</td>
                  <td style="background-color:hsl(0,79%,72%)">LightCoral</td>
                </tr>
                <tr>
                  <td style="color:white"><br>16</td>
                  <td rowspan="2" style="background-color:hsl(16,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,34%);color:white"></td>
                  <td style="background-color:hsl(16,100%,41%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,50%);font-weight:bold;color:white" valign="top">OrangeRed</td>
                  <td rowspan="2" style="background-color:hsl(16,100%,58%)"></td>
                  <td style="background-color:hsl(16,100%,66%);font-weight:bold" valign="top">Coral</td>
                  <td rowspan="2" style="background-color:hsl(17,100%,74%);font-weight:bold" valign="top">LightSalmon</td>
                  <td rowspan="2" style="background-color:hsl(16,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(16,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(19,56%,40%);color:white">Sienna</td>

                  <td style="background-color:hsl(15,72%,70%)">DarkSalmon</td>
                </tr>
                <tr>
                  <td style="color:white"><BR>30</td>
                  <td rowspan="2" style="background-color:hsl(30,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(30,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(30,100%,27%);color:white"></td>
                  <td style="background-color:hsl(30,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(30,100%,41%);color:white"></td>
                  <td style="background-color:hsl(33,100%,50%);font-weight:bold" valign="top">DarkOrange</td>
                  <td rowspan="2" style="background-color:hsl(30,100%,58%)"></td>
                  <td style="background-color:hsl(30,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(30,100%,75%)"></td>
                  <td rowspan="2" style="background-color:hsl(36,100%,84%);font-weight:bold" valign="top">NavajoWhite</td>
                  <td rowspan="2" style="background-color:hsl(28,100%,86%);font-weight:bold" valign="top">PeachPuff</td>
                  <td rowspan="2" style="background-color:hsl(33,100%,88%);font-weight:bold" valign="top">Bisque</td>
                  <td rowspan="2" style="background-color:hsl(25,100%,97%);font-weight:bold" valign="top">SeaShell</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(25,76%,31%);color:white">SaddleBrown</td>
                  <td style="background-color:hsl(25,75%,47%);color:white">Chocolate</td>
                  <td style="background-color:hsl(28,87%,67%)">SandyBrown</td>
                </tr>
           
                <tr>
                  <td style="color:white"><br>39</td>
                  <td rowspan="2" style="background-color:hsl(39,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(39,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(39,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(39,100%,34%);color:white"></td>
                  <td style="background-color:hsl(39,100%,41%);color:white"></td>
                  <td style="background-color:hsl(39,100%,50%);font-weight:bold" valign="top">Orange</td>
                  <td rowspan="2" style="background-color:hsl(39,100%,58%)"></td>
                  <td style="background-color:hsl(39,100%,66%)"></td>
                  <td style="background-color:hsl(39,100%,75%)"></td>
                  <td style="background-color:hsl(38,100%,85%);font-weight:bold" valign="top">Moccasin</td>
                  <td rowspan="2" style="background-color:hsl(36,100%,90%);font-weight:bold" valign="top">BlanchedAlmond</td>
                  <td style="background-color:hsl(37,100%,92%);font-weight:bold" valign="top">PapayaWhip</td>
                  <td rowspan="2" style="background-color:hsl(40,100%,97%);font-weight:bold" valign="top">FloralWhite</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(42,89%,38%);color:white">DarkGoldenRod</td>
                  <td style="background-color:hsl(43,74%,49%);">GoldenRod</td>

                  <td style="background-color:hsl(34,44%,69%)">Tan</td>
                  <td style="background-color:hsl(34,57%,70%)">BurlyWood</td>
                  <td style="background-color:hsl(39,77%,83%)">Wheat</td>

                  <td style="background-color:hsl(39,85%,95%)">OldLace</td>
                </tr>
                <tr>
                  <td style="color:white"><br>51</td>
                  <td rowspan="2" style="background-color:hsl(51,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,41%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,50%);font-weight:bold" valign="top">Gold</td>
                  <td style="background-color:hsl(51,100%,58%)"></td>
                  <td rowspan="2" style="background-color:hsl(51,100%,66%)"></td>
                  <td style="background-color:hsl(51,100%,75%)"></td>
                  <td style="background-color:hsl(51,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(54,100%,90%);font-weight:bold" valign="top">LemonChiffon</td>
                  <td rowspan="2" style="background-color:hsl(48,100%,93%);font-weight:bold" valign="top">Cornsilk</td>
                  <td rowspan="2" style="background-color:hsl(51,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(56,38%,58%)">DarkKhaki</td>
                 
                  <td style="background-color:hsl(54,77%,75%)">Khaki</td>
                  <td style="background-color:hsl(55,67%,80%)">PaleGoldenRod</td>
                 </tr>
                <tr>
                  <td style="color:white"><br>60</td>
                  <td rowspan="2" style="background-color:hsl(60,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,25%);font-weight:bold;color:white" valign="top">Olive</td>
                  <td rowspan="2" style="background-color:hsl(60,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,41%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,50%);font-weight:bold" valign="top">Yellow</td>
                  <td rowspan="2" style="background-color:hsl(60,100%,58%)"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,75%)"></td>
                  <td rowspan="2" style="background-color:hsl(60,100%,83%)"></td>
                  <td style="background-color:hsl(60,100%,88%)"></td>
                  <td style="background-color:hsl(60,100%,94%);font-weight:bold" valign="top">LightYellow</td>
                  <td rowspan="2" style="background-color:hsl(60,100%,97%);font-weight:bold" valign="top">Ivory</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(60,80%,90%)">L.GoldenRodYellow</td>
                  <td style="background-color:hsl(60,56%,91%)">Beige</td>
                </tr>
                <tr>
                  <td style="color:white"><br>84</td>
                  <td rowspan="2" style="background-color:hsl(84,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,25%);color:white"></td>
                  <td style="background-color:hsl(84,100%,27%);color:white"></td>
                  <td style="background-color:hsl(84,100%,34%);color:white"></td>
                  <td style="background-color:hsl(84,100%,41%);color:white"></td>
                  <td style="background-color:hsl(90,100%,50%);font-weight:bold" valign="top">Chartreuse</td>
                  <td rowspan="2" style="background-color:hsl(84,100%,59%);font-weight:bold" valign="top">GreenYellow</td>
                  <td rowspan="2" style="background-color:hsl(84,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,75%)"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(84,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(82,39%,30%);color:white">DarkOliveGreen</td>
                  <td style="background-color:hsl(80,60%,35%);color:white">OliveDrab</td>

                  <td style="background-color:hsl(80,61%,50%);">YellowGreen</td>
                  <td style="background-color:hsl(90,100%,49%)">Lawngreen</td>
                </tr>
                <tr>
                  <td style="color:white"><br>120</td>
                  <td rowspan="2" style="background-color:hsl(120,100%,20%);font-weight:bold;color:white" valign="top">DarkGreen</td>
                  <td rowspan="2" style="background-color:hsl(120,100%,25%);font-weight:bold;color:white" valign="top">Green</td>
                  <td rowspan="2" style="background-color:hsl(120,100%,27%);color:white"></td>
                  <td style="background-color:hsl(120,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(120,100%,41%);color:white"></td>
                  <td style="background-color:hsl(120,100%,50%);font-weight:bold" valign="top">Lime</td>
                  <td rowspan="2" style="background-color:hsl(120,100%,58%)"></td>
                  <td style="background-color:hsl(120,100%,66%)"></td>
                  <td style="background-color:hsl(120,100%,75%)"></td>
                  <td style="background-color:hsl(120,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(120,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(120,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(120,100%,97%);font-weight:bold" valign="top">HoneyDew</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(120,61%,34%);color:white">ForestGreen</td>

                  <td style="background-color:hsl(120,91%,50%);">LimeGreen</td>

                  <td style="background-color:hsl(120,25%,65%)">DarkSeaGreen</td>
                  <td style="background-color:hsl(120,73%,75%)">LightGreen</td>
                  <td style="background-color:hsl(120,93%,80%)">PaleGreen</td>
                </tr>
                <tr>
                  <td style="color:white"><br>150</td>
                  <td rowspan="2" style="background-color:hsl(150,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,27%);color:white"></td>
                  <td style="background-color:hsl(150,100%,34%);color:white"></td>
                  <td style="background-color:hsl(150,100%,41%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,50%);font-weight:bold" valign="top">SpringGreen</td>
                  <td style="background-color:hsl(150,100%,58%)"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(160,100%,75%);font-weight:bold" valign="top">Aquamarine</td>
                  <td rowspan="2" style="background-color:hsl(150,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(150,100%,98%);font-weight:bold" valign="top">MintCream</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(147,50%,36%);color:white">SeaGreen</td>
                  <td style="background-color:hsl(147,50%,47%);color:white">M.SeaGreen</td>

                  <td style="background-color:hsl(160,51%,60%)">M.AquaMarine</td>
                </tr>
                <tr>
                  <td style="color:white"><br>180</td>
                  <td rowspan="2" style="background-color:hsl(180,100%,20%);color:white"></td>
                  <td style="background-color:hsl(180,100%,25%);font-weight:bold;color:white" valign="top">Teal</td>
                  <td rowspan="2" style="background-color:hsl(180,100%,27%);font-weight:bold;color:white" valign="top">DarkCyan</td>
                  <td rowspan="2" style="background-color:hsl(180,100%,34%);color:white"></td>
                  <td style="background-color:hsl(180,100%,41%);font-weight:bold;color:white" valign="top">DarkTurquoise</td>
                  <td style="background-color:hsl(180,100%,50%);font-weight:bold" valign="top">Aqua<br>Cyan</td>
                  <td style="background-color:hsl(180,100%,58%)"></td>
                  <td style="background-color:hsl(180,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(180,100%,75%)"></td>
                  <td style="background-color:hsl(180,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(180,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(180,100%,94%);font-weight:bold" valign="top">LightCyan</td>
                  <td rowspan="2" style="background-color:hsl(180,100%,97%);font-weight:bold" valign="top">Azure</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(180,25%,25%);color:white">DarkSlateGray</td>

                  <td style="background-color:hsl(177,67%,41%);color:white">LightSeaGreen</td>
                  <td style="background-color:hsl(182,25%,50%);color:white">CadetBlue</td>
                  <td style="background-color:hsl(178,60%,55%)">M.Turquoise</td>
                  <td style="background-color:hsl(174,72%,56%)">Turquoise</td>
                  <td style="background-color:hsl(180,65%,81%)">PaleTurquoise</td>
                </tr>
                <tr>
                  <td style="color:white"><br>195</td>
                  <td rowspan="2" style="background-color:hsl(195,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,41%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,50%);font-weight:bold" valign="top">DeepSkyBlue</td>
                  <td rowspan="2" style="background-color:hsl(195,100%,58%)"></td>
                  <td style="background-color:hsl(195,100%,66%)"></td>
                  <td style="background-color:hsl(195,100%,75%)"></td>
                  <td style="background-color:hsl(195,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(195,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(197,71%,73%)">SkyBlue</td>
                  <td style="background-color:hsl(195,53%,79%)">LightBlue</td>
                  <td style="background-color:hsl(187,52%,80%)">PowderBlue</td>
                </tr>
               
                <tr>
                  <td style="color:white"><br>210</td>
                  <td rowspan="3" style="background-color:hsl(210,100%,20%);color:white"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,25%);color:white"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,27%);color:white"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,34%);color:white"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,41%);color:white"></td>
                  <td style="background-color:hsl(210,100%,50%);font-weight:bold"></td>
                  <td style="background-color:hsl(210,100%,58%);font-weight:bold;color:white" valign="top">DodgerBlue</td>
                  <td style="background-color:hsl(210,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(203,92%,75%);font-weight:bold" valign="top">LightSkyBlue</td>
                  <td rowspan="3" style="background-color:hsl(210,100%,83%)"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,88%)"></td>
                  <td rowspan="3" style="background-color:hsl(210,100%,94%)"></td>
                  <td rowspan="3" style="background-color:hsl(208,100%,97%);font-weight:bold" valign="top">AliceBlue</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(207,44%,49%);color:white">SteelBlue</td>
                  <td style="background-color:hsl(225,73%,57%);color:white">RoyalBlue</td>
                  <td style="background-color:hsl(219,79%,66%)">CornflowerBlue</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(210,12%,50%);color:white">SlateGray</td>
                  <td style="background-color:hsl(210,14%,53%);color:white">LightSlateGray</td>
                  <td style="background-color:hsl(210,100%,66%)"></td>
                  <td style="background-color:hsl(214,41%,78%)">LightSteelBlue</td>
                </tr>
               
                <tr>
                  <td style="color:white"><br>240</td>
                  <td rowspan="2" style="background-color:hsl(240,100%,20%);color:white"></td>
                  <td style="background-color:hsl(240,100%,25%);font-weight:bold;color:white" valign="top">Navy</td>
                  <td rowspan="2" style="background-color:hsl(240,100%,27%);font-weight:bold;color:white" valign="top">DarkBlue</td>
                  <td rowspan="2" style="background-color:hsl(240,100%,34%);color:white"></td>
                  <td style="background-color:hsl(240,100%,40%);color:white;font-weight:bold" valign="top">MediumBlue</td>
                  <td rowspan="2" style="background-color:hsl(240,100%,50%);color:white;font-weight:bold" valign="top">Blue</td>
                  <td style="background-color:hsl(240,100%,58%)"></td>
                  <td style="background-color:hsl(240,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(240,100%,75%)"></td>
                  <td rowspan="2" style="background-color:hsl(240,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(240,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(240,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(240,100%,99%);font-weight:bold" valign="top">GhostWhite</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(240,64%,27%);color:white">MidnightBlue</td>

                  <td style="background-color:hsl(248,39%,39%);color:white">DarkSlateBlue</td>

                  <td style="background-color:hsl(248,54%,58%);color:white">SlateBlue</td>
                  <td style="background-color:hsl(249,80%,67%);color:white">M.SlateBlue</td>
                </tr>
                <tr>
                  <td style="color:white"><br>275</td>
                  <td rowspan="2" style="background-color:hsl(275,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,25%);font-weight:bold;color:white" valign="top">Indigo</td>
                  <td rowspan="2" style="background-color:hsl(275,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(282,100%,41%);font-weight:bold;color:white" valign="top">DarkViolet</td>
                  <td style="background-color:hsl(275,100%,50%);font-weight:bold"></td>
                  <td style="background-color:hsl(275,100%,58%)"></td>
                  <td style="background-color:hsl(275,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,75%)"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(275,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(280,61%,50%);color:white">DarkOrchid</td>
                  <td style="background-color:hsl(271,76%,53%);color:white">BlueViolet</td>
                  <td style="background-color:hsl(260,60%,65%);color:white">M.Purple</td>
                </tr>
                <tr>
                  <td style="color:white"><br>300</td>
                  <td rowspan="2" style="background-color:hsl(300,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(300,100%,25%);font-weight:bold;color:white" valign="top">Purple</td>
                  <td rowspan="2" style="background-color:hsl(300,100%,27%);font-weight:bold;color:white" valign="top">DarkMagenta</td>
                  <td rowspan="2" style="background-color:hsl(300,100%,34%);color:white"></td>
                  <td style="background-color:hsl(300,100%,41%);color:white"></td>
                  <td style="background-color:hsl(300,100%,50%);font-weight:bold;color:white;" valign="top">Fuschia<br>Magenta</td>
                  <td style="background-color:hsl(300,100%,58%)"></td>
                  <td style="background-color:hsl(300,100%,66%)"></td>
                  <td style="background-color:hsl(300,100%,75%)"></td>
                  <td style="background-color:hsl(300,100%,83%)"></td>
                  <td rowspan="2" style="background-color:hsl(300,100%,88%)"></td>
                  <td rowspan="2" style="background-color:hsl(300,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(300,100%,97%)"></td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(322,81%,43%);color:white">M.VioletRed</td>
                  <td style="background-color:hsl(288,59%,58%);color:white">M.Orchid</td>
                  <td style="background-color:hsl(302,59%,65%)">Orchid</td>
                  <td style="background-color:hsl(300,76%,72%)">Violet</td>
                  <td style="background-color:hsl(300,47%,75%)">Plum</td>
                  <td style="background-color:hsl(300,24%,80%)">Thistle</td> 
                </tr>
                <tr>
                  <td style="color:white"><br>340</td>
                  <td rowspan="2" style="background-color:hsl(340,100%,20%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(340,100%,25%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(340,100%,27%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(340,100%,34%);color:white"></td>
                  <td rowspan="2" style="background-color:hsl(340,100%,41%);color:white"></td>
                  <td style="background-color:hsl(340,100%,50%);font-weight:bold"></td>
                  <td rowspan="2" style="background-color:hsl(328,100%,54%);font-weight:bold" valign="top">DeepPink</td>
                  <td style="background-color:hsl(340,100%,66%)"></td>
                  <td rowspan="2" style="background-color:hsl(330,100%,71%);font-weight:bold" valign="top">HotPink</td>
                  <td rowspan="2" style="background-color:hsl(351,100%,86%);font-weight:bold" valign="top">LightPink</td>
                  <td rowspan="2" style="background-color:hsl(350,100%,88%);font-weight:bold" valign="top">Pink</td>
                  <td rowspan="2" style="background-color:hsl(340,100%,94%)"></td>
                  <td rowspan="2" style="background-color:hsl(340,100%,97%);font-weight:bold" valign="top">LavenderBlush</td>
                </tr>
                <tr>
                  <td ></td>
                  <td style="background-color:hsl(348,83%,47%);color:white">Crimson</td>

                  <td style="background-color:hsl(340,60%,65%)">PaleVioletRed</td>
                </tr>
              </table>
          </div>
          </center>
              <br><br><br><br>
  </body>
 
</html>
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted May 28th, 2014, 6:53 pm

I've been trying to figure out how to do this forever... then I saw that someone had modified my SVG Filters themes into in-line CSS styles:
http://userstyles.org/styles/101231/col ... ox-buttons

There appear to be two crucial keys to getting inline SVG filters to work:

1. No line breaks.
2. No double quotes inside filter.

It's not pretty... but try this on for size Frank:

Code: Select all
.toolbarbutton-1:not([disabled]) .toolbarbutton-icon {
filter: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'> <filter id='colorize' color-interpolation-filters='sRGB'> <feFlood flood-color='LIME' result='A'/> <feColorMatrix type='saturate' in='SourceGraphic' values = '0'/> <feBlend mode='multiply' in2='A'/> <feComposite in2='SourceGraphic' operator='in'/> </filter></svg>#colorize") !important;
}


I'll see if I can work on reducing the length. To modify the filter, just change LIME to whatever color you want. You might also want to play around with swapping out "multiply" for "screen".

Edit: Aha! Line-breaks are possible, but they have to be very carefully escaped:

Code: Select all
.toolbarbutton-1:not([disabled]) .toolbarbutton-icon {
   filter: url("data:image/svg+xml;utf8,\
   <svg xmlns='http://www.w3.org/2000/svg'><filter id='colorize'>\
      <feFlood flood-color='RED' result='A'/>\
      <feColorMatrix type='saturate' in='SourceGraphic' values = '0'/>\
      <feBlend mode='screen' in2='A'/>\
      <feComposite in2='SourceGraphic' operator='in'/>\
   </filter></svg>#colorize") !important;
}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 29th, 2014, 4:33 am

patrickjdempsey wrote:It's not pretty... but try this on for size Frank

Very neat and very good colour satuaration, unlike that userstyle above.

Try 'LightSkyBlue' on a light button set and that has the strength to go out as it is.

One thing, I could only get it to work using CSS3 colour names, I'm sure we could do this with hex and rgb before? Maybe I'm using the wrong syntax there.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted May 29th, 2014, 9:41 am

HSL works:
<feFlood flood-color='hsl(120,100%, 50%)' result='A' />\

RGB works:
<feFlood flood-color='rgb(250,200, 0)' result='A' />\

I can't seem to get Hex to work... probably an issue parsing the # character... even escaped it doesn't like it and appears to be breaking the whole filter, which is why the image disappears. So that sorta sucks, but still there's a wide range that does work.

As for differences in color saturation, the top example is using <feBlend mode='multiply'> and the bottom is using <feBlend mode='screen'>. As I mentioned earlier here, when using 'multiply', it's best to use a light color as it maps to white in the image. For 'screen' it's best to use a dark color as it maps to black in the image. It mostly depends upon what effect you are trying to achieve and how dark or light the starting images are. For instance, the mostly-black Firefox default theme can be lightened up for use over top of a dark background using 'screen'.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 29th, 2014, 10:42 am

patrickjdempsey wrote:RGB works:
<feFlood flood-color='rgb(250,200, 0)' result='A' />\

I can't seem to get Hex to work...

... So that sorta sucks, but still there's a wide range that does work.

I'm fine with just rgb, especially as I almost know what the colour is, just by looking at rgb (you've done a red leaning yellow there, I reckon). I had the syntax wrong there, as I suspected.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 20063
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 31st, 2014, 4:52 pm

Seriously, this hsla stuff is a nonsense. I was going through some code and saw this - hsla(0, 0%, 83%, 1) Now, without looking it up, what colour is that?

Now, how about exactly the same colour in rgba? - rgba(212, 212, 212, 1)

*sigh*
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted May 31st, 2014, 6:46 pm

Yeah I know, it sucks. At least we've got RGB here!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Aris

User avatar
 
Posts: 3197
Joined: February 27th, 2011, 10:14 am

Post Posted June 1st, 2014, 2:10 am

Is there any benefit in using hsla over rgba somewhere?
Is hsla able to achieve something rgba is not?

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 1st, 2014, 2:08 pm

No, but it's what Mozilla likes to use. The only advantage I can think of is that it makes it obvious what the Saturation is... and therefore relatively easy to build a "palette" all at the same saturation and brightness. But that's easily accomplished in any graphics program anyway. I've had arguments with Horlander himself over this and this just seems to be the method he prefers and there it's the new standard. Maybe there is also outside influence from some other source using it as their standard?

IMO HSL just has too many downsides: Not only is it not obvious what the Hue is, it's also not obvious how it relates to other similar standards like HSB, HSV and HSI (nor is it always clear WHICH one you are looking at). You also loose color depth going to HSL. RGB (and Hex RGB) can describe over 4 1/2 times as many different colors as HSL.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted June 6th, 2014, 10:27 pm

I think I need to do some serious Zen meditation to figure out how to organize all of these disparate ideas into one Library. Any ideas on how to organize such an effort from Aris or Frank or anyone really are welcome. When I've got it all sorted I plan on releasing the whole Library, with a "readme" HTML site built-in as an update to my "SVG Filters" theme.

Also, because we now have "in-line" filters sorted... that opens the door for StyleSheetService or even direct JS implementations. (Imagine running a RegEx on the flood fill color name to change the color of an element on the fly!). The sky is the limit with this and if anyone has any novel ideas for features I haven't already covered, please please make some suggestions!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 16th, 2015, 1:18 pm

Just wanted to throw an update here in case anyone finds this and wants a complete reference. Firefox 35 and up (SeaMonkey 2.32) now has built-in CSS support for filters like Chrome!

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Code: Select all
filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Apply multiple filters */
filter: contrast(175%) brightness(3%);


We still need our custom filters for colorizing icons. But this simplifies options like invert and grayscale that are really commonly used. I'm not sure why anyone would want the opacity filter when there's already an opacity CSS command... anyway, new things to play with!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest