Difference between revisions of "Template:ColorToLum/doc"

From blackwiki
Jump to navigation Jump to search
imported>Frietjes
imported>Frietjes
Line 21: Line 21:
 
| style="background-color:White" | || White || {{ColorToLum|White}} || {{ColorToLum|hsl(0,0%,100%)}} || {{ColorToLum|#FFFFFF}} || {{ColorToLum|rgb(255,255,255)}} || {{ColorToLum|rgb(100%,100%,100%)}}
 
| style="background-color:White" | || White || {{ColorToLum|White}} || {{ColorToLum|hsl(0,0%,100%)}} || {{ColorToLum|#FFFFFF}} || {{ColorToLum|rgb(255,255,255)}} || {{ColorToLum|rgb(100%,100%,100%)}}
 
|-
 
|-
| style="background-color:Red" | || Red || {{ColorToLum|Red}} || {{ColorToLum|hsl(0,100%,50%)}} || {{ColorToLum|#FF0000}} || {{ColorToLum|rgb(255,0,0)}} || {{ColorToLum|rgb(100%,100%,100%)}}
+
| style="background-color:Red" | || Red || {{ColorToLum|Red}} || {{ColorToLum|hsl(0,100%,50%)}} || {{ColorToLum|#FF0000}} || {{ColorToLum|rgb(255,0,0)}} || {{ColorToLum|rgb(100%,0%,0%)}}
 
|-
 
|-
| style="background-color:Lime" | || Lime || {{ColorToLum|Lime}} || {{ColorToLum|hsl(120,100%,50%)}} || {{ColorToLum|#00FF00}} || {{ColorToLum|rgb(0,255,0)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Lime" | || Lime || {{ColorToLum|Lime}} || {{ColorToLum|hsl(120,100%,50%)}} || {{ColorToLum|#00FF00}} || {{ColorToLum|rgb(0,255,0)}} || {{ColorToLum|rgb(0%,100%,0%)}}
 
|-
 
|-
| style="background-color:Blue" | || Blue || {{ColorToLum|Blue}} || {{ColorToLum|hsl(240,100%,50%)}} || {{ColorToLum|#0000FF}} || {{ColorToLum|rgb(0,0,255)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Blue" | || Blue || {{ColorToLum|Blue}} || {{ColorToLum|hsl(240,100%,50%)}} || {{ColorToLum|#0000FF}} || {{ColorToLum|rgb(0,0,255)}} || {{ColorToLum|rgb(0%,0%,100%)}}
 
|-
 
|-
| style="background-color:Yellow" | || Yellow || {{ColorToLum|Yellow}} || {{ColorToLum|hsl(60,100%,50%)}} || {{ColorToLum|#FFFF00}} || {{ColorToLum|rgb(255,255,0)}} || {{ColorToLum|rgb(100%,100%,100%)}}
+
| style="background-color:Yellow" | || Yellow || {{ColorToLum|Yellow}} || {{ColorToLum|hsl(60,100%,50%)}} || {{ColorToLum|#FFFF00}} || {{ColorToLum|rgb(255,255,0)}} || {{ColorToLum|rgb(100%,100%,0%)}}
 
|-
 
|-
| style="background-color:Cyan" | || Cyan || {{ColorToLum|Cyan}} || {{ColorToLum|hsl(180,100%,50%)}} || {{ColorToLum|#00FFFF}} || {{ColorToLum|rgb(0,255,255)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Cyan" | || Cyan || {{ColorToLum|Cyan}} || {{ColorToLum|hsl(180,100%,50%)}} || {{ColorToLum|#00FFFF}} || {{ColorToLum|rgb(0,255,255)}} || {{ColorToLum|rgb(0%,100%,100%)}}
 
|-
 
|-
| style="background-color:Magenta" | || Magenta || {{ColorToLum|Magenta}} || {{ColorToLum|hsl(300,100%,50%)}} || {{ColorToLum|#FF00FF}} || {{ColorToLum|rgb(255,0,255)}} || {{ColorToLum|rgb(100%,100%,100%)}}
+
| style="background-color:Magenta" | || Magenta || {{ColorToLum|Magenta}} || {{ColorToLum|hsl(300,100%,50%)}} || {{ColorToLum|#FF00FF}} || {{ColorToLum|rgb(255,0,255)}} || {{ColorToLum|rgb(100%,0%,100%)}}
 
|-
 
|-
 
| style="background-color:Silver" | || Silver || {{ColorToLum|Silver}} || {{ColorToLum|hsl(0,0%,75.3%)}} || {{ColorToLum|#C0C0C0}} || {{ColorToLum|rgb(192,192,192)}} || {{ColorToLum|rgb(75.3%,75.3%,75.3%)}}
 
| style="background-color:Silver" | || Silver || {{ColorToLum|Silver}} || {{ColorToLum|hsl(0,0%,75.3%)}} || {{ColorToLum|#C0C0C0}} || {{ColorToLum|rgb(192,192,192)}} || {{ColorToLum|rgb(75.3%,75.3%,75.3%)}}
Line 37: Line 37:
 
| style="background-color:Gray" | || Gray || {{ColorToLum|Gray}} || {{ColorToLum|hsl(0,0%,50.2%)}} || {{ColorToLum|#808080}} || {{ColorToLum|rgb(128,128,128)}} || {{ColorToLum|rgb(50.2%,50.2%,50.2%)}}
 
| style="background-color:Gray" | || Gray || {{ColorToLum|Gray}} || {{ColorToLum|hsl(0,0%,50.2%)}} || {{ColorToLum|#808080}} || {{ColorToLum|rgb(128,128,128)}} || {{ColorToLum|rgb(50.2%,50.2%,50.2%)}}
 
|-
 
|-
| style="background-color:Maroon" | || Maroon || {{ColorToLum|Maroon}} || {{ColorToLum|hsl(0,100%,25.1%)}} || {{ColorToLum|#800000}} || {{ColorToLum|rgb(128,0,0)}} || {{ColorToLum|rgb(50.2%,50.2%,50.2%)}}
+
| style="background-color:Maroon" | || Maroon || {{ColorToLum|Maroon}} || {{ColorToLum|hsl(0,100%,25.1%)}} || {{ColorToLum|#800000}} || {{ColorToLum|rgb(128,0,0)}} || {{ColorToLum|rgb(50.2%,0%,0%)}}
 
|-
 
|-
| style="background-color:Olive" | || Olive || {{ColorToLum|Olive}} || {{ColorToLum|hsl(60,100%,25.1%)}} || {{ColorToLum|#808000}} || {{ColorToLum|rgb(128,128,0)}} || {{ColorToLum|rgb(50.2%,50.2%,50.2%)}}
+
| style="background-color:Olive" | || Olive || {{ColorToLum|Olive}} || {{ColorToLum|hsl(60,100%,25.1%)}} || {{ColorToLum|#808000}} || {{ColorToLum|rgb(128,128,0)}} || {{ColorToLum|rgb(50.2%,50.2%,0%)}}
 
|-
 
|-
| style="background-color:Green" | || Green || {{ColorToLum|Green}} || {{ColorToLum|hsl(120,100%,25.1%)}} || {{ColorToLum|#008000}} || {{ColorToLum|rgb(0,128,0)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Green" | || Green || {{ColorToLum|Green}} || {{ColorToLum|hsl(120,100%,25.1%)}} || {{ColorToLum|#008000}} || {{ColorToLum|rgb(0,128,0)}} || {{ColorToLum|rgb(0%,50.2%,0%)}}
 
|-
 
|-
| style="background-color:Purple" | || Purple || {{ColorToLum|Purple}} || {{ColorToLum|hsl(300,100%,25.1%)}} || {{ColorToLum|#800080}} || {{ColorToLum|rgb(128,0,128)}} || {{ColorToLum|rgb(50.2%,50.2%,50.2%)}}
+
| style="background-color:Purple" | || Purple || {{ColorToLum|Purple}} || {{ColorToLum|hsl(300,100%,25.1%)}} || {{ColorToLum|#800080}} || {{ColorToLum|rgb(128,0,128)}} || {{ColorToLum|rgb(50.2%,0%,50.2%)}}
 
|-
 
|-
| style="background-color:Teal" | || Teal || {{ColorToLum|Teal}} || {{ColorToLum|hsl(180,100%,25.1%)}} || {{ColorToLum|#008080}} || {{ColorToLum|rgb(0,128,128)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Teal" | || Teal || {{ColorToLum|Teal}} || {{ColorToLum|hsl(180,100%,25.1%)}} || {{ColorToLum|#008080}} || {{ColorToLum|rgb(0,128,128)}} || {{ColorToLum|rgb(0%,50.2%,50.2%)}}
 
|-
 
|-
| style="background-color:Navy" | || Navy || {{ColorToLum|Navy}} || {{ColorToLum|hsl(240,100%,25.1%)}} || {{ColorToLum|#000080}} || {{ColorToLum|rgb(0,0,128)}} || {{ColorToLum|rgb(0%,0%,0%)}}
+
| style="background-color:Navy" | || Navy || {{ColorToLum|Navy}} || {{ColorToLum|hsl(240,100%,25.1%)}} || {{ColorToLum|#000080}} || {{ColorToLum|rgb(0,0,128)}} || {{ColorToLum|rgb(0%,0%,50.2%)}}
 
|}
 
|}
  

Revision as of 14:55, 31 July 2015

Converts most legal web colors to a W3C relative luminance value. The color may be specified as either by HTML color name or by HSL or by RGB or by Hex value.

Examples

  • {{ColorToLum|Lime}} → 0.7152
  • {{ColorToLum|hsl(120,100%,50%)}} → 0.7152
  • {{ColorToLum|#00FF00}} → 0.7152
  • {{ColorToLum|rgb(0,255,0)}} → 0.7152
  • {{ColorToLum|rgb(0.0%,100.0%,0.0%)}} → 0.7152

Consistency check

Color Computed Relative Luminance
From Name From HSL From Hex From RGB From RGB%
Black 0 0 0 0 0
White 1 1 1 1 1
Red 0.2126 0.2126 0.2126 0.2126 0.2126
Lime 0.7152 0.7152 0.7152 0.7152 0.7152
Blue 0.0722 0.0722 0.0722 0.0722 0.0722
Yellow 0.9278 0.9278 0.9278 0.9278 0.9278
Cyan 0.7874 0.7874 0.7874 0.7874 0.7874
Magenta 0.2848 0.2848 0.2848 0.2848 0.2848
Silver 0.52711512570581 0.52720723642853 0.52711512570581 0.52711512570581 0.52720723642853
Gray 0.2158605001139 0.21589697895456 0.2158605001139 0.2158605001139 0.21589697895456
Maroon 0.045891942324215 0.045899697725739 0.045891942324215 0.045891942324215 0.045899697725739
Olive 0.20027537200568 0.20030921707404 0.20027537200568 0.20027537200568 0.20030921707404
Green 0.15438342968146 0.1544095193483 0.15438342968146 0.15438342968146 0.1544095193483
Purple 0.061477070432439 0.061487459606258 0.061477070432439 0.061477070432439 0.061487459606258
Teal 0.16996855778968 0.16999728122882 0.16996855778968 0.16996855778968 0.16999728122882
Navy 0.015585128108224 0.015587761880519 0.015585128108224 0.015585128108224 0.015587761880519