Help:Using colours: Difference between revisions

Revision as of 16:18, 31 May 2024

Revision as of 17:36, 31 May 2024

Line 1:

{{Short description|Wikimedia help page}}

{{about|the use of colorscolours in articles|the civility essay dealing with colorscolours|Wikipedia:Don't edit war over the colorcolour of templates|guidelines on colorcolour use|MOS:COLORCOLOUR|the help page about link color|H:LC|the help page about user contributions|WP:UCP}}

{{Wikipedia how to|HELP:COLOR|WP:COLORSCOLOURS|H:UC}}

{{Warning|1={{big|'''Links should clearly be identifiable as links to readers'''.}}<br />Refrain from implementing coloredcoloured links that may impede user ability to distinguish links from regular text, or colorcolour links for purely aesthetic reasons. See the guides to editing articles for accessibility at [[WP:CONTRAST|contrast]], [[Wikipedia:Manual of Style/Accessibility|accessibility]] and [[WP:NAVBOXCOLORNAVBOXCOLOUR|navbox colors]].}}

To use a colorcolour in a [[wikipedia:template|template]] or [[wikipedia:table|table]] you can use the [[hex triplet]] (e.g. bronze is #CD7F32) or [[HTML color names]] (e.g. red).

Editors are encouraged to make use of [[Brewer palettes]] for charts, maps, and other entities, using '''[https://colorbrewer2.org/ this tool]'''.

==Overriding font colorcolour{{anchors|Overriding font color}}==

To make a word have colorcolour, use:

<code><nowiki><span style="color:</nowiki>''hex triplet or colorcolour name''<nowiki>">text</span></nowiki></code>

Note that you can't use the British spelling, "colour", in this context.

Line 19:

*<code><nowiki><span style="color:#0000FF">blue writing</span></nowiki></code> shows as <span style="color:#0000FF">blue writing</span>

===Template font colorcolour {{anchors|Template font color}}===

[[Template:Font color]], or its redirect [[Template:Font colorcolour]], can also be used.

<code><nowiki>{{Font colorcolour|fontcolorfontcolour|backgroundcolorbackgroundcolour|Your text here}}</nowiki></code>

{| class="wikitable" style="width:100%; text-align:left;"

Line 38:

|}

==<span id="Color generation guide">ColorColour generation guide</span>==

*The method used for selecting the colorscolours for various top-level pages, e.g. [[Main Page]], [[Wikipedia:Community Portal|Community Portal]], [[Wikipedia:Contents|Contents]], and [[Help:Contents]].<br />The 3 colorscolours are generated using the [[HSV colorcolour space]], then translated into [[RGB color model|RGB]].

{| border="0" cellspacing="4" cellpadding="8" style="border:black solid 1px;"

|+

|-

! width="60px" | Hue !! Saturation 4%<br />Brightness 100%<br /><br /><small>main background</small> !! Saturation 10%<br />Brightness 100%<br /><br /><small>2nd header, accent colorcolour</small> !! Saturation 15%<br />Brightness 95%<br /><small>main border<br />header background</small> !! Saturation 15%<br />Brightness 75%<br /><br /><small>header border only</small>

|-

! &nbsp; !! &nbsp; !! colspan="3" style="text-align:right" | <small>Note: for layouts with no spacing between borders, use the darker border colorcolour.</small>

|-

| style="background:#FF0000; color:white; text-align:center;" | Hue: 0 || style="background:#FFF5F5; color:black; text-align:center;" | #FFF5F5 || style="background:#FFE6E6; color:black; text-align:center;" | #FFE6E6 || style="background:#F2CECE; color:black; text-align:center;" | #F2CECE || style="background:#BFA3A3; color:black; text-align:center;" | #BFA3A3

Line 123:

|}

==Wikimedia colorcolour schemes{{anchors|Wikimedia color schemes}}==

===Wikipedia===

{{see also|Wikipedia:Skin}}

Wikipedia uses this colorcolour scheme on its [[Main Page]].

{{block indent|left=1.5|1=''Note: the colorcolour for the border of the lighter boxes is also the colorcolour of the backgrounds of the darker (title) boxes.''}}

<!-- legacy XHTML table visible with any browser -->

{|

Line 156:

|}

Additional 3-colorcolour palettes using this same generation scheme are at the top of the [[Help talk:Using colorscolours|talk page]]. In the Monobook skin, the background colorcolour of Wikipedia pages is #F8FCFF. In the Vector skin, the background colorcolour on all pages is #FFFFFF.

===Commons===

The Wikimedia Commons uses this colorcolour scheme on [[:commons:Main Page]] and [[:commons:Help:Contents]]. Differing from the English Wikipedia, Commons does not use an extra, darker colorcolour for bordering the header. Also, the colorcolour sets are not derived from a hue the way the above table does.

{| cellspacing="0" cellpadding="0" style="margin:0 0 1em; width:100% background:white;"

| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background:#f1f5fc;"|

<div style="border-bottom:1px solid #abd5f5; background:#d0e5f5; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colorcolour: #d0e5f5</div>

<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em;">

background colorcolour: #f1f5fc<br />

border colorcolour: #abd5f5</div>

| style="padding:0 0.5em;"|

<!-- Right column 3 orange -->

| style="width:50%; vertical-align:top; border:1px solid #fad67d; background:#faf6ed;"|

<div style="border-bottom:1px solid #fad67d; background:#faecc8; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colorcolour: #faecc8</div>

<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em;">

background colorcolour: #faf6ed<br />

border colorcolour: #fad67d</div>

|}

==Schemes for colorcolour-blind readers==

{{Shortcut|H:Colorblind}}

Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have [[color blindness#Red–green colour blindness|red-green [[colorcolour blindness]]; this and other types affect people worldwide.<ref>{{Cite web|last=|first=|date=1 January 2015|title=Color Vision Deficiency|url=https://medlineplus.gov/genetics/condition/color-vision-deficiency/#frequency|archive-url=|archive-date=|access-date=29 January 2021|website=MedlinePlus|publisher=U.S. National Library of Medicine}}</ref> This table shows "safe" groups of colorscolours which are distinguishable to most colorcolour-blind people, although colorcolour should never be used as the sole method to convey information.

See also [[:Commons:Commons:Creating accessible illustrations]] for color blind friendly palettes.

{| border=1 cellpadding=4 style="border-collapse: collapse; border: 0px1px solid black;"

|- style="vertical-align:top;text-align:center;"

! ColorColour 01 !! ColorColour 12 !! ColorColour 23 !! ColorColour 34 !! ColorColour 45 !! Colour 6

|-

| style="background: black; color: white;" | Black

| rowspan="2" style="background: red; color: white;" | Red

| rowspan="4" style="background: gray; color: white;" | Grey

| rowspan="4" style="background: lime; color: black;"| Lime

| rowspan="4" style="background: white; color: black;" | White

| rowspan="42" style="background: limeyellow; color: black;"| LimeYellow

| rowspan="2" style="background: redblue; color: white;" | RedBlue

| style="background: red; color: white;" | Red

| rowspan="2" style="background: black; color: white;" | Black

| rowspan="42" style="background: gray; color: white;" | Grey

|-

| style="background: bluegreen; color: white;" | BlueGreen

|-

| rowspan="2" style="background: maroonlime; color: whiteblack;" | MaroonLime

| rowspan="2" style="background: greenpurple; color: white;" | GreenPurple

| style="background: brown; color: white;" | Brown

| rowspan="2" style="background: darkred; color: white;" | Dark Red

| style="background: cyan; color: black;" | Cyan

|-

| style="background: purpleorange; color: whiteblack;" | PurpleOrange

| style="background: pink; color: black;" | Pink

|}

* Pick a maximum of one colorcolour from each column. Do not use more than one colorcolour from any one column.

* Use large expanses of the colorcolour. If you're coloringcolouring text, use bold and a large font.

* For small expanses of colorcolour, such as thin lines, clearly label them with text, or use non-colorcolour techniques such as font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, [[checkerboard|checkers]] or [[polka-dot]]s).

* Use bright mid-range colorscolours, like children's crayons. Do not use light or dark variants of the colorscolours.

* If you need more colorscolours... hard luck. Instead use non-colorcolour techniques such as labelling, font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).

* If you are colorcolour-blind yourself, check your revised image with a colorcolour-sighted person to confirm the meaning is intact.

The following utilities may be of use in determining whether a revised image is distinguishable to colorcolour-blind users. Typically they take a web page or image file as an input, and render a colorcolour-blind simulated image as output:

* [https://addons.mozilla.org/en-US/firefox/search/?q=Colorblind&cat=all Mozilla Firefox color-blind addons]

* [https://michelf.ca/projects/sim-daltonism/ Sim Daltonism] simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.

* [https://www.colororacle.org/ Color Oracle] downloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.

==ColorColour ramps==

The standard rainbow should not be used to represent continuous data, because it creates artificial thresholds; humans do not see the spectrum as a smooth ramp. Greyscales, or a perceptually-even colorcolour ramps, or a colorcolour map chosen to deliberately highlight certain features, are preferable. Diverging colorcolour ramps (two colorcolour extremes around a white or black neutral value) tend to hide some high-frequency features.

ColorsColours have cultural connotations; pick ones that match your data. That is, a diverging colorcolour ramp with extremes "<span style="color: red">hot</span>, <span style="color: blue">cold</span>" will be easier to understand than the reverse (<span style="color: blue">hot</span>, <span style="color: red">cold</span>).

* {{cite web |last1=McNeall |first1=Doug |title=Picking a colorcolour scale for scientific graphics |url=https://betterfigures.org/2015/06/23/picking-a-colorcolour-scale-for-scientific-graphics/ |website=Better Figures |language=en |date=23 June 2015}}

*{{cite web |title=Elegant Figures - Subtleties of Color (Part 1 of 6) |url=https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/ |website=earthobservatory.nasa.gov |language=en |date=1 February 2020}}

*{{cite journal |last1=Rougier |first1=Nicolas P. |last2=Droettboom |first2=Michael |last3=Bourne |first3=Philip E. |title=Ten Simple Rules for Better Figures |journal=PLOS Computational Biology |date=11 September 2014 |volume=10 |issue=9 |pages=e1003833 |doi=10.1371/journal.pcbi.1003833 |pmid=25210732 |pmc=4161295 |bibcode=2014PLSCB..10E3833R |doi-access=free }}

Line 223 ⟶ 228:

==See also==

===Templates===

*To colorcolour text and background:

** [[Template:Font color]]

*To provide example squares of colorcolour:

** [[Template:Color sample]]

** [[Template:Swatch]]

Line 236 ⟶ 241:

* [[Help:Link color]]

* [[Help:Displaying a formula#Color]]

* [[Wikipedia:Infobox colorscolours]] – inactive

* [[Wikipedia:WikiProject Usability/Color]] – inactive

Line 262 ⟶ 267:

{{Wikipedia technical help|collapsed}}

[[Category:Wikipedia accessibility|ColorsColours]]