Help:Using colours

This help page is a how-to guide.

It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community.

Shortcuts

To use a colour in a template or table you can use the hex triplet (e.g. bronze is #CD7F32) or HTML colour names (e.g. red).

Overriding font colour[edit]

To make a word have colour, use: text

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

Examples:

red writing shows as red writing
green writing shows as green writing
blue writing shows as blue writing

Template font colour [edit]

Template:Font color, or its redirect Template:Font colour, can also be used.

{{Font colour|fontcolour|backgroundcolour|Your text here}}

Example	Result
`{{font color\|red\|This text is different}}`	This text is different to change text-color only (Note: do not style text as a link)
`{{font color\|red\|yellow\|This text is different}}`	This text is different to change text and background color
`{{font color\|\|yellow\|This text is different}}`	This text is different to change background color only note the two pipe-characters `\|\|`

Colour generation guide[edit]

The method used for selecting the colours for various top-level pages, e.g. Main Page, Community Portal, Contents, and Help:Contents.
The 3 colours are generated using the HSV colour space, then translated into RGB.

Hue	Saturation 4% Brightness 100% main background	Saturation 10% Brightness 100% 2nd header, accent colour	Saturation 15% Brightness 95% main border header background	Saturation 15% Brightness 75% header border only
		Note: for layouts with no spacing between borders, use the darker border colour.
Hue: 0	#FFF5F5	#FFE6E6	#F2CECE	#BFA3A3
Hue: 10	#FFF7F5	#FFEAE6	#F2D4CE	#BFA7A3
Hue: 20	#FFF8F5	#FFEEE6	#F2DACE	#BFACA3
Hue: 30	#FFFAF5	#FFF2E6	#F2E0CE	#BFB1A3
Hue: 40	#FFFCF5	#FFF7E6	#F2E6CE	#BFB6A3
Hue: 50	#FFFDF5	#FFFBE6	#F2ECCE	#BFBAA3
Hue: 60	#FFFFF5	#FFFFE6	#F2F2CE	#BFBFA3
Hue: 70	#FDFFF5	#FBFFE6	#ECF2CE	#BABFA3
Hue: 80	#FCFFF5	#F7FFE6	#E6F2CE	#B6BFA3
Hue: 90	#FAFFF5	#F2FFE6	#E0F2CE	#B1BFA3
Hue: 100	#F8FFF5	#EEFFE6	#DAF2CE	#ACBFA3
Hue: 110	#F7FFF5	#EAFFE6	#D4F2CE	#A7BFA3
Hue: 120	#F5FFF5	#E6FFE6	#CEF2CE	#A3BFA3
Hue: 130	#F5FFF7	#E6FFEA	#CEF2D4	#A3BFA7
Hue: 140	#F5FFF8	#E6FFEE	#CEF2DA	#A3BFAC
Hue: 150	#F5FFFA	#E6FFF2	#CEF2E0	#A3BFB1
Hue: 160	#F5FFFC	#E6FFF7	#CEF2E6	#A3BFB6
Hue: 170	#F5FFFD	#E6FFFB	#CEF2EC	#A3BFBA
Hue: 180	#F5FFFF	#E6FFFF	#CEF2F2	#A3BFBF
Hue: 190	#F5FDFF	#E6FBFF	#CEECF2	#A3BABF
Hue: 200	#F5FCFF	#E6F7FF	#CEE6F2	#A3B6BF
Hue: 210	#F5FAFF	#E6F2FF	#CEE0F2	#A3B1BF
Hue: 220	#F5F8FF	#E6EEFF	#CEDAF2	#A3ACBF
Hue: 230	#F5F7FF	#E6EAFF	#CED4F2	#A3A7BF
Hue: 240	#F5F5FF	#E6E6FF	#CECEF2	#A3A3BF
Hue: 250	#F7F5FF	#EAE6FF	#D4CEF2	#A7A3BF
Hue: 260	#F8F5FF	#EEE6FF	#DACEF2	#ACA3BF
Hue: 270	#FAF5FF	#F2E6FF	#E0CEF2	#B1A3BF
Hue: 280	#FCF5FF	#F7E6FF	#E6CEF2	#B6A3BF
Hue: 290	#FDF5FF	#FBE6FF	#ECCEF2	#BAA3BF
Hue: 300	#FFF5FF	#FFE6FF	#F2CEF2	#BFA3BF
Hue: 310	#FFF5FD	#FFE6FB	#F2CEEC	#BFA3BA
Hue: 320	#FFF5FC	#FFE6F7	#F2CEE6	#BFA3B6
Hue: 330	#FFF5FA	#FFE6F2	#F2CEE0	#BFA3B1
Hue: 340	#FFF5F8	#FFE6EE	#F2CEDA	#BFA3AC
Hue: 350	#FFF5F7	#FFE6EA	#F2CED4	#BFA3A7
H: 0 S: 0	#FFFFFF	#F9F9F9	#F2F2F2	#BFBFBF

Easily generate similar palettes, from different starting hues, using colorblender.com

Wikimedia colour schemes[edit]

Wikipedia[edit]

Wikipedia uses this colour scheme on its Main Page.

Note: the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.

Hue: 150	background:`#F5FFFA` border:`#CEF2E0`	background:`#CEF2E0` border:`#A3BFB1`
Hue: 210	background:`#F5FAFF` border:`#CEE0F2`	background:`#CEE0F2` border:`#A3B1BF`
Hue: 270	background:`#FAF5FF` border:`#E0CEF2`	background:`#E0CEF2` border:`#B1A3BF`
Hue: 330	background:`#FFF5FA` border:`#F2CEE0`	background:`#F2CEE0` border:`#BFA3B1`

And additionally on the Community Portal:

Hue: 030

background:#FFFAF5 border:#F2E0CE

background:#F2E0CE border:#BFB1A3

Additional 3-colour palettes using this same generation scheme are at the top of the talk page. In the Monobook skin, the background colour of Wikipedia pages is #F8FCFF. In the Vector skin, the background colour on all pages is #FFFFFF.

Commons[edit]

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.

background colour: #d0e5f5

background colour: #f1f5fc

border colour: #abd5f5

background colour: #faecc8

background colour: #faf6ed

border colour: #fad67d

Schemes for color-blind readers[edit]

Shortcut

H:Colorblind

Approximately one in ten white males (and a substantial number of people in other demographics) have red-green color vision deficiency; this and other types of color vision deficiency affect around one in two hundred people of all races and sexes.^[1] If you must use color to convey meaning or make distinctions between visual items (i.e. not merely for decoration), then this table shows "safe" groups of colors which are distinguishable to most color-blind people.

White

Yellow

Blue

Purple

Red

Green

Brown

Grey

Black

Pick a maximum of one color from each box. Do not use more than one color from any one box.
Use large expanses of the color. If you're coloring text, use bold and a large font.
For small expanses of color, such as thin lines, clearly label them with text, or use non-color techniques such as font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).
Use bright mid-range colors, like children's crayons. Do not use light or dark variants of the colors.
If you need more colors... hard luck. Instead use non-color 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 color-blind yourself, check your revised image with a color-sighted person to confirm the meaning is intact.

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

