Test Color: Difference between revisions

From PreparingYou
Jump to navigation Jump to search
mNo edit summary
Line 24: Line 24:
* <code><nowiki><span style="background:#FF0000; color:white; text-align:center;">Red Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:#FF0000; color:white; text-align:center;">Red Background white print: 0</span></nowiki></code>  
: <span style="background:#FF0000; color:white; text-align:center;">Red Background white print:: 0</span>
: <span style="background:#FF0000; color:white; text-align:center;">Red Background white print:: 0</span>
* <code><nowiki><span style="background:#FA8072; color:black; text-align:center;">Red Background black print: 0</span></nowiki></code>
: <span style="background:#FA8072; color:black; text-align:center;">Red Background black print:: 0</span>
* <code><nowiki><span style="background:#FFA07A; color:black; text-align:center;">Red Background black print: 0</span></nowiki></code>
: <span style="background:#FFA07A; color:black; text-align:center;">Red Background black print:: 0</span>
* <code><nowiki><span style="background:#00FF2A; color:white; text-align:center;">130 green Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:#00FF2A; color:white; text-align:center;">130 green Background white print: 0</span></nowiki></code>  
: <span style="background:#00FF2A; color:white; text-align:center;">130 green Background white print: 0</span>
: <span style="background:#00FF2A; color:white; text-align:center;">130 green Background white print: 0</span>
* <code><nowiki><span style="background:#98FB98; color:black; text-align:center;">PALEgreen Background black print: 0</span></nowiki></code>
: <span style="background:#98FB98; color:black; text-align:center;">PALE green Background black print: 0</span>
* <code><nowiki><span style="background:#00FF2A; color:black; text-align:center;">YELLOW green Background black print: 0</span></nowiki></code>
: <span style="background:#CCFF00; color:black; text-align:center;">YELLOW green Background black print: 0</span>


* <code><nowiki><span style="background:green; color:white; text-align:center;">green Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:green; color:white; text-align:center;">green Background white print: 0</span></nowiki></code>  
: <span style="background:green; color:white; text-align:center;">green Background white print: 0</span>
: <span style="background:green; color:white; text-align:center;">green Background white print: 0</span>
* <code><nowiki><span style="background:blue; color:white; text-align:center;">blue Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:blue; color:white; text-align:center;">blue Background white print: 0</span></nowiki></code>  
: <span style="background:blue; color:white; text-align:center;">blue Background white print: 0</span>
: <span style="background:blue; color:white; text-align:center;">blue Background white print: 0</span>
* <code><nowiki><span style="background:#ADD8E6; color:black ; text-align:center;">blue Background black  print: 0</span></nowiki></code>
: <span style="background:#ADD8E6; color:black ; text-align:center;">blue Background black print: 0</span>
* <code><nowiki><span style="background:#87CEEB; color:black ; text-align:center;">LIGHT blue Background black print: 0</span></nowiki></code>
: <span style="background:#87CEEB; color:black ; text-align:center;">blue Background black print: 0</span>
* <code><nowiki><span style="background:red; color:white; text-align:center;">red Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:red; color:white; text-align:center;">red Background white print: 0</span></nowiki></code>  
: <span style="background:red; color:white; text-align:center;">red Background white print: 0</span>
: <span style="background:red; color:white; text-align:center;">red Background white print: 0</span>
* <code><nowiki><span style="background:black; color:white; text-align:center;">black Background white print: 0</span></nowiki></code>  
* <code><nowiki><span style="background:black; color:white; text-align:center;">black Background white print: 0</span></nowiki></code>  
: <span style="background:black; color:white; text-align:center;">black Background white print: 0</span>
: <span style="background:black; color:white; text-align:center;">black Background white print: 0</span>


* <code><nowiki><span style="background:#DCDCDC; color:black; text-align:center;">GREY Background black print: 0</span></nowiki></code>
: <span style="background:#DCDCDC; color:black; text-align:center;">GREY Background black print: 0</span>
* <code><nowiki><span style="background:#C0C0C0; color:black; text-align:center;">GREY Background black print: 0</span></nowiki></code>
: <span style="background:#C0C0C0; color:black; text-align:center;">GREY Background white print: 0</span>
* <code><nowiki><span style="background:#A9A9A9; color:black; text-align:center;">GREY Background black print: 0</span></nowiki></code>
: <span style="background:#A9A9A9; color:black; text-align:center;">GREY Background black print: 0</span>


==<span id="Color generation guide">Colour generation guide</span>==
==<span id="Color generation guide">Colour generation guide</span>==

Revision as of 01:50, 22 December 2023

Test Color

Overriding font colour Overriding font color

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

