Content deleted Content added
add notice |
→Colour generation guide: it's not in page linked |
||
| (22 intermediate revisions by 5 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}}==
Line 35 ⟶ 37:
==<span id="Color generation guide">Colour generation guide</span>==
{{
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]].
Line 45 ⟶ 47:
! !! !! 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;" |
|-
| style="background:#FF2A00; color:white; text-align:center;" |
|-
| style="background:#FF5500; color:white; text-align:center;" |
|-
| style="background:#FF8000; color:white; text-align:center;" |
|-
| style="background:#FFAA00; color:black; text-align:center;" |
|-
| style="background:#FFD500; color:black; text-align:center;" |
|-
| style="background:#FFFF00; color:black; text-align:center;" |
|-
| style="background:#D4FF00; color:black; text-align:center;" |
|-
| style="background:#AAFF00; color:black; text-align:center;" |
|-
| style="background:#80FF00; color:black; text-align:center;" |
|-
| style="background:#5EFF00; color:black; text-align:center;" |
|-
| style="background:#2BFF00; color:black; text-align:center;" |
|-
| style="background:#00FF00; color:black; text-align:center;" |
|-
| style="background:#00FF2A; color:black; text-align:center;" |
|-
| style="background:#00FF55; color:black; text-align:center;" |
|-
| style="background:#00FF80; color:black; text-align:center;" |
|-
| style="background:#00FFAA; color:black; text-align:center;" |
|-
| style="background:#00FFD5; color:black; text-align:center;" |
|-
| style="background:#00FFFF; color:black; text-align:center;" |
|-
| style="background:#00D5FF; color:black; text-align:center;" |
|-
| style="background:#00AAFF; color:white; text-align:center;" |
|-
| style="background:#0080FF; color:white; text-align:center;" |
|-
| style="background:#0055FF; color:white; text-align:center;" |
|-
| style="background:#002AFF; color:white; text-align:center;" |
|-
| style="background:#0000FF; color:white; text-align:center;" |
|-
| style="background:#2B00FF; color:white; text-align:center;" |
|-
| style="background:#5500FF; color:white; text-align:center;" |
|-
| style="background:#8000FF; color:white; text-align:center;" |
|-
| style="background:#AA00FF; color:white; text-align:center;" |
|-
| style="background:#D400FF; color:white; text-align:center;" |
|-
| style="background:#FF00FF; color:white; text-align:center;" |
|-
| style="background:#FF00D4; color:white; text-align:center;" |
|-
| style="background:#FF00AA; color:white; text-align:center;" |
|-
| style="background:#FF0080; color:white; text-align:center;" |
|-
| style="background:#FF0055; color:white; text-align:center;" |
|-
| style="background:#FF002B; color:white; text-align:center;" |
|-
| style="background:#000000; color:white; text-align:center;" |
|}
Line 123 ⟶ 125:
===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]].
{{
{|
! Hue !!colspan=2| Light Box<br/>background / border !!colspan=2| Title<br/>background / border
|-
|
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"|
| style="background:# | style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"|
| style="background:#A3BFB1;"|   <!--From today's featured article; Did you know ...-->
|-
|
| style="background:#F5FAFF; border:1px solid #
| style="background:# | style="background:#
| style="background:#A3B1BF;"|  
<!--In the news; On this day-->
|-
|
| style="background:#FAF5FF; border:1px solid #
| style="background:# | style="background:#
| style="background:#AFA3BF;"|  
<!--Today's featured picture-->
|-
|
| style="background:#FFF5FA; border:1px solid #
| style="background:# | style="background:#
| style="background:#BFA3AF;"|  
|}▼
<!--From today's featured list-->
{|▼
|-
| 30°
| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"|
| style="background:#F2E0CE;"|   | style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"|
| 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|
| style="background:#ABD5F5;"|  
| style="background:#D0E5F5; border:1px solid #ABD5F5; padding:1em; margin:auto;"| {{Mono|#D0E5F5}} / {{Mono|#ABD5F5}}
| style="
|-
| 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 -->
|}
Line 196 ⟶ 207:
! 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}}
|}
Line 361 ⟶ 372:
*{{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==
| |||