- 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 that is frequently used on the web. 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 wish 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 web colors.
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 that are the same as the RGBA codes but without the alpha channel. This 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 | rgba(0, 0, 128, 1) |
| black | rgba(0, 0, 0, 1) |
| olive | rgba(128, 128, 0, 1) |
| blue | rgba(0, 0, 255, 1) |
| purple | rgba(128, 0, 128, 1) |
| fuchsia | rgba(255, 0, 255, 1) |
| red | rgba(255, 0, 0, 1) |
| Name | RGBA code |
|---|---|
| green | rgba(0, 128, 0, 1) |
| silver | rgba(192, 192, 192, 1) |
| gray | rgba(128, 128, 128, 1) |
| teal | rgba(0, 128, 128, 1) |
| lime | rgba(0, 255, 0, 1) |
| white | rgba(255, 255, 255, 1) |
| maroon | rgba(128, 0, 0, 1) |
| yellow | rgba(255, 255, 0, 1) |
Web 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.
The first version of the X Window system determined color keywords by X11 color names. Today, web colors, X11's descendant system, provides available colors.
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 colorblind, seeing-impaired, or disabled is also important.
Sharp contrasts can also be considered "hard on the eyes" and should be avoided. Two helpful sites are Contrast Checker and Link Contrast Checker.
Theming variables
In the FandomDesktop skin, users have access to variables representing theme colors.
| Variable name | Description |
--theme-accent-color
|
Accent color taken from ThemeDesigner, presented as hex value |
--theme-accent-color--hover
|
Accent color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-accent-color--rgb
|
Accent color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-accent-dynamic-color-1
|
dynamic-1 color for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-1--rgb
|
dynamic-1 color rgb components for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-2
|
dynamic-2 color for accent. See Dynamic Colors section for more info. |
--theme-accent-dynamic-color-2--rgb
|
dynamic-2 color rgb components for accent. See Dynamic Colors section for more info. |
--theme-accent-label-color
|
Accessible text color to use with --theme-accent-color background, presented as hex value
|
--theme-alert-color
|
Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-alert-color--hover
|
Alert color (red-ish) adjusted for proper contrast comparing with page background, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-alert-color--rgb
|
Alert color (red-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
--theme-alert-label
|
Accessible text color to use with --theme-alert-color background, presented as hex value
|
--theme-body-background-color
|
Body background color taken from ThemeDesigner, presented as hex value |
--theme-body-background-image
|
URL to background image, taken from ThemeDesigner, presented as string |
--theme-body-dynamic-color-1
|
dynamic-1 color for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-1--rgb
|
dynamic-1 color rgb components for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-2
|
dynamic-2 color for body background. See Dynamic Colors section for more info. |
--theme-body-dynamic-color-2--rgb
|
dynamic-2 color rgb components for body background. See Dynamic Colors section for more info. |
--theme-body-text-color
|
Accessible text color to use with --theme-body-background-color background, presented as hex value
|
--theme-body-text-color--hover
|
Accessible text color to use with --theme-body-background-color background, darkened or lightened by 20%, depending on theme, presented as hex value
|
--theme-border-color
|
Accessible border color calculated as 0.75 * --theme-page-background-color + 0.25 * --theme-page-text-color, presented as hex value
|
--theme-border-color--rgb
|
Accessible border color calculated as 0.75 * --theme-page-background-color + 0.25 * --theme-page-text-color, presented as group of Red, Green, Blue values
|
--theme-link-color
|
Link color taken from ThemeDesigner, presented as hex value |
--theme-link-color--hover
|
Link color taken from ThemeDesigner, darkened or lightened by 20%, depending on theme, presented as hex value |
--theme-link-color--rgb
|
Link color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-link-dynamic-color-1
|
dynamic-1 color for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-1--rgb
|
dynamic-1 color rgb components for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-2
|
dynamic-2 color for links. See Dynamic Colors section for more info. |
--theme-link-dynamic-color-2--rgb
|
dynamic-2 color rgb components for links. See Dynamic Colors section for more info. |
--theme-link-label-color
|
Accessible text color to use with --theme-link-color background, presented as hex value
|
--theme-message-color
|
Message color (blue-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-message-label
|
Accessible text color to use with --theme-message-color background, presented as hex value
|
--theme-page-accent-mix-color
|
Mix of a page background color and accent color in the 50-50 ratio |
--theme-page-background-color
|
Page (article) background color taken from ThemeDesigner, presented as hex value |
--theme-page-background-color--rgb
|
Page (article) background color taken from ThemeDesigner, presented as group of Red, Green, Blue values |
--theme-page-background-color--secondary
|
Secondary color calculated based on --theme-page-background-color, slightly mixed with white or black color, depending on theme, presented as hex value
|
--theme-page-dynamic-color-1
|
dynamic-1 color for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-1--rgb
|
dynamic-1 color rgb components for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-2
|
dynamic-2 color for page (article) background. See Dynamic Colors section for more info. |
--theme-page-dynamic-color-2--rgb
|
dynamic-2 color rgb components for page (article) background. See Dynamic Colors section for more info. |
--theme-page-text-color
|
Text color for a page. Alias for --theme-page-dynamic-color-2.
|
--theme-page-text-color--hover
|
Hover state of a page text color |
--theme-page-text-color--rgb
|
RGB components of page text color |
--theme-page-text-mix-color
|
Mix of a page background color and page dynamic-2 color in the 50-50 ratio |
--theme-sticky-nav-background-color
|
Sticky nav background color. This color can be set inside the Theme Designer. |
--theme-sticky-nav-dynamic-color-1
|
dynamic-1 color for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-1--rgb
|
dynamic-1 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-2
|
dynamic-2 color for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-dynamic-color-2--rgb
|
dynamic-2 color rgb components for sticky nav background. See Dynamic Colors section for more info. |
--theme-sticky-nav-text-color
|
Text color for sticky nav. Alias for --theme-sticky-nav-dynamic-color-1
|
--theme-sticky-nav-text-color--hover
|
Hover state of a sticky nav text color |
--theme-success-color
|
Success color (green-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-success-color--rgb
|
Success color (green-ish), adjusted for proper contrast comparing with page background, presented as group of Red, Green, Blue values |
--theme-success-label
|
Accessible text color to use with --theme-success-color background, presented as hex value
|
--theme-warning-color
|
Warning color (yellow-ish), adjusted for proper contrast comparing with page background, presented as hex value |
--theme-warning-label
|
Accessible text color to use with --theme-warning-color background, presented as hex value
|
Dynamic Colors
Dynamic colors are established on the basis of their background. They are calculated to reach the best contrast ratio possible.
dynamic-color-1is fandom-black (#0E191A) for light backgrounds and white (#FFFFFF) for dark backgrounds.dynamic-color-2is dark grey (#3A3A3A) for light backgrounds and light grey (#E6E6E6) for dark backgrounds.
Variable aliases
| Variable name | Alias for |
--theme-accent-label-color
|
--theme-accent-dynamic-color-1
|
--theme-body-text-color
|
--theme-body-dynamic-color-1
|
--theme-link-label-color
|
--theme-link-dynamic-color-1
|
--theme-page-text-color
|
--theme-page-dynamic-color-2
|
--theme-sticky-nav-text-color
|
--theme-sticky-nav-dynamic-color-1
|
References
See also
- Web colors on Wikipedia, which this page was based on
- 4096 Color Wheel
- Color Names and Hue by Colblindor on Color-blindness website.
- The Do's and Don'ts of Designing with Neon Colors
- Color Blindness & Web Design
- An overview of how contrast affects color choices on your wiki
- Contrast color searcher on Scheme color website.
- Editing your wiki's look with the Theme Designer
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article