Examples color text:

  • <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
  • <span style="color:red">'''Bold red writing'''</span>
  • shows as Bold red writing
  • <span style="color:green">'''Bold green''' writing</span>
  • shows as Bold green writing
  • <span style="color:blue">'''Bold blue''' writing</span>
  • shows as Bold blue writing

Background

  • <span style="background:#FF0000; color:white; text-align:center;">Red Background white print: 0</span>
Red Background white print:: 0
  • <span style="background:#FA8072; color:black; text-align:center;">Red Background black print: 0</span>
Red Background black print:: 0
  • <span style="background:#FFA07A; color:black; text-align:center;">Red Background black print: 0</span>
Red Background black print:: 0




  • <span style="background:#00FF2A; color:white; text-align:center;">130 green Background white print: 0</span>
130 green Background white print: 0
  • <span style="background:#98FB98; color:black; text-align:center;">PALEgreen Background black print: 0</span>
PALE green Background black print: 0
  • <span style="background:#00FF2A; color:black; text-align:center;">YELLOW green Background black print: 0</span>
YELLOW green Background black print: 0


  • <span style="background:green; color:white; text-align:center;">green Background white print: 0</span>
green Background white print: 0


  • <span style="background:blue; color:white; text-align:center;">blue Background white print: 0</span>
blue Background white print: 0


  • <span style="background:#ADD8E6; color:black ; text-align:center;">blue Background black print: 0</span>
blue Background black print: 0


  • <span style="background:#87CEEB; color:black ; text-align:center;">LIGHT blue Background black print: 0</span>
blue Background black print: 0


  • <span style="background:red; color:white; text-align:center;">red Background white print: 0</span>
red Background white print: 0



  • <span style="background:black; color:white; text-align:center;">black Background white print: 0</span>
black Background white print: 0


  • <span style="background:#DCDCDC; color:black; text-align:center;">GREY Background black print: 0</span>
GREY Background black print: 0


  • <span style="background:#C0C0C0; color:black; text-align:center;">GREY Background black print: 0</span>
GREY Background white print: 0


  • <span style="background:#A9A9A9; color:black; text-align:center;">GREY Background black print: 0</span>
GREY Background black print: 0

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
  • Easily generate similar palettes, from different starting hues, using colorblender.com

Wikimedia colour schemes Wikimedia color schemes

Wikipedia

Wikipedia uses this colour scheme on its Main Page.

Please note that 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

Tables

Column 1 Heading Column 2 Heading Column 3 Heading
Column 1 Row 1 Column 2 Row 1 Column 3 Row 1
Column 1 Row 2 Column 2 Row 2 Column 3 Row 2
Column 1 Row 3 Column 2 Row 3 Column 3 Row 3


{| class="wikitable" style="text-align: center; color: green;"
|- style="background-color:#efefef;"
! Column 1 Heading!! Column 2 Heading!! Column 3 Heading </nowiki>
|-
|Column 1 Row 1
|Column 2 Row 1
|Column 3 Row 1
|-
|Column 1 Row 2
|Column 2 Row 2
|Column 3 Row 2
|-
|Column 1 Row 3
|Column 2 Row 3
|Column 3 Row 3
|}


Icon Function What it shows when editing What it shows on the page
Attribute The early Levites: The early Church:
Called Ministers of God have always been called by God to be His "called out".
The Levites were the people who answered the call to come out and follow the ways of God.[1] The Apostles were called to come out and serve God by teaching the people the ways of God.[2]
a l c


Footnotes

  1. Exodus 32:26 Then Moses stood in the gate of the camp, and said, Who [is] on the LORD’S side? [let him come] unto me. And all the sons of Levi gathered themselves together unto him.
  2. Matthew 4:19 And he saith unto them, Follow me, and I will make you fishers of men.
    Matthew 8:22 But Jesus said unto him, Follow me; and let the dead bury their dead.
    Matthew 9:9 And as Jesus passed forth from thence, he saw a man, named Matthew, sitting at the receipt of custom: and he saith unto him, Follow me. And he arose, and followed him.
    Matthew 16:24 Then said Jesus unto his disciples, If any man will come after me, let him deny himself, and take up his cross, and follow me.
    Matthew 19:21 Jesus said unto him, If thou wilt be perfect, go and sell that thou hast, and give to the poor, and thou shalt have treasure in heaven: and come and follow me.
    Mark 2:14 And as he passed by, he saw Levi the son of Alphaeus sitting at the receipt of custom, and said unto him, Follow me. And he arose and followed him.
  3. Matthew 6:24 No man can serve two masters: for either he will hate the one, and love the other; or else he will hold to the one, and despise the other. Ye cannot serve God and mammon. Luke 16:13 No servant can serve two masters: for either he will hate the one, and love the other; or else he will hold to the one, and despise the other. Ye cannot serve God and mammon.