Changes
Jump to navigation
Jump to search
note usage
{{Documentation subpage}}
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
{{High-use|12455}}
{{Lua|Module:Color contrast}}
Converts most legal [[web colors]] to a [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 W3C relative luminance value]. The color may be specified as either by [[Web colors#HTML color names|HTML color name]] or by [[Web_colors#CSS_colors|HSL]] or by [[Web_colors#CSS_colors|RGB]] or by [[Web_colors#CSS_colors|Hex value]].
== Examples ==
* {{tld|ColorToLum|Lime}} → {{ColorToLum|Lime}}
* {{tld|ColorToLum|hsl(120,100%,50%)}} → {{ColorToLum|hsl(120,100%,50%)}}
* {{tld|ColorToLum|#00FF00}} → {{ColorToLum|#00FF00}}
* {{tld|ColorToLum|rgb(0,255,0)}} → {{ColorToLum|rgb(0,255,0)}}
* {{tld|ColorToLum|rgb(0.0%,100.0%,0.0%)}} → {{ColorToLum|rgb(0.0%,100.0%,0.0%)}}
== Consistency check ==
{| class="wikitable"
! colspan=2 rowspan=2 | Color || colspan=5 | Computed Relative Luminance
|-
! From Name || From HSL || From Hex || From RGB || From RGB%
|-
| style="background-color:Black" | || Black || {{ColorToLum|Black}} || {{ColorToLum|hsl(0,0%,0%)}} || {{ColorToLum|#000000}} || {{ColorToLum|rgb(0,0,0)}} || {{ColorToLum|rgb(0%,0%,0%)}}
|-
| 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%,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%,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%,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: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%,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%,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%,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%,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%,50.2%)}}
|}
<includeonly>{{When on basepage|
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Color conversion templates]]
}}</includeonly>
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
{{High-use|12455}}
{{Lua|Module:Color contrast}}
Converts most legal [[web colors]] to a [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 W3C relative luminance value]. The color may be specified as either by [[Web colors#HTML color names|HTML color name]] or by [[Web_colors#CSS_colors|HSL]] or by [[Web_colors#CSS_colors|RGB]] or by [[Web_colors#CSS_colors|Hex value]].
== Examples ==
* {{tld|ColorToLum|Lime}} → {{ColorToLum|Lime}}
* {{tld|ColorToLum|hsl(120,100%,50%)}} → {{ColorToLum|hsl(120,100%,50%)}}
* {{tld|ColorToLum|#00FF00}} → {{ColorToLum|#00FF00}}
* {{tld|ColorToLum|rgb(0,255,0)}} → {{ColorToLum|rgb(0,255,0)}}
* {{tld|ColorToLum|rgb(0.0%,100.0%,0.0%)}} → {{ColorToLum|rgb(0.0%,100.0%,0.0%)}}
== Consistency check ==
{| class="wikitable"
! colspan=2 rowspan=2 | Color || colspan=5 | Computed Relative Luminance
|-
! From Name || From HSL || From Hex || From RGB || From RGB%
|-
| style="background-color:Black" | || Black || {{ColorToLum|Black}} || {{ColorToLum|hsl(0,0%,0%)}} || {{ColorToLum|#000000}} || {{ColorToLum|rgb(0,0,0)}} || {{ColorToLum|rgb(0%,0%,0%)}}
|-
| 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%,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%,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%,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: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%,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%,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%,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%,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%,50.2%)}}
|}
<includeonly>{{When on basepage|
<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Color conversion templates]]
}}</includeonly>
