Choosing a Colour Scheme
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
Customising the Interface of a MediaWiki-based Website
The appearance of a MediaWiki-based website is controlled by CSS Classes used by MediaWiki and by the installed Skin.
Altering the appearance, or customising the Interface, involves editing MediaWiki:Common.css and the skin CSS which is also in the MediaWiki: namespace.
Processes involved in customising the interface are covered in separate articles:-
- Choosing a MediaWiki Skin
- Choosing a Colour Scheme
- Identifying the various CSS Classes used by both MediaWiki and the active Skin
- Applying a Custom Colour Scheme to appropriate Classes in MediaWiki:common.css and the skin CSS, for example MediaWiki:Vector.css, as used here.
There are two easy ways to choose a colour scheme.
1 Sample Colours in an Image
The mh370wiki.net website theme is based on the colours in a Boeing 777 Flight Deck. Specifically from a photograph from the cockpit of the actual aircraft which went missing. This image is available from Wikimedia Commons and is shown below:-
There are shades of brown, grey, blue/purple and creme in this image. Text is also visible in white, green, orange and blue.
These colours are represented in the theme created for the mh370wiki.net website. The 'black screen' is used only on the Main Page and on passenger pages where it creates a sombre background. Other pages are brighter but still framed by a shaped border to replicate the cockpit display screens. The site Tagline MH370 DECODED is styled to be similar to the BOEING 777 label on the instrument panel.
2 Use Shades of Complementary Colours
The colour scheme for this website started with a choice of SteelBlue. This is one of 140 color names supported by current browsers and is shown on the page HTML Color Names published by w3Schools.
The hex code is #4682B4. Using this hex code in the w3Schools HTML Color Picker shows where the color is placed on a spectrum of light to dark:-
I prefer to work with whole percentages, so the base color for this website will be #4785B8, but I will still call it SteelBlue.
Using the hex code #4785B8 in the w3Schools' Color Picker now provides a range of suitable colours:-
These shades of blue (monochrome complimentary) will be used for the MediaWiki page header, background, and border around the content.
I want a different color range for use in the Sidebar. My goal is to use something quite different to clearly distinguish between MediaWiki CSS classes and the Vector and CollapsibleVector CSS classes.
A first option was to consider a colour which is complementary to SteelBlue. I used several on-line color wheels to find a color complimentary to my SteelBlue #4785B8 and they each suggested a brown with the hex code #B87A47 which doesn't appeal. However, I noticed on the w3Schools HTML Color Names adjacent to the SteelBlue is a Tan color with hex code #D2B48C so I propose using that for the Sidebar.
On the W3Schools Color Picker #D2B48C is at 69%, but the color at 50% will become my base color.
The full range from the W3Schools Color Picker is shown below, with the base Tan color #B88747 at 50%.
Color Names
CSS variables can be used for colors. See article Colors as Variables.
Two sets of variables will be created to identify shades of our two colors, SteelBlue and Tan, but limited to the useful shades only.
The following will be added to MediaWiki:Common.css.
/* Steel Blue */
:root { --SteelBlue-80: #B6CEE2;
--SteelBlue-70: #91B6D4;
--SteelBlue-60: #6C9DC6;
--SteelBlue-50: #4785B8;
--SteelBlue-40: #396A93;
}
/* Tan */
:root { --Tan-90: #F1E7DA;
--Tan-80: #E2CFB6;
--Tan-70: #D4B791;
--Tan-60: #C69F6C;
--Tan-50: #B88747;
--Tan-40: #936C39;
}
Related Articles
- Choosing a Colour Scheme (described here)
- Identifying the various CSS Classes used by both MediaWiki and the active Skin
- Applying a Custom Colour Scheme to appropriate Classes in MediaWiki:common.css and the skin CSS, for example MediaWiki:Vector.css, as used here.
Links
Resources from w3Schools
Resources from w3Schools
- HTML Color Names
- https://www.w3schools.com/tags/ref_colornames.asp
- HTML Color Picker
- https://www.w3schools.com/colors/colors_picker.asp
- HTML Color Mixer
- https://www.w3schools.com/colors/colors_mixer.asp
- Colors Tutorial
- https://www.w3schools.com/colors/default.asp
- CSS Variables - The (var) Function
- https://www.w3schools.com/css/css3_variables.asp
Note: This list is transcluded and used on other pages. The source is Snippets:Resources from w3Schools.