Content deleted Content added
m see also section added |
→Colour generation guide: it's not in page linked |
||
| (364 intermediate revisions by more than 100 users not shown) | |||
Line 1:
{{Short description|Wikimedia help page}}
{{redirect|WP:COLOURS|MOS guidelines on color use in articles|MOS:COLOR}}
{{about|the use of colours in articles|the civility essay dealing with colours|Wikipedia:Don't edit war over the colour of templates|guidelines on colour use|MOS:COLOUR|the help page about link color|H:LC|the help page about user contributions|WP:UCP}}
{{Wikipedia how to|HELP:COLOR|WP:COLOURS|H:UC}}
{{Warning link color}}
To use a colour in a [[wikipedia:template|template]] or [[wikipedia:table|table]] you can use the [[hex triplet]] (e.g. {{Mono|#CD7F32}} is bronze) or [[HTML color names|HTML color name]] (e.g. red).
Editors are encouraged to make use of tools, such as [https://colorbrewer2.org/ Color Brewer 2] to create [[Brewer palettes]], listed at [[MOS:COLOR]] for [[Wikipedia:Manual of Style/Accessibility#Additional tools for color scheme selection|color scheme selection]] used in graphical charts, maps, tables, and webpages with accessibility in mind for color-blind and visually impaired users.
For color tables and a color pallette, see [[MOS:COLORS]]. For the WikiProject, see [[Wikipedia:WikiProject Color]].
==Overriding font colour{{anchors|Overriding font color}}==
To apply colour to text, use:
<code><nowiki><span style="color:</nowiki>''hex triplet or colour name''<nowiki>">text</span></nowiki></code>
Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext.
Examples:
*<code><span style="color:</code>{{Highlight round|red|bc=#dadde3}}<code>">red writing<nowiki></span></nowiki></code> shows as <span style="color:red">red writing</span>
*<code><span style="color:</code>{{Highlight round|#0f0|bc=#dadde3}}<code>">green writing<nowiki></span></nowiki></code> shows as <span style="color:#0f0">green writing</span>
*<code><span style="color:</code>{{Highlight round|#0000FF|bc=#dadde3}}<code>">blue writing<nowiki></span></nowiki></code> shows as <span style="color:#0000FF">blue writing</span>
===Template font colour {{anchors|Template font color}}===
{{Tl|Font color}}, or its redirect {{Tl|Font colour}}, can also be used.
{{tlx|Font colour|fontcolour|backgroundcolour|Your text here}}
{{markup
|<nowiki>{{font color|red|This text is different}}</nowiki>
|{{font color|red|This text is different}}<br>to change text-color only (Note: do not style text as a link)
|<nowiki>{{font color|red|yellow|This text is different}}</nowiki>
|{{font color|red|yellow|This text is different}}<br>to change text and background color
|<nowiki>{{font color||yellow|This text is different}}</nowiki>
|{{font color||yellow|This text is different}}<br>to change background color only<br>'''Note''' the two pipe-characters <code>||</code> to keep the text color at default.
}}
==<span id="Color generation guide">Colour generation guide</span>==
{{for|a list of tools for color scheme selection and creation|#Additional tools for color scheme selection}}
The method used for selecting the colors for various top-level pages, e.g. [[Main Page]], [[Wikipedia:Community Portal|Community Portal]], [[Wikipedia:Contents|Contents]], and [[Help:Contents]].<br />The 3 colours are generated using the [[HSV colour space]], then translated into [[RGB color model|RGB]].
{| class="wikitable" 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 colour</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>
|-
! !! !! colspan="3" style="text-align:right" | <small>Note: for layouts with no spacing between borders, use the darker border colour.</small>
|-
| style="background:#FF0000; color:white; text-align:center;" | 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
|-
| style="background:#FF2A00; color:white; text-align:center;" | 10° || style="background:#FFF7F5; color:black; text-align:center;" | #FFF7F5 || style="background:#FFEAE6; color:black; text-align:center;" | #FFEAE6 || style="background:#F2D4CE; color:black; text-align:center;" | #F2D4CE || style="background:#BFA7A3; color:black; text-align:center;" | #BFA7A3
|-
| style="background:#FF5500; color:white; text-align:center;" | 20° || style="background:#FFF8F5; color:black; text-align:center;" | #FFF8F5 || style="background:#FFEEE6; color:black; text-align:center;" | #FFEEE6 || style="background:#F2DACE; color:black; text-align:center;" | #F2DACE || style="background:#BFACA3; color:black; text-align:center;" | #BFACA3
|-
| style="background:#FF8000; color:white; text-align:center;" | 30° || style="background:#FFFAF5; color:black; text-align:center;" | #FFFAF5 || style="background:#FFF2E6; color:black; text-align:center;" | #FFF2E6 || style="background:#F2E0CE; color:black; text-align:center;" | #F2E0CE || style="background:#BFB1A3; color:black; text-align:center;" | #BFB1A3
|-
| style="background:#FFAA00; color:black; text-align:center;" | 40° || style="background:#FFFCF5; color:black; text-align:center;" | #FFFCF5 || style="background:#FFF7E6; color:black; text-align:center;" | #FFF7E6 || style="background:#F2E6CE; color:black; text-align:center;" | #F2E6CE || style="background:#BFB6A3; color:black; text-align:center;" | #BFB6A3
|-
| style="background:#FFD500; color:black; text-align:center;" | 50° || style="background:#FFFDF5; color:black; text-align:center;" | #FFFDF5 || style="background:#FFFBE6; color:black; text-align:center;" | #FFFBE6 || style="background:#F2ECCE; color:black; text-align:center;" | #F2ECCE || style="background:#BFBAA3; color:black; text-align:center;" | #BFBAA3
|-
| style="background:#FFFF00; color:black; text-align:center;" | 60° || style="background:#FFFFF5; color:black; text-align:center;" | #FFFFF5 || style="background:#FFFFE6; color:black; text-align:center;" | #FFFFE6 || style="background:#F2F2CE; color:black; text-align:center;" | #F2F2CE || style="background:#BFBFA3; color:black; text-align:center;" | #BFBFA3
|-
| style="background:#D4FF00; color:black; text-align:center;" | 70° || style="background:#FDFFF5; color:black; text-align:center;" | #FDFFF5 || style="background:#FBFFE6; color:black; text-align:center;" | #FBFFE6 || style="background:#ECF2CE; color:black; text-align:center;" | #ECF2CE || style="background:#BABFA3; color:black; text-align:center;" | #BABFA3
|-
| style="background:#AAFF00; color:black; text-align:center;" | 80° || style="background:#FCFFF5; color:black; text-align:center;" | #FCFFF5 || style="background:#F7FFE6; color:black; text-align:center;" | #F7FFE6 || style="background:#E6F2CE; color:black; text-align:center;" | #E6F2CE || style="background:#B6BFA3; color:black; text-align:center;" | #B6BFA3
|-
| style="background:#80FF00; color:black; text-align:center;" | 90° || style="background:#FAFFF5; color:black; text-align:center;" | #FAFFF5 || style="background:#F2FFE6; color:black; text-align:center;" | #F2FFE6 || style="background:#E0F2CE; color:black; text-align:center;" | #E0F2CE || style="background:#B1BFA3; color:black; text-align:center;" | #B1BFA3
|-
| style="background:#5EFF00; color:black; text-align:center;" | 100° || style="background:#F8FFF5; color:black; text-align:center;" | #F8FFF5 || style="background:#EEFFE6; color:black; text-align:center;" | #EEFFE6 || style="background:#DAF2CE; color:black; text-align:center;" | #DAF2CE || style="background:#ACBFA3; color:black; text-align:center;" | #ACBFA3
|-
| style="background:#2BFF00; color:black; text-align:center;" | 110° || style="background:#F7FFF5; color:black; text-align:center;" | #F7FFF5 || style="background:#EAFFE6; color:black; text-align:center;" | #EAFFE6 || style="background:#D4F2CE; color:black; text-align:center;" | #D4F2CE || style="background:#A7BFA3; color:black; text-align:center;" | #A7BFA3
|-
| style="background:#00FF00; color:black; text-align:center;" | 120° || style="background:#F5FFF5; color:black; text-align:center;" | #F5FFF5 || style="background:#E6FFE6; color:black; text-align:center;" | #E6FFE6 || style="background:#CEF2CE; color:black; text-align:center;" | #CEF2CE || style="background:#A3BFA3; color:black; text-align:center;" | #A3BFA3
|-
| style="background:#00FF2A; color:black; text-align:center;" | 130° || style="background:#F5FFF7; color:black; text-align:center;" | #F5FFF7 || style="background:#E6FFEA; color:black; text-align:center;" | #E6FFEA || style="background:#CEF2D4; color:black; text-align:center;" | #CEF2D4 || style="background:#A3BFA7; color:black; text-align:center;" | #A3BFA7
|-
| style="background:#00FF55; color:black; text-align:center;" | 140° || style="background:#F5FFF8; color:black; text-align:center;" | #F5FFF8 || style="background:#E6FFEE; color:black; text-align:center;" | #E6FFEE || style="background:#CEF2DA; color:black; text-align:center;" | #CEF2DA || style="background:#A3BFAC; color:black; text-align:center;" | #A3BFAC
|-
| style="background:#00FF80; color:black; text-align:center;" | 150° || style="background:#F5FFFA; color:black; text-align:center;" | #F5FFFA || style="background:#E6FFF2; color:black; text-align:center;" | #E6FFF2 || style="background:#CEF2E0; color:black; text-align:center;" | #CEF2E0 || style="background:#A3BFB1; color:black; text-align:center;" | #A3BFB1
|-
| style="background:#00FFAA; color:black; text-align:center;" | 160° || style="background:#F5FFFC; color:black; text-align:center;" | #F5FFFC || style="background:#E6FFF7; color:black; text-align:center;" | #E6FFF7 || style="background:#CEF2E6; color:black; text-align:center;" | #CEF2E6 || style="background:#A3BFB6; color:black; text-align:center;" | #A3BFB6
|-
| style="background:#00FFD5; color:black; text-align:center;" | 170° || style="background:#F5FFFD; color:black; text-align:center;" | #F5FFFD || style="background:#E6FFFB; color:black; text-align:center;" | #E6FFFB || style="background:#CEF2EC; color:black; text-align:center;" | #CEF2EC || style="background:#A3BFBA; color:black; text-align:center;" | #A3BFBA
|-
| style="background:#00FFFF; color:black; text-align:center;" | 180° || style="background:#F5FFFF; color:black; text-align:center;" | #F5FFFF || style="background:#E6FFFF; color:black; text-align:center;" | #E6FFFF || style="background:#CEF2F2; color:black; text-align:center;" | #CEF2F2 || style="background:#A3BFBF; color:black; text-align:center;" | #A3BFBF
|-
| style="background:#00D5FF; color:black; text-align:center;" | 190° || style="background:#F5FDFF; color:black; text-align:center;" | #F5FDFF || style="background:#E6FBFF; color:black; text-align:center;" | #E6FBFF || style="background:#CEECF2; color:black; text-align:center;" | #CEECF2 || style="background:#A3BABF; color:black; text-align:center;" | #A3BABF
|-
| style="background:#00AAFF; color:white; text-align:center;" | 200° || style="background:#F5FCFF; color:black; text-align:center;" | #F5FCFF || style="background:#E6F7FF; color:black; text-align:center;" | #E6F7FF || style="background:#CEE6F2; color:black; text-align:center;" | #CEE6F2 || style="background:#A3B6BF; color:black; text-align:center;" | #A3B6BF
|-
| style="background:#0080FF; color:white; text-align:center;" | 210° || style="background:#F5FAFF; color:black; text-align:center;" | #F5FAFF || style="background:#E6F2FF; color:black; text-align:center;" | #E6F2FF || style="background:#CEE0F2; color:black; text-align:center;" | #CEE0F2 || style="background:#A3B1BF; color:black; text-align:center;" | #A3B1BF
|-
| style="background:#0055FF; color:white; text-align:center;" | 220° || style="background:#F5F8FF; color:black; text-align:center;" | #F5F8FF || style="background:#E6EEFF; color:black; text-align:center;" | #E6EEFF || style="background:#CEDAF2; color:black; text-align:center;" | #CEDAF2 || style="background:#A3ACBF; color:black; text-align:center;" | #A3ACBF
|-
| style="background:#002AFF; color:white; text-align:center;" | 230° || style="background:#F5F7FF; color:black; text-align:center;" | #F5F7FF || style="background:#E6EAFF; color:black; text-align:center;" | #E6EAFF || style="background:#CED4F2; color:black; text-align:center;" | #CED4F2 || style="background:#A3A7BF; color:black; text-align:center;" | #A3A7BF
|-
| style="background:#0000FF; color:white; text-align:center;" | 240° || style="background:#F5F5FF; color:black; text-align:center;" | #F5F5FF || style="background:#E6E6FF; color:black; text-align:center;" | #E6E6FF || style="background:#CECEF2; color:black; text-align:center;" | #CECEF2 || style="background:#A3A3BF; color:black; text-align:center;" | #A3A3BF
|-
| style="background:#2B00FF; color:white; text-align:center;" | 250° || style="background:#F7F5FF; color:black; text-align:center;" | #F7F5FF || style="background:#EAE6FF; color:black; text-align:center;" | #EAE6FF || style="background:#D4CEF2; color:black; text-align:center;" | #D4CEF2 || style="background:#A7A3BF; color:black; text-align:center;" | #A7A3BF
|-
| style="background:#5500FF; color:white; text-align:center;" | 260° || style="background:#F8F5FF; color:black; text-align:center;" | #F8F5FF || style="background:#EEE6FF; color:black; text-align:center;" | #EEE6FF || style="background:#DACEF2; color:black; text-align:center;" | #DACEF2 || style="background:#ACA3BF; color:black; text-align:center;" | #ACA3BF
|-
| style="background:#8000FF; color:white; text-align:center;" | 270° || style="background:#FAF5FF; color:black; text-align:center;" | #FAF5FF || style="background:#F2E6FF; color:black; text-align:center;" | #F2E6FF || style="background:#E0CEF2; color:black; text-align:center;" | #E0CEF2 || style="background:#B1A3BF; color:black; text-align:center;" | #B1A3BF
|-
| style="background:#AA00FF; color:white; text-align:center;" | 280° || style="background:#FCF5FF; color:black; text-align:center;" | #FCF5FF || style="background:#F7E6FF; color:black; text-align:center;" | #F7E6FF || style="background:#E6CEF2; color:black; text-align:center;" | #E6CEF2 || style="background:#B6A3BF; color:black; text-align:center;" | #B6A3BF
|-
| style="background:#D400FF; color:white; text-align:center;" | 290° || style="background:#FDF5FF; color:black; text-align:center;" | #FDF5FF || style="background:#FBE6FF; color:black; text-align:center;" | #FBE6FF || style="background:#ECCEF2; color:black; text-align:center;" | #ECCEF2 || style="background:#BAA3BF; color:black; text-align:center;" | #BAA3BF
|-
| style="background:#FF00FF; color:white; text-align:center;" | 300° || style="background:#FFF5FF; color:black; text-align:center;" | #FFF5FF || style="background:#FFE6FF; color:black; text-align:center;" | #FFE6FF || style="background:#F2CEF2; color:black; text-align:center;" | #F2CEF2 || style="background:#BFA3BF; color:black; text-align:center;" | #BFA3BF
|-
| style="background:#FF00D4; color:white; text-align:center;" | 310° || style="background:#FFF5FD; color:black; text-align:center;" | #FFF5FD || style="background:#FFE6FB; color:black; text-align:center;" | #FFE6FB || style="background:#F2CEEC; color:black; text-align:center;" | #F2CEEC || style="background:#BFA3BA; color:black; text-align:center;" | #BFA3BA
|-
| style="background:#FF00AA; color:white; text-align:center;" | 320° || style="background:#FFF5FC; color:black; text-align:center;" | #FFF5FC || style="background:#FFE6F7; color:black; text-align:center;" | #FFE6F7 || style="background:#F2CEE6; color:black; text-align:center;" | #F2CEE6 || style="background:#BFA3B6; color:black; text-align:center;" | #BFA3B6
|-
| style="background:#FF0080; color:white; text-align:center;" | 330° || style="background:#FFF5FA; color:black; text-align:center;" | #FFF5FA || style="background:#FFE6F2; color:black; text-align:center;" | #FFE6F2 || style="background:#F2CEE0; color:black; text-align:center;" | #F2CEE0 || style="background:#BFA3B1; color:black; text-align:center;" | #BFA3B1
|-
| style="background:#FF0055; color:white; text-align:center;" | 340° || style="background:#FFF5F8; color:black; text-align:center;" | #FFF5F8 || style="background:#FFE6EE; color:black; text-align:center;" | #FFE6EE || style="background:#F2CEDA; color:black; text-align:center;" | #F2CEDA || style="background:#BFA3AC; color:black; text-align:center;" | #BFA3AC
|-
| style="background:#FF002B; color:white; text-align:center;" | 350° || style="background:#FFF5F7; color:black; text-align:center;" | #FFF5F7 || style="background:#FFE6EA; color:black; text-align:center;" | #FFE6EA || style="background:#F2CED4; color:black; text-align:center;" | #F2CED4 || style="background:#BFA3A7; color:black; text-align:center;" | #BFA3A7
|-
| style="background:#000000; color:white; text-align:center;" | S: 0% || style="background:#FFFFFF; color:black; text-align:center;" | #FFFFFF || style="background:#F9F9F9; color:black; text-align:center;" | #F9F9F9 || style="background:#F2F2F2; color:black; text-align:center;" | #F2F2F2 || style="background:#BFBFBF; color:black; text-align:center;" | #BFBFBF
|}
==Wikimedia colour schemes{{anchors|Wikimedia color schemes}}==
===Wikipedia===
{{see also|Wikipedia:Skin}}
Wikipedia uses this colour scheme on its [[Main Page]] and, for the final row, on the [[Wikipedia:Community Portal|Community Portal]].
{{hatnote|Note: the colour for the border of the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.}}
{|
! Hue !!colspan=2| Light Box<br/>background / border !!colspan=2| Title<br/>background / border
|-
| 150°
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| {{Mono|#F5FFFA}} / {{Mono|#CEF2E0}}
| style="background:#CEF2E0;"|  
| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| {{Mono|#CEF2E0}} / {{Mono|#A3BFB1}}
| style="background:#A3BFB1;"|  
<!--From today's featured article; Did you know ...-->
|-
| 210°
| style="background:#F5FAFF; border:1px solid #CEDFF2; padding:1em; margin:auto;"| {{Mono|#F5FAFF}} / {{Mono|#CEDFF2}}
| style="background:#CEDFF2;"|  
| style="background:#CEDFF2; border:1px solid #A3B0BF; padding:1em; margin:auto;"| {{Mono|#CEDFF2}} / {{Mono|#A3B0BF}}
| style="background:#A3B1BF;"|  
<!--In the news; On this day-->
|-
| 270°
| style="background:#FAF5FF; border:1px solid #DDCEF2; padding:1em; margin:auto;"| {{Mono|#FAF5FF}} / {{Mono|#DDCEF2}}
| style="background:#DDCEF2;"|  
| style="background:#DDCEF2; border:1px solid #AFA3BF; padding:1em; margin:auto;"| {{Mono|#DDCEF2}} / {{Mono|#AFA3BF}}
| style="background:#AFA3BF;"|  
<!--Today's featured picture-->
|-
| 330°
| style="background:#FFF5FA; border:1px solid #F2CEDD; padding:1em; margin:auto;"| {{Mono|#FFF5FA}} / {{Mono|#F2CEDD}}
| style="background:#F2CEDD;"|  
| style="background:#F2CEDD; border:1px solid #BFA3AF; padding:1em; margin:auto;"| {{Mono|#F2CEDD}} / {{Mono|#BFA3AF}}
| style="background:#BFA3AF;"|  
<!--From today's featured list-->
|-
| 30°
| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"| {{Mono|#FFFAF5}} / {{Mono|#F2E0CE}}
| style="background:#F2E0CE;"|  
| style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"| {{Mono|#F2E0CE}} / {{Mono|#BFB1A3}}
| style="background:#BFB1A3;"|  
|}
Additional 3-colour palettes using this same generation scheme are at the top of the [[Help talk:Using colours|talk page]]. In the [[Wikipedia:Monobook|Monobook skin]], the background colour of Wikipedia pages is {{Mono|#F8FCFF}}. In the [[Wikipedia:Vector 2022|Vector 2022]] skin, the background colour on all pages in light mode is {{Mono|#FFFFFF}}.
===Commons===
The Wikimedia Commons uses this colour scheme on [[:commons:Main Page]] and [[:commons:Help:Contents]]. Differing from the English Wikipedia, Commons does not use an extra, darker colour for bordering the header. Also, the colour sets are not derived from a hue the way the above table does.
{|
!colspan=2| Light Box<br/>background / border !!colspan=2| Title<br/>background / border
|-
| style="background:#F1F5FC; border:1px solid #ABD5F5; padding:1em; margin:auto;"| {{Mono|#F1F5FC}} / {{Mono|#ABD5F5}}
| style="background:#ABD5F5;"|  
| style="background:#D0E5F5; border:1px solid #ABD5F5; padding:1em; margin:auto;"| {{Mono|#D0E5F5}} / {{Mono|#ABD5F5}}
| style="background:#ABD5F5;"|  
|-
| style="background:#FAF6ED; border:1px solid #FAD67D; padding:1em; margin:auto;"| {{Mono|#FAF6ED}} / {{Mono|#ABD5F5}}
| style="background:#FAD67D;"|  
| style="background:#FAECC8; border:1px solid #FAD67D; padding:1em; margin:auto;"| {{Mono|#FAECC8}} / {{Mono|#FAD67D}}
| style="background:#FAD67D;"|  
<!-- Right column 3 orange -->
|}
=== Wikimedia Foundation ===
The Wikimedia Foundation Design team has [[wmdoc:codex/latest/style-guide/colors.html|provided a color palette]] with colors being marked toward level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.
==Accessibility==
{{main|Wikipedia:Manual of Style/Accessibility/Colors}}
It is best to choose background colors that offer sufficient contrast in relation to text and [[Help:Link color|blue links]], which is also the color of references, both of which are very common in most articles. Use the [https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=3366CC WCAG link contrast checker] to ensure that the chosen background color offers the recommended WCAG AA level of contrast against normal text ({{Legend inline|#202122|{{mono|#202122}}}}) and blue links ({{Legend inline|#3366CC|{{mono|#3366CC}}}} for the default [[Wikipedia:Vector 2022|Vector 2022]] skin).<ref>{{cite web |title=WCAG 2.0 and Link Colors |url=https://webaim.org/blog/wcag-2-0-and-link-colors/ |website=WebAIM Blog |publisher=WebAIM |date=22 July 2009}}</ref>
{| class="wikitable plainrowheaders" style="text-align: center;"
|+ Compatible WCAG AAA background colors against text and links
|-
! scope="col" colspan=4 | Base color
! scope="col" colspan=3 | Darkest backgrounds for dark text
! scope="col" rowspan="2" style="max-width: 7em;" | Lightest background for white text
|-
! scope="col" | Name
! scope="col" | [[HSL and HSV|Hue]]
! scope="col" | [[Hex triplet|Hex]]
! scope="col" | Color
! scope="col" | Text and [[Help:Link color|links]]<br/>(WCAG AA)
! scope="col" | Text only
! scope="col" | Pure black text<br/>(not default)
|-
! scope="row" | Red
| 0°
| {{Mono|#FF0000}}
| style="background-color:#FF0000" |
| style="background-color:#FFE6E6; color:#3366CC;" | {{Mono|#FFE6E6}}
| style="background-color:#FF8888;" | {{Mono|#FF8888}}
| style="background-color:#FF6060; color:#000;" | {{Mono|#FF6060}}
| style="background-color:#B60000; color:#FFF;" | {{Mono|#B60000}}
|-
! scope="row" | Orange
| 30°
| {{Mono|#FF8000}}
| style="background-color:#FF8000" |
| style="background-color:#FFE8D0; color:#3366CC;" | {{Mono|#FFE8D0}}
| style="background-color:#FF8E1C;" | {{Mono|#FF8E1C}}
| style="background-color:#E97500; color:#000;" | {{Mono|#E97500}}
| style="background-color:#8C4600; color:#FFF;" | {{Mono|#8C4600}}
|-
! scope="row" | Yellow
| 60°
| {{Mono|#FFFF00}}
| style="background-color:#FFFF00" |
| style="background-color:#F3F300; color:#3366CC;" | {{Mono|#F3F300}}
| style="background-color:#B1B100;" | {{Mono|#B1B100}}
| style="background-color:#9B9B00; color:#000;" | {{Mono|#9B9B00}}
| style="background-color:#5C5C00; color:#FFF;" | {{Mono|#5C5C00}}
|-
! scope="row" | Chartreuse
| 90°
| {{Mono|#80FF00}}
| style="background-color:#80FF00" |
| style="background-color:#B9FF72; color:#3366CC;" | {{Mono|#B9FF72}}
| style="background-color:#61C100;" | {{Mono|#61C100}}
| style="background-color:#54A900; color:#000;" | {{Mono|#54A900}}
| style="background-color:#326500; color:#FFF;" | {{Mono|#326500}}
|-
! scope="row" | Green
| 120°
| {{Mono|#00FF00}}
| style="background-color:#00FF00" |
| style="background-color:#ABFFAB; color:#3366CC;" | {{Mono|#ABFFAB}}
| style="background-color:#00C700;" | {{Mono|#00C700}}
| style="background-color:#00AE00; color:#000;" | {{Mono|#00AE00}}
| style="background-color:#006800; color:#FFF;" | {{Mono|#006800}}
|-
! scope="row" | Spring green
| 150°
| {{Mono|#00FF80}}
| style="background-color:#00FF80" |
| style="background-color:#9DFFCE; color:#3366CC;" | {{Mono|#9DFFCE}}
| style="background-color:#00C563;" | {{Mono|#00C563}}
| style="background-color:#00AC56; color:#000;" | {{Mono|#00AC56}}
| style="background-color:#006733; color:#FFF;" | {{Mono|#006733}}
|-
! scope="row" | Cyan
| 180°
| {{Mono|#00FFFF}}
| style="background-color:#00FFFF" |
| style="background-color:#7DFFFF; color:#3366CC;" | {{Mono|#7DFFFF}}
| style="background-color:#00BFBF;" | {{Mono|#00BFBF}}
| style="background-color:#00A6A6; color:#000;" | {{Mono|#00A6A6}}
| style="background-color:#006363; color:#FFF;" | {{Mono|#006363}}
|-
! scope="row" | Azure
| 210°
| {{Mono|#0080FF}}
| style="background-color:#0080FF" |
| style="background-color:#DCEEFF; color:#3366CC;" | {{Mono|#DCEEFF}}
| style="background-color:#60B0FF;" | {{Mono|#60B0FF}}
| style="background-color:#3098FF; color:#000;" | {{Mono|#3098FF}}
| style="background-color:#0057AF; color:#FFF;" | {{Mono|#0057AF}}
|-
! scope="row" | Blue
| 240°
| {{Mono|#0000FF}}
| style="background-color:#0000FF" |
| style="background-color:#EAEAFF; color:#3366CC;" | {{Mono|#EAEAFF}}
| style="background-color:#A2A2FF;" | {{Mono|#A2A2FF}}
| style="background-color:#8888FF; color:#000;" | {{Mono|#8888FF}}
| style="background-color:#3030FF; color:#FFF;" | {{Mono|#3030FF}}
|-
! scope="row" | Violet
| 270°
| {{Mono|#8000FF}}
| style="background-color:#8000FF" |
| style="background-color:#F3E7FF; color:#3366CC;" | {{Mono|#F3E7FF}}
| style="background-color:#C994FF;" | {{Mono|#C994FF}}
| style="background-color:#B974FF; color:#000;" | {{Mono|#B974FF}}
| style="background-color:#7600EC; color:#FFF;" | {{Mono|#7600EC}}
|-
! scope="row" | Magenta
| 300°
| {{Mono|#FF00FF}}
| style="background-color:#FF00FF" |
| style="background-color:#FFE3FF; color:#3366CC;" | {{Mono|#FFE3FF}}
| style="background-color:#FF73FF;" | {{Mono|#FF73FF}}
| style="background-color:#FF29FF; color:#000;" | {{Mono|#FF29FF}}
| style="background-color:#9F009F; color:#FFF;" | {{Mono|#9F009F}}
|-
! scope="row" | Rose
| 330°
| {{Mono|#FF0080}}
| style="background-color:#FF0080" |
| style="background-color:#FFE4F1; color:#3366CC;" | {{Mono|#FFE4F1}}
| style="background-color:#FF81C0;" | {{Mono|#FF81C0}}
| style="background-color:#FF52A8; color:#000;" | {{Mono|#FF52A8}}
| style="background-color:#B00058; color:#FFF;" | {{Mono|#B00058}}
|-
! scope="row" | Grey
| —
| {{Mono|808080}}
| style="background-color:#808080" |
| style="background-color:#EBEBEB; color:#3366CC;" | {{Mono|#EBEBEB}}
| style="background-color:#ABABAB;" | {{Mono|#ABABAB}}
| style="background-color:#959595; color:#000;" | {{Mono|#959595}}
| style="background-color:#595959; color:#FFF;" | {{Mono|#595959}}
|}
===Schemes for colour-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 colour 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 colours which are distinguishable to most colour-blind people, although colour 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: 1px solid black;"
|- style="vertical-align:top;text-align:center;"
! Colour 1 !! Colour 2 !! Colour 3 !! Colour 4 !! Colour 5 !! Colour 6
|-
| rowspan="4" style="background: white; color: black;" | White
| rowspan="2" style="background: yellow; color: black;"| Yellow
| rowspan="2" style="background: blue; color: white;" | Blue
| style="background: red; color: white;" | Red
| rowspan="4" style="background: black; color: white;" | Black
| rowspan="2" style="background: gray; color: white;" | Grey
|-
| style="background: green; color: white;" | Green
|-
| rowspan="2" style="background: lime; color: black;"| Lime
| rowspan="2" style="background: purple; color: white;" | Purple
| style="background: brown; color: white;" | Brown
| style="background: cyan; color: black;" | Cyan
|-
| style="background: orange; color: black;" | Orange
| style="background: pink; color: black;" | Pink
|}
* Pick a maximum of one colour from each column. Do not use more than one colour from any one column.
* Use large expanses of the colour. If you're colouring text, use bold and a large font.
* For small expanses of colour, such as thin lines, clearly label them with text, or use non-colour 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 colours, like children's crayons. Do not use light or dark variants of the colours.
* If you need more colours... hard luck. Instead use non-colour 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 colour-blind yourself, check your revised image with a colour-sighted person to confirm the meaning is intact.
The following utilities may be of use in determining whether a revised image is distinguishable to colour-blind users. Typically they take a web page or image file as an input, and render a colour-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.
==Colour 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 colour ramps, or a colour map chosen to deliberately highlight certain features, are preferable. Diverging colour ramps (two colour extremes around a white or black neutral value) tend to hide some high-frequency features.
Colours have cultural connotations; pick ones that match your data. That is, a diverging colour 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 colour scale for scientific graphics |url=https://betterfigures.org/2015/06/23/picking-a-colour-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 }}
== Contrast checking tools ==
{{seealso|Wikipedia:Manual of Style/Accessibility/CSS colors for text on white}}
{{see|Wikipedia:Tools}}
{{short|WP:COLORTOOLS|H:COLORTOOLS}}
You can use an online tool or software to check the color contrast ratio:<!-- Limit to 3 to 5 -->
* {{URL|https://webaim.org/resources/contrastchecker/|WebAIM contrast checker}}
* {{URL|https://whocanuse.com/|WhoCanUse}}
* [[File:Font Awesome 5 solid laptop-code.svg|18px|Warning: External software program]]{{nbsp}}{{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser application}}
Before using a tool, check if it supports [[Web Content Accessibility Guidelines|WCAG 2.0]], as older tools based on WCAG 1.0 are outdated.
==== Additional tools for color scheme selection ====
* [[wmdoc:codex/latest/style-guide/colors.html|Codex Style Guide for Wikimedia]]
* Chrome {{URL|https://developer.chrome.com/docs/devtools/accessibility/contrast|color contrast debugger}} (with a visual guide and built-in color-picker).
* {{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser}} (downloadable software for precise contrast checks; be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference", which is outdated.).
* {{URL|https://paletton.com/|Paletton}} (formerly Color Scheme Designer) helps select suitable color schemes for a graphical chart.
* {{URL|https://colorbrewer2.org/|Color Brewer 2.0}} provides color-blind-friendly color schemes for maps.
* {{URL|https://personal.sron.nl/~pault/#fig:scheme_light|Light qualitative color scheme}} provides a set of nine colors that work well for color-blind users and black text labels.
* {{URL|https://www.toptal.com/designers/colorfilter|ColorFilter}} simulates color-blind vision
* {{URL|https://www.color-blindness.com/coblis-color-blindness-simulator/|Coblis Color-blindness simulator}}
* Firefox {{URL|https://addons.mozilla.org/en-US/firefox/addon/nocoffee/|NoCoffee}}
==== Color palettes ====
The Wikimedia Foundation Design team {{URL|https://doc.wikimedia.org/codex/latest/style-guide/colors.html|has provided a color palette}} for AA-level contrast compliance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text color.
For AAA-compliant color pairings for different text types (black text, white text, links, and visited links), refer to the table at [[Wikipedia:Manual of Style/Accessibility/Colors]]. For named CSS-based text colors on a white background, refer to [[Wikipedia:Manual of Style/Accessibility/CSS colors for text on white|Wikipedia:Manual of Style/Accessibility/CSS colors]] for recommended colors
==See also==
===Templates===
*To colour text and background:
** [[Template:Font color]]
*To provide example squares of colour:
** [[Template:Color sample]]
** [[Template:Swatch]]
** [[Template:Swatch inline]]
===Related help pages===
* {{slink|Wikipedia:Manual of Style/Accessibility|Color}}
* [[Wikipedia:Manual of Style/Accessibility/Colors]]
* [[Help:How to reduce colors for saving a JPEG as PNG]]
* [[Help:Link color]]
* [[Help:Displaying a formula#Color]]
* [[Wikipedia:Infobox colours]] – inactive
* [[Wikipedia:WikiProject Usability/Color]] – inactive
===Somewhat related pages===
* {{slink|Wikipedia:Manual of Style/Text formatting|Color}}
* [[Wikipedia:Template standardisation]]
* [[Wikipedia:WikiProject Color]]
===Encyclopedia articles===
* [[Colour picker]]
* [[Web colours]]
===Lists of colours===
*[[Lists of colours]]
*Template that list colours
** {{tl|Colornames}}
** {{tl|Formula Supported Named Colors}}
** {{tl|X11 color chart}}
** {{tl|Web Colors}}
===Guide to colours===
{{Web Colors|state=plain}}
==References==
{{reflist}}
{{Wikipedia technical help|collapsed}}
[[Category:Wikipedia accessibility|Colours]]
| |||