Help talk:Using colours
| 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 |
Colour generation guide
- The method used for selecting the colours for various top-level pages, eg Main Page, Community Portal, Contents, and Help:Contents.
The 3 colours are generated using the HSV color space, then translated into RGB.
- 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 |
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? |
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)
Interesting external links
List of things that are pertinent, but not suitable for the guideline page itself. --Quiddity 20:03, 22 April 2006 (UTC)
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)
I was wondering the same thing. In everything else related to Wikipedia colors, it's spelled with the American spelling, but this, and only this, has the Canadian/British spelling. Perhaps there should be a bit more...consistency? ♥ ►ąĿÎąş◄ ♥ (ŧąĿĸ) 23:37, 23 March 2008 (UTC)
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)
Additions needed
Important are IMO some technical facts:
- Most browsers use dark foreground colours, typically black for text, underlined blue for links, and a slightly different underlined blue for visited links.
- That's also the case for old browsers not supporting CSS. Therefore changing the background colour is tricky:
- 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.
- 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.
- Using a legacy <font color="white"> is deprecated. Violating that rule is an option, otherwise better don't use legacy markup for dark backgrounds.
- 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.
- 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).
- 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.
- 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)
- We still need to add the above points,
- and merge Wikipedia:WikiProject Usability/Color
- And discuss expanding the recommendations into a full scheme (instead of just a handful of samples). --Quiddity 03:25, 2 September 2006 (UTC)
- I've started collecting and adding some wiki-ish palettes at User:Rfrisbie/Palettes. – Rfrisbietalk 03:51, 2 September 2006 (UTC)
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)
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)
Different colors?
Why do the color listed here on this talk page differ from the guideline itself? What one's correct? (If you don't know what I'm talking about, look at the darker color blue.) - Rocket000 00:18, 26 September 2007 (UTC)
- Oh, I get it. The table at the top of this page was made based on the green from the main page. That's why the blue and purple shades are a little off. We should fix this. - Rocket000 00:51, 26 September 2007 (UTC)
- Other way around. The mainpage was based off of this palette. See this page's history and the main page redesign archives. I forget when or why they diverged.
- As for fixing, the whole page needs a gentle overhaul, as discussed 3 sections above.
- (and the table at top contains the ideal we were working from, of 60degree increments, not the actual implementation. Yes that should be made clearer). --Quiddity 01:47, 26 September 2007 (UTC)
- Thank you for responding. I was just wondering what colors (main page colors or this palette) should be used in making templates and such. Before I found this page, I was going with the main page colors but then I realized, by comparing side by side, most of the templates in use have slightly different shades. Was there any systematic way of determining the main page colors? (Like some system I can use to get different hues?) - Rocket000 13:51, 26 September 2007 (UTC)
- Here's what the chart would look like based off the main page (minus extended colors):
| Wikipedia Color Chart | ||||||||
|---|---|---|---|---|---|---|---|---|
| Hue | Border | Header | Accent | Background | ||||
| 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 |
| H212 | #A3B0BF | H:212 S:15 V:75 | #CEDFF2 | H:212 S:15 V:95 | #E6F1FF | H:212 S:10 V:100 | #F5FAFF | H:212 S:4 V:100 |
| H265 | #AFA3BF | H:265 S:15 V:75 | #DDCEF2 | H:265 S:15 V:95 | #F0E6FF | H:265 S:10 V:100 | #F9F5FF* | H:265 S:4 V:100 |
| H0 | #CCCCCC | H:0 S:0 V:80 | #FCFCFC | H:0 S:0 V:99 | ||||
- I can't see any system here, and since these shades are so close to "60degree" table, I think I'll just use that instead. - Rocket000 02:24, 28 September 2007 (UTC)
- I asked David Levy if he remembered when/why the colors were changed, but he either doesn't recall either, or hasn't had time to reply yet. Sorry I couldn't be more help. --Quiddity 02:35, 28 September 2007 (UTC)
- I can't see any system here, and since these shades are so close to "60degree" table, I think I'll just use that instead. - Rocket000 02:24, 28 September 2007 (UTC)
Page name
The article was created as Wikipedia:Colours and per WP:ENGVAR should remain there. I've move protected it at that location because of the recent move wars (which resulted in lots of double redirects). Moves can still be discussed here, of course. violet/riga (t) 10:31, 22 October 2007 (UTC)
template colors
How come the templates now have their color in a little bar to the side? And do these colors mean anything?--190.74.108.43 (talk) 20:32, 2 January 2008 (UTC)
- Which templates? -- Quiddity (talk) 21:37, 2 January 2008 (UTC)
- trivia (yellow), globalize (blue), advert (red)... that kind of templates.--190.74.108.43 (talk) 21:50, 2 January 2008 (UTC)
- See Wikipedia:Article message boxes. -- Quiddity (talk) 21:55, 2 January 2008 (UTC)
- Thank you!--190.74.108.43 (talk) 22:28, 2 January 2008 (UTC)
- See Wikipedia:Article message boxes. -- Quiddity (talk) 21:55, 2 January 2008 (UTC)
- trivia (yellow), globalize (blue), advert (red)... that kind of templates.--190.74.108.43 (talk) 21:50, 2 January 2008 (UTC)
Colors in tables
Since tables are the general way to present structured information, and presentation of structured information is often assisted by colors, I'm a bit surprised there is not more table-specific information and guidance here.
It seems especially odd that there is no information about the choice of colors in class=wikitable (#f9f9f9 for background, #f2f2f2 for headings). When I needed a third color for a table heading a while ago (in List of motion picture film stocks), I ended up choosing #ebebeb since it was 7 less than #f2f2f2 which was 7 less than #f9f9f9; but I was not aware of this page at that time. How were the table colors chosen?
Is there any guidance on colors to use within tables? jhawkinson (talk) 15:03, 20 January 2008 (UTC)
Wikipedia background colour
In addition to presenting the colours employed in the various title boxes, shouldn't mention be made of the Wikipedia's page background colour itself (#F8FCFF)? JGHowes talk - 01:07, 11 April 2008 (UTC)
Infobox colours as a customisable option, and its implications
Please see Template talk:Infobox Country#Wales country specific infobox 52 Pickup (deal) 07:04, 11 April 2008 (UTC)
- Since this was not resolved, I've set up a RFC: link - 52 Pickup (deal) 21:13, 27 April 2008 (UTC)