Wikipedia talk:Colours

From Wikipedia, the free encyclopedia

Top-level palettes at sixty degree increments
Hue Border Header Accent Background
H30 #BFB1A3 H:30 S:15 V:75 #F2E0CE H:30 S:15 V:95 #FFF2E6 H:30 S:10 V:100 #FFFAF5 H:30 S:4 V:100
H90 #B1BFA3 H:90 S:15 V:75 #E0F2CE H:90 S:15 V:95 #F2FFE6 H:90 S:10 V:100 #FAFFF5 H:90 S:4 V:100
H150 #A3BFB1 H:150 S:15 V:75 #CEF2E0 H:150 S:15 V:95 #E6FFF2 H:150 S:10 V:100 #F5FFFA H:150 S:4 V:100
H210 #A3B1BF H:210 S:15 V:75 #CEE0F2 H:210 S:15 V:95 #E6F2FF H:210 S:10 V:100 #F5FAFF H:210 S:4 V:100
H270 #B1A3BF H:270 S:15 V:75 #E0CEF2 H:270 S:15 V:95 #F2E6FF H:270 S:10 V:100 #FAF5FF H:270 S:4 V:100
H330 #BFA3B1 H:330 S:15 V:75 #F2CEE0 H:330 S:15 V:95 #FFE6F2 H:330 S:10 V:100 #FFF5FA H:330 S:4 V:100

Contents

[edit] Colour generation guide

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


[edit] Empty template box

For your own use. Copy to your project-page, and replace in order: A?, B?, C?.

background:#A? border:#B?   background:#B? border:#C?  

[edit] Main Page color

Re: table from main page redesign discussion archive

I'd appreciate someone giving a concise summary of how the new main page colours were selected. (I'm presumming the saturation/hue remained the consistent variables, as shown?)

Then we can generate a few additional colour schemes that all fit well together, helping keep wikipedia consistently styled where possible. --Quiddity 00:55, 11 April 2006 (UTC)

For the TFA/DYN sections, the the saturation/brightness values vary (as follows) with the hue remaining constant:
  • For the heading background, the saturation is 15% and brightness is 95%.
  • For the heading border, the saturation is 15% and brightness is 75%.
  • For the box background, the saturation is 4% and brightness is 100%.
For the ITN/OTD sections, the saturation and brightness scheme is the same as above, but the hue (color) is different. Same goes for the Today's featured picture section. --Aude (talk | contribs) 01:58, 11 April 2006 (UTC)
Perfect. Thanks. i eventually got around to making the table above ;) -Quiddity 03:51, 24 May 2006 (UTC)

[edit] Interesting external links

List of things that are pertinent, but not suitable for the guideline page itself. --Quiddity 20:03, 22 April 2006 (UTC)

[edit] American vs. Canadian spelling

How has it been decided to use the Canadian spelling for this project's page title?? Georgia guy 23:11, 9 May 2006 (UTC)

See the first 4 points at MoS#National varieties of English, and the table at MoS (spelling). -Quiddity 00:09, 10 May 2006 (UTC)
It's not just canada, as far as I'm aware, this is the spelling used in every english speaking country apart from the US Philc TECI 22:48, 30 May 2006 (UTC)

[edit] Talk box colours

How come the colours used in the little box that pops up and says your talk page has been edited aren't included in this article. Philc TECI 22:52, 30 May 2006 (UTC)

There are hundreds of colours used in the various infoboxes, that arent listed here. Just look at the wiki code to see what colour is being used :) -Quiddity 23:15, 30 May 2006 (UTC)
Fair enough, I just thought it was pretty central to wikipedia, and maybe it had been omitted by mistake. Philc TECI 23:37, 30 May 2006 (UTC)

[edit] Additions needed

Important are IMO some technical facts:

  1. Most browsers use dark foreground colours, typically black for text, underlined blue for links, and a slightly different underlined blue for visited links.
  2. That's also the case for old browsers not supporting CSS. Therefore changing the background colour is tricky:
  3. Dark background colours are out - unless the foreground colour is also changed. Ideally checked with a service converting all colours to a black and white scheme, if it still works it should be fine also for the colourblind.
  4. Mixing legacy markup and CSS can have hilarious effects like a legacy black/blue foreground on a dark background, if editors use bgcolor="black" for the BG, and style="color: white" for the FG.
  5. Using a legacy <font color="white"> is deprecated. Violating that rule is an option, otherwise better don't use legacy markup for dark backgrounds.
  6. Outside of CSS stay away from the hex. #rgb notation, old browsers only know #rrggbb (six hex. digits). Maybe use one of the sixteen colour names, that's guaranteed to work on the most limited devices, cell-phones, PDAs, printers, whatever, as far as they support colours.
  7. Text browsers don't support colours. (They need them internally to display mixtures of italics / bold / etc. and logical style tags like <code> on text mode displays with a single monospaced font).
  8. XHTML basic and XHTML print don't support inline CSS. If available use class= references to an external style sheet, for links see Wikipedia:Customisation.
  9. See also my experimental page with links to a colourblind emulator. The interesting table above has no effect on legacy browsers (and often no effect is good news from my POV... ;-) -- Omniplex 15:16, 23 April 2006 (UTC)

[edit] Allowed colors?

This section seems to be a bit abrupt to be added without discussion. On what basis are these colors "allowed," implying others are "disallowed"? The list doesn't seem to be all that consistent with the HSB/HSV style of designating color palettes either. Rfrisbietalk 04:28, 22 September 2006 (UTC)

[edit] active / inactive?

In the See Also section, the page "Infobox Colors" appears to be INACTIVE, whereas the "WikiProject Usability/Color" page appears to be ACTIVE. Should their designations on this page be changed or am I missing something? Newbie Laurie Fox 06:33, 3 December 2006 (UTC)

Both are historical/inactive. I've updated accordingly. (this page has been inactive a while too, needs help.. Usability/Color should be merged here, plus the list of items above..) --Quiddity 20:57, 3 December 2006 (UTC)