FANDOM


This page is best viewed on Fandom's desktop skin. (Click here to view this page in desktop mode)

Color can be added to your community in a variety of places. For example, you can use the theme designer to customize your wiki's color palette. Or you can add more specific color via your community's templates and CSS.

Defining colors

Hexadecimal codes

Just about every color imaginable can be represented by a six-digit hexadecimal code — a numerical representation of the amount of red, green and blue present in that particular color. RGBA is another color model which is often used on the web and it includes not only the red, green and blue but also the "alpha" or transparency channels. Therefore, hex and RGB/RGBA codes are more precise — though less user-friendly — than color names.

In the charts below are some hex codes for a few colors. If you want to use any of these, just add them where appropriate. For example, if you want to make your button color white in the theme designer, copy the hex code of that color (#FFFFFF), then add it to the input field on the customize tab.

Note: hex codes are not case-sensitive, so #ffffff and #FFFFFF represent the same thing.

Color names

There are two main types of color names that are preferred, HTML and X11.

HTML color names

For ease of use, some colors have color keywords — case-insensitive names, like red and YeLLow. The HTML 4.01 specification[1] defined sixteen "basic" color keywords:

Name Hex code
cyan #00FFFF
navy #000080
black #000000
olive #808000
blue #0000FF
purple #800080
fuchsia #FF00FF
red #FF0000
Name Hex code
green #008000
silver #C0C0C0
gray #808080
teal #008080
lime #00FF00
white #FFFFFF
maroon #800000
yellow #FFFF00

RGBA color names

Note: You may also find RGB codes which are the the same as the RGBA codes but without the alpha channel, which makes them functionally equivalent to the HTML color codes listed above.

The color channels range in value from 0 to 255, while the alpha, or transparency channel is always a value between 0 and 1, with 0 denoting full transparency and 1 denoting full opacity, or no transparency.

The first of the four numbers represents the red channel, the second represents the green channel, the third represents the blue channel and the fourth, the alpha channel.

Name RGBA code
cyan rgba(0, 255, 255, 1)
navy rgb(0, 0, 128, 1)
black rgba(0, 0, 0, 1)
olive rgb(128, 128, 0, 1)
blue rgb(0, 0, 255, 1)
purple rgb(128, 0, 128, 1)
fuchsia rgb(255, 0, 255, 1)
red rgb(255, 0, 0, 1)
Name RGBA code
green rgb(0, 128, 0, 1)
silver rgb(192, 192, 192, 1)
gray rgb(128, 128, 128, 1)
teal rgb(0, 128, 128, 1)
lime rgb(0, 255, 0, 1)
white rgba(255, 255, 255, 1)
maroon rgb(128, 0, 0, 1)
yellow rgb(255, 255, 0, 1)

X11 color names

If you've spent any time coding, though, you know there are other color names, like cornflowerblue and linen. These extended color keywords are X11 color names, defined by web browsers.

A large, helpful list of usable color names and equivalent hex codes can be found on Wikipedia.[2][3]

Fluorescent colors

Fluorescent or neon colors can appear to glow on your wiki's pages, depending on how you've set up your base colors in the theme designer. The effect can be arresting and effective. So play around with the following. But remember: a little neon goes a long way!

Name Hex code
Rainshower #C9FFE5
Blizzard Blue #A3E3ED
Psychedelic Purple #FA00FF
Harlequin #3FFF00
Bubbles #E7FEFF
Razzle Dazzle Rose #FF33CC
Electric Purple #BF00FF
Hot Magenta #FF00CC
Neon Carrot #FFA343
Chartreuse Yellow #DFFF00
Shocking Pink #FC0FC0
Name Hex code
Screamin' Green #66FF66
Purple Pizzazz #FE4EDA
Electric Violet #8B00FF
Sunglow #FFCC33
Electric Lime #CCFF00
Snowy Mint #D6FFDB
Flamingo Pink #FF66FF
Infra Red #FF496C
Laser Lemon #FFFF66
Phlox #DF00FF
Veronica #A020F0

Several online tools are available which can assist you in choosing the right color.

Color and accessibility

While being creative with color can greatly enhance the look of your wiki, it is important to remain mindful that not everyone perceives color in the same way. Keeping your wiki accessible to the color blind, seeing-impaired or disabled is also important.

Sharp contrasts can also be considered "hard on the eyes" and should be avoided. One helpful site is Contrast Checker.

References

  1. HTML 4.01 Specification section 6.5 "Colors"
  2. W3C TR CSS3 Color Module, SVG color keywords
  3. W3C TR SVG 1.0, recognized color keyword names

See also

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.