Template:Color: Difference between revisions

Revision as of 14:29, 29 April 2023

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)⇆` `⇆#404040rgb(64,64,64)⇆`
`\| a = <0.0-1.0>`	Alpha channel.	`{{Color\|rgb=80\|b=220\|a=.6}}`	`⇆#50505099rgba(80,80,80,.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: ⇆#808080rgb(128,128,128)⇆ and ⇆#808080rgb(128,128,128)⇆.

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.

{{Color}} → ⇆#000000rgb(0,0,0)⇆
{{Color|r=200|g=64|b=96}} → ⇆#C84060rgb(200,64,96)⇆
{{Color|r=255|g=255|b=205}} → ⇆#FFFFCDrgb(255,255,205)⇆
{{Color|r=255|g=255|b=205|a=1}} → ⇆#FFFFCDFFrgba(255,255,205,1)⇆
{{Color|r=66|g=135|b=245|a=.6}} → ⇆#4287F599rgba(66,135,245,.6)⇆
{{Color|rgb=222}} → ⇆#DEDEDErgb(222,222,222)⇆
{{Color|rgb=100|a=.1}} → ⇆#6464641Argba(100,100,100,.1)⇆

@@ Line 1: / Line 1: @@
 {{Doc}}
-{{Color}}
+* {{Code|<nowiki>{{Color}}</nowiki>}} → {{Color}}
-{{Color|r=200|g=64|b=96}}
+* {{Code|<nowiki>{{Color|r=200|g=64|b=96}}</nowiki>}} → {{Color|r=200|g=64|b=96}}
-{{Color|r=255|g=255|b=255}}
+* {{Code|<nowiki>{{Color|r=255|g=255|b=205}}</nowiki>}} → {{Color|r=255|g=255|b=205}}
-{{Color|r=66|g=135|b=245|a=.6}}
+* {{Code|<nowiki>{{Color|r=255|g=255|b=205|a=1}}</nowiki>}} → {{Color|r=255|g=255|b=205|a=1}}
-{{Color|r=255|g=255|b=255|a=1}}
+* {{Code|<nowiki>{{Color|r=66|g=135|b=245|a=.6}}</nowiki>}} → {{Color|r=66|g=135|b=245|a=.6}}
+* {{Code|<nowiki>{{Color|rgb=222}}</nowiki>}} → {{Color|rgb=222}}
+* {{Code|<nowiki>{{Color|rgb=100|a=.1}}</nowiki>}} → {{Color|rgb=100|a=.1}}
 <includeonly><onlyinclude><kbd style="display:inline-flex; flex-direction:row; align-items:baseline; width:fit-content; margin:0 2px; color:lightgrey"><!--
---><kbd style="user-select:none; background:rgb({{{r|0}}},{{{g|0}}},{{{b|0}}}); color:rgb({{{r|0}}},{{{g|0}}},{{{b|0}}}); min-width:11px; min-height:11px; border:1px solid #444; border-right:0; padding:0 1px; border-radius:4px 0 0 4px">⇆</kbd><!--
+--><kbd style="user-select:none; background:rgb({{{rgb|{{{r|0}}}}}},{{{rgb|{{{g|0}}}}}},{{{rgb|{{{b|0}}}}}}); color:rgb(0,0,0,0); min-width:11px; min-height:11px; border:1px solid #444; border-right:0; padding:0 1px; border-radius:4px 0 0 4px">⇆</kbd><!--
 --><kbd style="user-select:all; background-color:rgba(0,0,0,.16); border:1px solid #444; padding:0 2px"><!--
@@ Line 15: / Line 16: @@
 --><kbd style="display:inline-flex; align-items:baseline"><!--
---><kbd class=mw-collapsible id=mw-customcollapsible-coltype{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|}}}>&#35;{{#switch:{{#expr:floor({{{r|0}}} / 16)}}|#default={{#expr:floor({{{r|0}}} / 16)}}
+--><kbd class=mw-collapsible id=mw-customcollapsible-coltype{{{rgb|{{{r|0}}}}}}{{{rgb|{{{g|0}}}}}}{{{rgb|{{{b|0}}}}}}{{{a|}}}>&#35;{{#switch:{{#expr:floor({{{rgb|{{{r|0}}}}}} / 16)}}|#default={{#expr:floor({{{rgb|{{{r|0}}}}}} / 16)}}
 |10=A|11=B|12=C|13=D|14=E|15=F
-}}{{#switch:{{#expr:{{{r|0}}} mod 16}}|#default={{#expr:{{{r|0}}} mod 16}}
+}}{{#switch:{{#expr:{{{rgb|{{{r|0}}}}}} mod 16}}|#default={{#expr:{{{rgb|{{{r|0}}}}}} mod 16}}
 |10=A|11=B|12=C|13=D|14=E|15=F
-}}{{#switch:{{#expr:floor({{{g|0}}} / 16)}}|#default={{#expr:floor({{{g|0}}} / 16)}}
+}}{{#switch:{{#expr:floor({{{rgb|{{{g|0}}}}}} / 16)}}|#default={{#expr:floor({{{rgb|{{{g|0}}}}}} / 16)}}
 |10=A|11=B|12=C|13=D|14=E|15=F
-}}{{#switch:{{#expr:{{{g|0}}} mod 16}}|#default={{#expr:{{{g|0}}} mod 16}}
+}}{{#switch:{{#expr:{{{rgb|{{{g|0}}}}}} mod 16}}|#default={{#expr:{{{rgb|{{{g|0}}}}}} mod 16}}
 |10=A|11=B|12=C|13=D|14=E|15=F
-}}{{#switch:{{#expr:floor({{{b|0}}} / 16)}}|#default={{#expr:floor({{{b|0}}} / 16)}}
+}}{{#switch:{{#expr:floor({{{rgb|{{{b|0}}}}}} / 16)}}|#default={{#expr:floor({{{rgb|{{{b|0}}}}}} / 16)}}
 |10=A|11=B|12=C|13=D|14=E|15=F
-}}{{#switch:{{#expr:{{{b|0}}} mod 16}}|#default={{#expr:{{{b|0}}} mod 16}}
+}}{{#switch:{{#expr:{{{rgb|{{{b|0}}}}}} mod 16}}|#default={{#expr:{{{rgb|{{{b|0}}}}}} mod 16}}
 |10=A|11=B|12=C|13=D|14=E|15=F
 }}{{#if:{{{a|}}}|{{#switch:{{#expr:floor((({{{a}}} * 255) round 0) / 16)}}|#default={{#expr:floor((({{{a}}} * 255) round 0) / 16)}}
@@ Line 33: / Line 34: @@
 }}}}<span style=user-select:none></span></kbd><!--
---><kbd style="display:none" class="mw-collapsible mw-collapsed" id="mw-customcollapsible-coltype{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|}}}">{{#if:{{{a|}}}|rgba({{{r|0}}},{{{g|0}}},{{{b|0}}},{{{a}}})|rgb({{{r|0}}},{{{g|0}}},{{{b|0}}})}}<span style=user-select:none></span></kbd><!--
+--><kbd style="display:none" class="mw-collapsible mw-collapsed" id="mw-customcollapsible-coltype{{{rgb|{{{r|0}}}}}}{{{rgb|{{{g|0}}}}}}{{{rgb|{{{b|0}}}}}}{{{a|}}}">{{#if:{{{a|}}}|rgba({{{rgb|{{{r|0}}}}}},{{{rgb|{{{g|0}}}}}},{{{rgb|{{{b|0}}}}}},{{{a}}})|rgb({{{rgb|{{{r|0}}}}}},{{{rgb|{{{g|0}}}}}},{{{rgb|{{{b|0}}}}}})}}<span style=user-select:none></span></kbd><!--
 --></kbd></kbd><!--
---><kbd class=mw-customtoggle-coltype{{{r|0}}}{{{g|0}}}{{{b|0}}}{{{a|}}} style="user-select:none; background-color:rgba(0,0,0,.16); border:1px solid #444; border-left:0; padding:0 2px; border-radius:0 4px 4px 0">⇆</kbd><!--
+--><kbd class="mw-customtoggle-coltype{{{rgb|{{{r|0}}}}}}{{{rgb|{{{g|0}}}}}}{{{rgb|{{{b|0}}}}}}{{{a|}}}" style="user-select:none; background-color:rgba(0,0,0,.16); border:1px solid #444; border-left:0; padding:0 2px; border-radius:0 4px 4px 0">⇆</kbd><!--
 --></kbd></onlyinclude></includeonly>

Template:Color: Difference between revisions

Revision as of 14:29, 29 April 2023

Usage

Navigation menu

Search