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
- 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 |
[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)
[edit] 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)
[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)