Template:Color: Difference between revisions

Latest revision as of 19:29, 10 October 2025

Template Documentation [view] [edit]

Available doc translations

…

Usage

You can click on the arrow icon to change the color display from HEX to RGB and back.

Parameter	Description	Example	Preview
No parameters	If no parameters are specified, the template will display black color.	`{{Color}}`	`#000000rgb(0,0,0)`
\| r = <0-255> \| g = <0-255> \| b = <0-255>	Setting the values of red, green and blue colors respectively.	`{{Color\|r=200\|g=128\|b=64}}`	`#C88040rgb(200,128,64)`
\| rgb = <0-255>	Controls all three colors at once. If a separate color value is specified, it will take precedence.	`{{Color\|rgb=99}}` `{{Color\|rgb=64\|g=255}}`	`#636363rgb(99,99,99)` `#40FF40rgb(64,255,64)`
\| a = <0.0-1.0>	Alpha channel.	`{{Color\|rgb=80\|b=220\|a=.6}}`	`#5050DC99rgb(80,80,220,.6)`

Bug:If the same color is specified on the page, then pressing the arrow button will change the HEX/RGB display for all the same colors at once: #808080 and #808080.

The above documentation is transcluded from Template:Color/doc. (Edit | Page history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.

@@ Line 1: / Line 1: @@
-<includeonly><onlyinclude><span style="white-space:nowrap"><!--
+<includeonly><onlyinclude><span style="white-space:nowrap; color:#DDD; user-select:all"><!--
 ------ Color Square
---><span style="position:relative; display:inline-block; width:8px; height:8px; margin:0 .3em -1px 0; border:1px solid #525252; background:#FFF"><!--
+--><span style="display:inline-block; width:8px; height:8px; margin-bottom:-1px; border:1px solid #525252; background:linear-gradient(#000, rgb({{{r|{{{rgb|0}}}}}},{{{g|{{{rgb|0}}}}}},{{{b|{{{rgb|0}}}}}},{{{a|1}}}) 0%), repeating-conic-gradient(#FFF 0 25%,#AAA 0 50%)"></span><!--
---><span style="position:absolute; left:0; top:0; width:4px; height:4px; background:#999"></span><!--
---><span style="position:absolute; right:0; bottom:0; width:4px; height:4px; background:#999"></span><!--
---><span style="position:absolute; left:0; top:0; width:8px; height:8px; background:rgb({{{r|{{{rgb|0}}}}}},{{{g|{{{rgb|0}}}}}},{{{b|{{{rgb|0}}}}}},{{{a|1}}})"></span><!--
---></span><!--
------- Arrow Button
+------ Arrows Button
---><span class="mw-customtoggle-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" style="margin-right:.3em; user-select:none"><span style="display:inline-block; width:8px; height:10px; margin-bottom:-1px; background:#FFF; clip-path:path('M4,0l4,4H0m0,2H8L4,10')"></span></span><!--
+--><span class="mw-customtoggle-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" style="margin:0 .3em; user-select:none"><span style="display:inline-block; width:8px; height:10px; margin-bottom:-1px; background:#FFF; clip-path:path('M4 0l4 4H6L4 2 2 4H0m4 6L0 6h2l2 2 2-2h2')"></span></span><!--
 ------ HEX Format
---><samp id="mw-customcollapsible-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" class="mw-collapsible" style="color:#EEE; user-select:all">&#35;{{#switch:{{#expr:floor({{{r|{{{rgb|0}}}}}} / 16)}}|0=0|1=1|2=2|3=3|4=4|5=5|6=6|7=7|8=8|9=9|10=A|11=B|12=C|13=D|14=E|15=F}}<!--
+--><samp id="mw-customcollapsible-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" class="mw-collapsible">&#35;{{#switch:{{#expr:floor({{{r|{{{rgb|0}}}}}} / 16)}}|0=0|1=1|2=2|3=3|4=4|5=5|6=6|7=7|8=8|9=9|10=A|11=B|12=C|13=D|14=E|15=F}}<!--
 -->{{#switch:{{#expr:{{{r|{{{rgb|0}}}}}} mod 16}}|0=0|1=1|2=2|3=3|4=4|5=5|6=6|7=7|8=8|9=9|10=A|11=B|12=C|13=D|14=E|15=F}}<!--
 -->{{#switch:{{#expr:floor({{{g|{{{rgb|0}}}}}} / 16)}}|0=0|1=1|2=2|3=3|4=4|5=5|6=6|7=7|8=8|9=9|10=A|11=B|12=C|13=D|14=E|15=F}}<!--
@@ Line 26: / Line 22: @@
 ------ RGB Format
---><samp id="mw-customcollapsible-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" class="mw-collapsible mw-collapsed" style="display:none; color:#EEE; user-select:all">rgb({{{r|{{{rgb|0}}}}}},{{{g|{{{rgb|0}}}}}},{{{b|{{{rgb|0}}}}}}{{#if:{{{a|}}}|,{{{a}}}}})</samp><!--
+--><samp id="mw-customcollapsible-color{{{rgb|0}}}{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|1}}}" class="mw-collapsible mw-collapsed" style="display:none">rgb({{{r|{{{rgb|0}}}}}},{{{g|{{{rgb|0}}}}}},{{{b|{{{rgb|0}}}}}}{{#if:{{{a|}}}|,{{{a}}}}})</samp><!--
 --></span></onlyinclude></includeonly>
 {{Doc}}
 [[Category:Mathematics templates]]

Template:Color: Difference between revisions

Latest revision as of 19:29, 10 October 2025

Usage

Navigation menu

Search