Help:Using colours


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


To make a word have colour, use: <span style="color:hex triplet or colour name">text</span>

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

Examples:

  • <span style="color:red">red writing</span> shows as red writing
  • <span style="color:#0f0">green writing</span> shows as green writing
  • <span style="color:#0000FF">blue writing</span> shows as blue writing

Template font colour

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}} |

Colour generation guide


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

Wikimedia colour schemes


Wikipedia

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

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 colour-blind readers


Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have red-green colour blindness; this and other types affect people worldwide.[1] 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.

White Yellow Blue

Purple

Red

Green

Brown

Grey

Black
  • Pick a maximum of one colour from each box. Do not use more than one colour from any one box.
  • 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, checkers or polka-dots).
  • 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:

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 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 (hot, cold).

  • 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


Templates

  • Template with color names
HTML name Hex code
R  G  B
Decimal code
R   G   B
Pink colors
PinkFF C0 CB255 192 203
LightPinkFF B6 C1255 182 193
HotPinkFF 69 B4255 105 180
DeepPinkFF 14 93255  20 147
PaleVioletRedDB 70 93219 112 147
MediumVioletRedC7 15 85199  21 133
Red colors
LightSalmonFF A0 7A255 160 122
SalmonFA 80 72250 128 114
DarkSalmonE9 96 7A233 150 122
LightCoralF0 80 80240 128 128
IndianRedCD 5C 5C205  92  92
CrimsonDC 14 3C220  20  60
FireBrickB2 22 22178  34  34
DarkRed8B 00 00139   0   0
RedFF 00 00255   0   0
Orange colors
OrangeRedFF 45 00255  69   0
TomatoFF 63 47255  99  71
CoralFF 7F 50255 127  80
DarkOrangeFF 8C 00255 140   0
OrangeFF A5 00255 165   0
GoldFF D7 00255 215   0
Yellow colors
YellowFF FF 00255 255   0
LightYellowFF FF E0255 255 224
LemonChiffonFF FA CD255 250 205
LightGoldenrodYellowFA FA D2250 250 210
PapayaWhipFF EF D5255 239 213
MoccasinFF E4 B5255 228 181
PeachPuffFF DA B9255 218 185
PaleGoldenrodEE E8 AA238 232 170
KhakiF0 E6 8C240 230 140
DarkKhakiBD B7 6B189 183 107
Brown colors
CornsilkFF F8 DC255 248 220
BlanchedAlmondFF EB CD255 235 205
BisqueFF E4 C4255 228 196
NavajoWhiteFF DE AD255 222 173
WheatF5 DE B3245 222 179
BurlyWoodDE B8 87222 184 135
TanD2 B4 8C210 180 140
RosyBrownBC 8F 8F188 143 143
SandyBrownF4 A4 60244 164  96
GoldenrodDA A5 20218 165  32
DarkGoldenrodB8 86 0B184 134  11
PeruCD 85 3F205 133  63
ChocolateD2 69 1E210 105  30
SaddleBrown8B 45 13139  69  19
SiennaA0 52 2D160  82  45
BrownA5 2A 2A165  42  42
Maroon80 00 00128   0   0
Green colors
DarkOliveGreen55 6B 2F 85 107  47
Olive80 80 00128 128   0
OliveDrab6B 8E 23107 142  35
YellowGreen9A CD 32154 205  50
LimeGreen32 CD 32 50 205  50
Lime00 FF 00  0 255   0
LawnGreen7C FC 00124 252   0
Chartreuse7F FF 00127 255   0
GreenYellowAD FF 2F173 255  47
SpringGreen00 FF 7F  0 255 127
MediumSpringGreen00 FA 9A  0 250 154
LightGreen90 EE 90144 238 144
PaleGreen98 FB 98152 251 152
DarkSeaGreen8F BC 8F143 188 143
MediumSeaGreen3C B3 71 60 179 113
SeaGreen2E 8B 57 46 139  87
ForestGreen22 8B 22 34 139  34
Green00 80 00  0 128   0
DarkGreen00 64 00  0 100   0
Cyan colors
MediumAquamarine66 CD AA102 205 170
Cyan00 FF FF  0 255 255
LightCyanE0 FF FF224 255 255
PaleTurquoiseAF EE EE175 238 238
Aquamarine7F FF D4127 255 212
Turquoise40 E0 D0 64 224 208
MediumTurquoise48 D1 CC 72 209 204
DarkTurquoise00 CE D1  0 206 209
LightSeaGreen20 B2 AA 32 178 170
CadetBlue5F 9E A0 95 158 160
DarkCyan00 8B 8B  0 139 139
Teal00 80 80  0 128 128
Blue colors
LightSteelBlueB0 C4 DE176 196 222
PowderBlueB0 E0 E6176 224 230
LightBlueAD D8 E6173 216 230
SkyBlue87 CE EB135 206 235
LightSkyBlue87 CE FA135 206 250
DeepSkyBlue00 BF FF  0 191 255
DodgerBlue1E 90 FF 30 144 255
CornflowerBlue64 95 ED100 149 237
SteelBlue46 82 B4 70 130 180
RoyalBlue41 69 E1 65 105 225
Blue00 00 FF  0   0 255
MediumBlue00 00 CD  0   0 205
DarkBlue00 00 8B  0   0 139
Navy00 00 80  0   0 128
MidnightBlue19 19 70 25  25 112
Purple colors
LavenderE6 E6 FA230 230 250
ThistleD8 BF D8216 191 216
PlumDD A0 DD221 160 221
VioletEE 82 EE238 130 238
OrchidDA 70 D6218 112 214
MagentaFF 00 FF255   0 255
MediumOrchidBA 55 D3186  85 211
MediumPurple93 70 DB147 112 219
BlueViolet8A 2B E2138  43 226
DarkViolet94 00 D3148   0 211
DarkOrchid99 32 CC153  50 204
DarkMagenta8B 00 8B139   0 139
Purple80 00 80128   0 128
Indigo4B 00 82 75   0 130
DarkSlateBlue48 3D 8B 72  61 139
SlateBlue6A 5A CD106  90 205
MediumSlateBlue7B 68 EE123 104 238
White/Gray/Black colors
WhiteFF FF FF255 255 255
SnowFF FA FA255 250 250
HoneydewF0 FF F0240 255 240
MintCreamF5 FF FA245 255 250
AzureF0 FF FF240 255 255
AliceBlueF0 F8 FF240 248 255
GhostWhiteF8 F8 FF248 248 255
WhiteSmokeF5 F5 F5245 245 245
SeashellFF F5 EE255 245 238
BeigeF5 F5 DC245 245 220
OldLaceFD F5 E6253 245 230
FloralWhiteFF FA F0255 250 240
IvoryFF FF F0255 255 240
AntiqueWhiteFA EB D7250 235 215
LinenFA F0 E6250 240 230
LavenderBlushFF F0 F5255 240 245
MistyRoseFF E4 E1255 228 225
GainsboroDC DC DC220 220 220
LightGrayD3 D3 D3211 211 211
SilverC0 C0 C0192 192 192
DarkGrayA9 A9 A9169 169 169
Gray80 80 80128 128 128
DimGray69 69 69105 105 105
LightSlateGray77 88 99119 136 153
SlateGray70 80 90112 128 144
DarkSlateGray2F 4F 4F 47  79  79
Black00 00 00  0   0   0

Related help pages

Somewhat related pages

Encyclopedia articles

References


  1. "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.