Mozilla Firefox color-blind addons
Sim Daltonism for Mac OSX. Freeware.
Color Oracle full-screen real-time simulator. For Linux, Mac OSX and Windows. Freeware.

Colour ramps[edit]

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 colourmap chosen to deliberately highlight certain features, are preferable. Diverging colourramps (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 colourramp with extremes "hot, cold" will be easier to understand than the reverse ("blue, red" is even worse).

McNeall, Doug (23 June 2015). "Picking a colour scale for scientific graphics". Better Figures.
"Elegant Figures - Subtleties of Color (Part 1 of 6)". earthobservatory.nasa.gov. 1 February 2020.
Rougier, Nicolas P.; Droettboom, Michael; Bourne, Philip E. (11 September 2014). "Ten Simple Rules for Better Figures". PLoS Computational Biology. 10 (9): e1003833. doi:10.1371/journal.pcbi.1003833.

See also[edit]

Templates

To colour text and background:
- Template:Font color
To provide example squares of colour:
Template with color names

Web Colors

HTML name	Hex code `R G B`	Decimal code `R G B`
Pink colors
`Pink`	`FF C0 CB`	`255 192 203`
`LightPink`	`FF B6 C1`	`255 182 193`
`HotPink`	`FF 69 B4`	`255 105 180`
`DeepPink`	`FF 14 93`	`255 20 147`
`PaleVioletRed`	`DB 70 93`	`219 112 147`
`MediumVioletRed`	`C7 15 85`	`199 21 133`
Red colors
`LightSalmon`	`FF A0 7A`	`255 160 122`
`Salmon`	`FA 80 72`	`250 128 114`
`DarkSalmon`	`E9 96 7A`	`233 150 122`
`LightCoral`	`F0 80 80`	`240 128 128`
`IndianRed`	`CD 5C 5C`	`205 92 92`
`Crimson`	`DC 14 3C`	`220 20 60`
`FireBrick`	`B2 22 22`	`178 34 34`
`DarkRed`	`8B 00 00`	`139 0 0`
`Red`	`FF 00 00`	`255 0 0`
Orange colors
`OrangeRed`	`FF 45 00`	`255 69 0`
`Tomato`	`FF 63 47`	`255 99 71`
`Coral`	`FF 7F 50`	`255 127 80`
`DarkOrange`	`FF 8C 00`	`255 140 0`
`Orange`	`FF A5 00`	`255 165 0`
`Gold`	`FF D7 00`	`255 215 0`
Yellow colors
`Yellow`	`FF FF 00`	`255 255 0`
`LightYellow`	`FF FF E0`	`255 255 224`
`LemonChiffon`	`FF FA CD`	`255 250 205`
`LightGoldenrodYellow`	`FA FA D2`	`250 250 210`
`PapayaWhip`	`FF EF D5`	`255 239 213`
`Moccasin`	`FF E4 B5`	`255 228 181`
`PeachPuff`	`FF DA B9`	`255 218 185`
`PaleGoldenrod`	`EE E8 AA`	`238 232 170`
`Khaki`	`F0 E6 8C`	`240 230 140`
`DarkKhaki`	`BD B7 6B`	`189 183 107`
Brown colors
`Cornsilk`	`FF F8 DC`	`255 248 220`
`BlanchedAlmond`	`FF EB CD`	`255 235 205`
`Bisque`	`FF E4 C4`	`255 228 196`
`NavajoWhite`	`FF DE AD`	`255 222 173`
`Wheat`	`F5 DE B3`	`245 222 179`
`BurlyWood`	`DE B8 87`	`222 184 135`
`Tan`	`D2 B4 8C`	`210 180 140`
`RosyBrown`	`BC 8F 8F`	`188 143 143`
`SandyBrown`	`F4 A4 60`	`244 164 96`
`Goldenrod`	`DA A5 20`	`218 165 32`
`DarkGoldenrod`	`B8 86 0B`	`184 134 11`
`Peru`	`CD 85 3F`	`205 133 63`
`Chocolate`	`D2 69 1E`	`210 105 30`
`SaddleBrown`	`8B 45 13`	`139 69 19`
`Sienna`	`A0 52 2D`	`160 82 45`
`Brown`	`A5 2A 2A`	`165 42 42`
`Maroon`	`80 00 00`	`128 0 0`
Green colors
`DarkOliveGreen`	`55 6B 2F`	`85 107 47`
`Olive`	`80 80 00`	`128 128 0`
`OliveDrab`	`6B 8E 23`	`107 142 35`
`YellowGreen`	`9A CD 32`	`154 205 50`
`LimeGreen`	`32 CD 32`	`50 205 50`
`Lime`	`00 FF 00`	`0 255 0`
`LawnGreen`	`7C FC 00`	`124 252 0`
`Chartreuse`	`7F FF 00`	`127 255 0`
`GreenYellow`	`AD FF 2F`	`173 255 47`
`SpringGreen`	`00 FF 7F`	`0 255 127`
`MediumSpringGreen`	`00 FA 9A`	`0 250 154`
`LightGreen`	`90 EE 90`	`144 238 144`
`PaleGreen`	`98 FB 98`	`152 251 152`
`DarkSeaGreen`	`8F BC 8F`	`143 188 143`
`MediumSeaGreen`	`3C B3 71`	`60 179 113`
`SeaGreen`	`2E 8B 57`	`46 139 87`
`ForestGreen`	`22 8B 22`	`34 139 34`
`Green`	`00 80 00`	`0 128 0`
`DarkGreen`	`00 64 00`	`0 100 0`
Cyan colors
`MediumAquamarine`	`66 CD AA`	`102 205 170`
`Cyan`	`00 FF FF`	`0 255 255`
`LightCyan`	`E0 FF FF`	`224 255 255`
`PaleTurquoise`	`AF EE EE`	`175 238 238`
`Aquamarine`	`7F FF D4`	`127 255 212`
`Turquoise`	`40 E0 D0`	`64 224 208`
`MediumTurquoise`	`48 D1 CC`	`72 209 204`
`DarkTurquoise`	`00 CE D1`	`0 206 209`
`LightSeaGreen`	`20 B2 AA`	`32 178 170`
`CadetBlue`	`5F 9E A0`	`95 158 160`
`DarkCyan`	`00 8B 8B`	`0 139 139`
`Teal`	`00 80 80`	`0 128 128`
Blue colors
`LightSteelBlue`	`B0 C4 DE`	`176 196 222`
`PowderBlue`	`B0 E0 E6`	`176 224 230`
`LightBlue`	`AD D8 E6`	`173 216 230`
`SkyBlue`	`87 CE EB`	`135 206 235`
`LightSkyBlue`	`87 CE FA`	`135 206 250`
`DeepSkyBlue`	`00 BF FF`	`0 191 255`
`DodgerBlue`	`1E 90 FF`	`30 144 255`
`CornflowerBlue`	`64 95 ED`	`100 149 237`
`SteelBlue`	`46 82 B4`	`70 130 180`
`RoyalBlue`	`41 69 E1`	`65 105 225`
`Blue`	`00 00 FF`	`0 0 255`
`MediumBlue`	`00 00 CD`	`0 0 205`
`DarkBlue`	`00 00 8B`	`0 0 139`
`Navy`	`00 00 80`	`0 0 128`
`MidnightBlue`	`19 19 70`	`25 25 112`
Purple colors
`Lavender`	`E6 E6 FA`	`230 230 250`
`Thistle`	`D8 BF D8`	`216 191 216`
`Plum`	`DD A0 DD`	`221 160 221`
`Violet`	`EE 82 EE`	`238 130 238`
`Orchid`	`DA 70 D6`	`218 112 214`
`Magenta`	`FF 00 FF`	`255 0 255`
`MediumOrchid`	`BA 55 D3`	`186 85 211`
`MediumPurple`	`93 70 DB`	`147 112 219`
`BlueViolet`	`8A 2B E2`	`138 43 226`
`DarkViolet`	`94 00 D3`	`148 0 211`
`DarkOrchid`	`99 32 CC`	`153 50 204`
`DarkMagenta`	`8B 00 8B`	`139 0 139`
`Purple`	`80 00 80`	`128 0 128`
`Indigo`	`4B 00 82`	`75 0 130`
`DarkSlateBlue`	`48 3D 8B`	`72 61 139`
`SlateBlue`	`6A 5A CD`	`106 90 205`
`MediumSlateBlue`	`7B 68 EE`	`123 104 238`
White/Gray/Black colors
`White`	`FF FF FF`	`255 255 255`
`Snow`	`FF FA FA`	`255 250 250`
`Honeydew`	`F0 FF F0`	`240 255 240`
`MintCream`	`F5 FF FA`	`245 255 250`
`Azure`	`F0 FF FF`	`240 255 255`
`AliceBlue`	`F0 F8 FF`	`240 248 255`
`GhostWhite`	`F8 F8 FF`	`248 248 255`
`WhiteSmoke`	`F5 F5 F5`	`245 245 245`
`Seashell`	`FF F5 EE`	`255 245 238`
`Beige`	`F5 F5 DC`	`245 245 220`
`OldLace`	`FD F5 E6`	`253 245 230`
`FloralWhite`	`FF FA F0`	`255 250 240`
`Ivory`	`FF FF F0`	`255 255 240`
`AntiqueWhite`	`FA EB D7`	`250 235 215`
`Linen`	`FA F0 E6`	`250 240 230`
`LavenderBlush`	`FF F0 F5`	`255 240 245`
`MistyRose`	`FF E4 E1`	`255 228 225`
`Gainsboro`	`DC DC DC`	`220 220 220`
`LightGray`	`D3 D3 D3`	`211 211 211`
`Silver`	`C0 C0 C0`	`192 192 192`
`DarkGray`	`A9 A9 A9`	`169 169 169`
`Gray`	`80 80 80`	`128 128 128`
`DimGray`	`69 69 69`	`105 105 105`
`LightSlateGray`	`77 88 99`	`119 136 153`
`SlateGray`	`70 80 90`	`112 128 144`
`DarkSlateGray`	`2F 4F 4F`	`47 79 79`
`Black`	`00 00 00`	`0 0 0`

Related help pages

Wikipedia:Accessibility § Color
Wikipedia:Link color
Wikipedia:How to reduce colors for saving a JPEG as PNG
Wikipedia:Infobox colours – inactive
Wikipedia:WikiProject Usability/Color – inactive

Somewhat related pages

Encyclopedia articles

References[edit]

^ Kalloniatis, Michael; Luu, Charles. "Color Perception". Retrieved 18 May 2019.

[KallColor-1] Kalloniatis, Michael; Luu, Charles. "Color Perception". Retrieved 18 May 2019.

[1]

v t e Wikipedia technical help
Get personal technical help at the Teahouse, Help desk, Village pump (technical), talk pages or IRC.
General technical help	Editing Edit toolbar CharInsert Edit conflict Reverting VisualEditor User guide Create a page Page history Page information Page name Introduction Browser notes Keyboard shortcuts Troubleshooting Bypass cache Mobile access Multilingual support Special Characters Entering Printing User access levels Software notices Editnotice IRC Tutorial
Special page related	Special page help Searching Linksearch Logging in Reset passwords Notifications/Echo FAQ Moving a page Fixing cut-and-paste moves Watching pages User contributions Emailing users Random pages Logs What links here Related changes Recent changes Pending changes Page Curation Page import Edit filter Tags
Wikitext	Wikitext main page Cheatsheet Colours use Columns Line-break handling Lists Magic words For beginners Conditional expressions Switch parser function Time function Redirects Sections and TOCs Tables Introduction Basics Conditional tables Sorting Collapsing Advanced table formatting
Links and diffs	URLs Links Permanent link Interwikimedia links Interlanguage links Link color Pipe trick Colon trick Magic links Diffs Simplest diff guide Simple diff and link guide Complete diff and link guide
Media files: images, videos and sounds	Media help Options to hide an image Uploading images Introduction Files Creation and usage Moving files to Commons Visual file markup Images Preparing images for upload Picture tutorial Extended image syntax Gallery tag Graphics tutorials Basic bitmap image editing How to improve image quality Graphics Lab resources Sound file markup SVG help
Other graphics	Family trees Graphs and charts How to create To scale charts Barcharts Math formula Math symbols Rendering math LaTeX symbols Musical scores Musical symbols Timeline EasyTimeline syntax WikiHiero syntax
Templates and Lua modules	Templates Template index Citation templates Transclusion Labeled section Substitution Advanced template coding Template limits Template sandbox and test cases Template documentation Purge Job queue Lua help Lua project To do Resources Guide to Scribbling
Data structure	Namespaces Main/Article Talk namespaces Archiving User User page design Project/Wikipedia File File description page MediaWiki Bug reports and feature requests System message Template Help Category Portal Draft TimedText Module/Lua Special
HTML and CSS	HTML in wikitext Markup validation Span tags Cascading Style Sheets Catalogue of CSS classes Useful styles Classes used in microformats Ambox classes Common.js and common.css User CSS for monospaced coding font
Customisation and tools	Preferences Skins Customizing watchlists Hide pages Gadgets Beta Features User scripts Guide Techniques IRC Scripts User styles Tools Navigation shortcuts Browser tools Alternative browsing Editing tools Optimum tool set Cleaning up vandalism tools Citation tools Wikimedia Cloud Services
Automating editing	Bots Creating Twinkle HotCat WPCleaner igloo AutoWikiBrowser Navigation popups STiki AfC helper script Huggle
See also: Category:Wikipedia information pages Category:Wikipedia how-to Further navigation at: Help pages Administrators Templates Referencing Citation metadata Accessibility Bots User scripts Accounts

Help:Using colours

Contents

Overriding font colour[edit]

Template font colour [edit]

Colour generation guide[edit]

Wikimedia colour schemes[edit]

Wikipedia[edit]

Commons[edit]

Schemes for color-blind readers[edit]

Colour ramps[edit]

See also[edit]

References[edit]

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Interaction

Tools

In other projects

Print/export

Languages