• View
• Edit
• History
• Print
• Backlinks

WikiStyleColors

Colour Examples

Some color definitions above and beyond what's standard in PmWiki:

%color=#0000cc define=hardblue%     hard blue
%color=#006600 define=darkgreen%    dark green
%color=#009999 define=bluegrass%    blue grass
%color=#33ffcc define=teal%         teal
%color=#660066 define=darkpurple%   dark purple
%color=#6600cc define=perwinkle%    periwinkle
%color=#666666 define=darkgrey%     dark grey
%color=#669966 define=mistgreen%    mist green
%color=#669999 define=slategreen%   slate green
%color=#9966cc define=lightpurple%  light purple
%color=#999999 define=lightgrey%    light grey
%color=#99ccff define=lightblue%    light blue
%color=#99ff33 define=springgreen%  spring green
%color=#cc33cc define=magenta%      magenta
%color=#cc6633 define=burnttorange% burnt orange
%color=#cccccc define=grey%         grey
%color=#ccffcc define=lightgreen%   light green
%color=#ff3399 define=pink%         pink
%color=#ff6666 define=lightred%     light red
%color=#ff9900 define=orange%       orange
%color=#ff9966 define=lightorange%  light orange
%color=#ffbb66 define=gold%         gold

Hints and Tips:

• You need not "define" the hexadecimal colors in order to use them; it works just as well to set %color=#cc33cc% before some text as to "define" it and use the definition. The definition is convenient if you're going to use the color more than once.
• Use lowercase characters - prevents color numbers being mis-read as Wiki text.
• Remember that there is a slight difference between the way colour is rendered on Windows and Mac. - note: What does this mean?
• Text color always looks brighter than background color, because the white background dominates the overall brightness. IOW text colors should be darker than background colors to achieve the same impression of brightness (unless, of course, your wiki has a reverse video color scheme).
• Too many colours on the same page is distracting. Use them sparingly.
• You can hide text by making it white-on-white. It's a poor obfuscation technique though: the HTML source code will give it away, and if a savvy visitor marks the text, he'll see it anyway. Still, some single-author sites use it for making the Edit link unobtrusive.

More Colours Options (external links open in new windows)

• 4096 Color Wheel at Mandarin Design
• Websafe Color Chart at Mandarin Design
• http://w3schools.com/html/html_colors.asp
• Pixie download site - install and run this tiny Windows utility, and "simply point to a colour and it will tell you the hex, RGB, HTML, CMYK and HSV values of that colour." (on Macintosh just open TextEdit and use shift+command+c)

Comments

How do admins define colors for all pages?? Define color keywords and rely on the browser to render the color values. you can use the color keywords for both text color (use %keyword%text%%) and also background color (use %bgcolor=keyword%text%%). Add to your local configuration file:

$SVGColors = array (
'aliceblue','antiquewhite','aqua','aquamarine','azure','beige','bisque','black',
'blanchedalmond','blue','blueviolet','brown','burlywood','cadetblue','chartreuse','chocolate',
'coral','cornflowerblue','cornsilk','crimson','cyan','darkblue','darkcyan','darkgoldenrod',
'darkgrey','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange','darkorchid','darkred',
'darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise','darkviolet','deeppink','deepskyblue',
'dimgray','dodgerblue','firebrick','floralwhite','forestgreen','fuchsia','gainsboro','ghostwhite',
'gold','goldenrod','gray','green','greenyellow','honeydew','hotpink','indianred',
'indigo','ivory','khaki','lavender','lavenderblush','lawngreen','lemonchiffon','lightblue',
'lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink','lightsalmon','lightseagreen',
'lightskyblue','lightslategray','lightsteelblue','lightyellow','lime','limegreen','linen','magenta',
'maroon','mediumaquamarine','mediumblue','mediumorchid','mediumpurple','mediumseagreen','mediumslateblue','mediumspringgreen',
'mediumturquoise','mediumvioletred','midnightblue','mintcream','mistyrose','moccasin','navajowhite','navy',
'oldlace','olive','olivedrab','orange','orangered','orchid','palegoldenrod','palegreen',
'paleturquoise','palevioletred','papayawhip','peachbuff','peru','pink','plum','powderblue',
'purple','red','rosybrown','royalblue','saddlebrown','salmon','sandybrown','seagreen',
'seashell','sienna','silver','skyblue','slateblue','slategray','snow','springgreen',
'steelblue','tan','teal','thistle','tomato','turquoise','violet','wheat',
'white','whitesmoke','yellow','yellowgreen'
);
foreach($SVGColors as $c)
   $WikiStyle[$c]['color'] = $c;

Alternatively define the required colors in the local configuration file. (See Custom WikiStyles for details). For example add the following line(s) to local/config.php:

    $WikiStyle['hardblue']['color']='#0000cc';
    $WikiStyle['darkgreen']['color']='#006600';
    $WikiStyle['bluegrass']['color']='#009999';
    $WikiStyle['teal']['color']='#33ffcc';
    $WikiStyle['darkpurple']['color']='#660066';
    $WikiStyle['perwinkle']['color']='#6600cc';
    $WikiStyle['darkgrey']['color']='#666666';
    $WikiStyle['mistgreen']['color']='#669966';
    $WikiStyle['slategreen']['color']='#669999';
    $WikiStyle['purple']['color']='#990099';
    $WikiStyle['lightpurple']['color']='#9966cc';
    $WikiStyle['lightgrey']['color']='#999999';
    $WikiStyle['lightblue']['color']='#99ccff';
    $WikiStyle['springgreen']['color']='#99ff33';
    $WikiStyle['magenta']['color']='#cc33cc';
    $WikiStyle['burnttorange']['color']='#cc6633';
    $WikiStyle['grey']['color']='#cccccc';
    $WikiStyle['lightgreen']['color']='#ccffcc';
    $WikiStyle['pink']['color']='#ff3399';
    $WikiStyle['lightred']['color']='#ff6666';
    $WikiStyle['orange']['color']='#ff9900';
    $WikiStyle['lightorange']['color']='#ff9966';
    $WikiStyle['gold']['color']='#ffbb66';
    $WikiStyle['yellow']['color']='#ffff00';

<< Wiki style examples | PmWiki.Documentation Index | List styles >>