Help:Using colours: Difference between revisions

Browse history interactively

← Previous edit

Content deleted Content added

VisualWikitext

Revision as of 05:06, 17 April 2006 edit Omniplex (talk \| contribs) 5,865 edits m better readable (?) - tricky COLO(U)R left as comment ← Previous edit		Latest revision as of 21:04, 20 August 2025 edit undo FaviFake (talk \| contribs) Extended confirmed users 3,201 edits →Colour generation guide: it's not in page linked
(344 intermediate revisions by more than 100 users not shown)
Line 1: {{Short description\|Wikimedia help page}} ~~{{style-guideline\|[[WP:COLOR]]<br />[[WP:COLOUR]]}}~~ {{redirect\|WP:COLOURS\|MOS guidelines on color use in articles\|MOS:COLOR}} ~~<!-- {{style-guideline\|[[WP:COLOR\|WP:COLO]][[WP:COLOUR\|(U)]][[WP:COLOR\|R]]}} -->~~ {{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}} ~~'''Colours''' are most commonly found in Wikipedia articles within [[Wikipedia:Template namespace\|templates]] and [[Wikipedia:How to use tables\|tables]].~~ {{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). ~~If you are looking for a colour, see:~~ [[Web colors]] [[List of colors]] 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. ~~To use a colour in a [[wikipedia:template\|template]] or [[wikipedia:table\|table]] you can use the hex triplet. Example: bronze is #CD7F32.~~ For color tables and a color pallette, see [[MOS:COLORS]]. For the WikiProject, see [[Wikipedia:WikiProject Color]]. ~~Alternatively, some common colours can be referred to by name ([[Web_colors#HTML_color_names\|HTML 4 colours]]). Orange is also included. Example: green.~~ ==~~Wikimedia~~Overriding font colour{{anchors\|Overriding font ~~schemes~~color}}== To apply colour to text, use: ~~===Wikipedia===~~ <code><nowiki><span style="color:</nowiki>''hex triplet or colour name''<nowiki>">text</span></nowiki></code> ~~Wikipedia uses this colour scheme on its [[Main Page]].~~ ~~:''Please note that the colour for the border on the larger boxes is also the colour of the backgrounds of the smaller (title) boxes.''~~ Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext. ~~<!-- legacy XHTML table visible with any browser -->~~ ~~<!-- green blue purple grey-->~~ 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> ~~\| style="border: 1px solid #cef2e0; padding: 1em; margin: auto" bgcolor="#f5fffa" \| background:<tt>#f5fffa</tt> border:<tt>#cef2e0</tt> \|\| bgcolor="#cef2e0" \|  ~~ <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> ~~\| style="border: 1px solid #a3bfb1; padding: 1em; margin: auto" bgcolor="#cef2e0" \| background:<tt>#cef2e0</tt> border:<tt>#a3bfb1</tt> \|\| bgcolor="#a3bfb1" \|  ~~ <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> ~~\| style="border: 1px solid #cedff2; padding: 1em; margin: auto" bgcolor="#f5faff" \| background:<tt>#f5faff</tt> border:<tt>#cedff2</tt> \|\| bgcolor="#cedff2" \|  ~~ ~~\| style="border: 1px solid #a3b0bf; padding: 1em; margin: auto" bgcolor="#cedff2" \| background:<tt>#cedff2</tt> border:<tt>#a3b0bf</tt> \|\| bgcolor="#a3b0bf" \|  ~~ \|- !   !!   !! colspan="3" style="text-align:right" \| <small>Note: for layouts with no spacing between borders, use the darker border colour.</small> ~~\| style="border: 1px solid #ddcef2; padding: 1em; margin: auto" bgcolor="#faf5ff" \| background:<tt>#faf5ff</tt> border:<tt>#ddcef2</tt> \|\| bgcolor="#ddcef2" \|  ~~ ~~\| style="border: 1px solid #afa3bf; padding: 1em; margin: auto" bgcolor="#ddcef2" \| background:<tt>#ddcef2</tt> border:<tt>#afa3bf</tt> \|\| bgcolor="#afa3bf" \|  ~~ \|- \| 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="border: 1px solid #cccccc; padding: 1em; margin: auto" bgcolor="#fcfcfc" \| background:<tt>#fcfcfc</tt> border:<tt>#cccccc</tt> \|\| bgcolor="#cccccc" \|  ~~ \|- \| 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}}== ~~And additionally at the [[Community Portal]]:~~ ===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 ~~\| style="border: 1px solid #f2e6ce; padding: 1em; margin: auto" bgcolor="#FFFCF5" \| background:<tt>#FFFCF5</tt> border:<tt>#f2e6ce</tt> \|\| bgcolor="#f2e6ce" \|  ~~ \|- ~~\| style="border: 1px solid #d9ceb8; padding: 1em; margin: auto" bgcolor="#f2e6ce" \| background:<tt>#f2e6ce</tt> border:<tt>#d9ceb8</tt> \|\| bgcolor="#d9ceb8" \|  ~~ \| 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. {\| ~~<!-- Left column 3 blue -->~~ !colspan=2\| Light Box<br/>background / border !!colspan=2\| Title<br/>background / border ~~{\| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100% background-color:white"~~ \|- ~~\| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background-color:#f1f5fc;" \|~~ ~~<div~~\| style="background:#F1F5FC; border~~-bottom~~:1px solid #~~abd5f5; background-color:#d0e5f5~~ABD5F5; padding:~~0.2em 0.5em 0.2em 0.5em~~1em; ~~font-size~~margin:~~110%; font-weight:bold~~auto;"~~>background~~\| ~~colour:~~{{Mono\|#F1F5FC}} ~~#d0e5f5<~~/~~div>~~ {{Mono\|#ABD5F5}} \| style="background:#ABD5F5;"\|   ~~<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em 1em;">~~ \| style="background:#D0E5F5; border:1px solid #ABD5F5; padding:1em; margin:auto;"\| {{Mono\|#D0E5F5}} / {{Mono\|#ABD5F5}} ~~background colour: #f1f5fc<br />~~ \| style="background:#ABD5F5;"\|   ~~border colour: #abd5f5</div>~~ \|- ~~\| style="padding:0em 0.5em 0em 0.5em;" \|~~ \| 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 --> ~~\| style="width:50%; vertical-align:top; border:1px solid #fad67d; background-color:#faf6ed;" \|~~ ~~<div style="border-bottom:1px solid #fad67d; background-color:#faecc8; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #faecc8</div>~~ ~~<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em 1em;">~~ ~~background colour: #faf6ed<br />~~ ~~border colour: #fad67d</div>~~ \|} === Wikimedia Foundation === ~~==Examples==~~ 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. {{tl\|HD header}} {{tl\|Hinduism footer small}} ==Accessibility== Infoboxes on year pages: [[1822]] {{main\|Wikipedia:Manual of Style/Accessibility/Colors}} Many [[Wikipedia:Userboxes\|userboxes]] use colour 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=== [[Wikipedia:Infobox colours]] To colour text and background: [[Wikipedia:WikiProject Color]] - inactive * [[Template:Font color]] [[Wikipedia:WikiProject Usability/Color]] - inactive 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]]