FANDOM


This is a library for handling colors in the FANDOM environment. This library serves two purposes:

  1. It provides a list of the most important colors on the current page, so you can easily adapt your addon's appearance to the host wiki's color scheme.
  2. And it provides a bunch of functions for manipulating colors, so you can build your own color scheme on top of the host wiki's color scheme

Note: This library is meant to be used by JavaScript developers. If you're not writing a script, this library won't be of any use to you. You may want to check out Help:Color to find out more information about colors.

Colors

dev.colors.wikia.body

pseudo-color: $body

color of background that surrounds the content area.

dev.colors.wikia.page

pseudo-color: $page

color of article background.

dev.colors.wikia.menu

pseudo-color: $menu

color of menu and button elements.

#BACDD8
#FFFFFF
#006CB0

dev.colors.wikia.header

pseudo-color: $header

color of the FANDOM header at the top of the page.

dev.colors.wikia.link

pseudo-color: $link

color of links.

dev.colors.wikia.contrast

pseudo-color: $contrast

color of text in menu and buttons

#3A5766
#006CB0
#FFFFFF

dev.colors.wikia.text

pseudo-color: $text

color of text in the main article area.

dev.colors.wikia.border

pseudo-color: $border

color of border, frame and separator elements.

dev.colors.wikia.gradient

pseudo-color: $gradient

secondary (bright) color of button elements. Use this to create a gradient with $menu.

#3A3A3A
#CCCCCC
#008BE3

Applying the colors

The easiest way to use the above colors is to write regular CSS but use pseudo-colors instead of regular ones:

a { color: $link; }

Add all of these rules to a string and then pass it to dev.colors.css(). dev.colors.css() will replace all pseudo-values and append the stylesheet to the document head:

Example 1:
dev.colors.css( 'a { color: $link; }' );

You can use an optional second parameter to add pseudo-values of your own. Note that you need to prefix the name of your own values with a $ sign:

Example 2:
dev.colors.css(
'a { color: $link; background: $myBackGround; }', {
    myBackGround: 'black'
});

Brightness and Darkness

A key part of designing for the various color schemes across FANDOM is to determine whether the scheme is bright or dark. dev.colors offers a method for that, but more importantly: It will add two classes to the body tag:

  1. .menu-dark or .menu-bright – depending on whether the background of menu and buttons is dark or bright
  2. .page-dark or .page-bright – depending on whether the background of the article area is dark or bright

Manipulating Colors

To manipulate color you first need to create a color object. dev.colors provides three Factories:

// parse allows you to create a color object from a string:
var red = dev.colors.parse("#FF0000");
var red = dev.colors.parse("#F00");
var red = dev.colors.parse("rgb(255, 0, 0)");
var red = dev.colors.parse("red");
 
// the values of dev.colors.wikia are strings too:
var body = dev.colors.parse(dev.colors.wikia.body);
 
// fromRgb allows you to set the RGB values numerically:
// (values must be between 0 and 255)
var red = dev.colors.fromRgb(255, 0, 0);
 
// fromHsl allows you to use the HSL color model:
// (values must be between 0 and 1)
var red = dev.colors.fromHsl(0, 1, 1);

Once you have a color object you can manipulate it:

// lighten red by 20 percent:
var lightRed = red.lighten(20);
 
// desaturate red by 20 percent:
var paleRed = red.saturate(-20);
 
// rotate the hue by 180 degrees to
// get the complementary color:
var cyan = red.rotate(180);
 
// mix two colors:
var orange = red.mix('yellow');

Negating colors

dev.colors has two functions for negating colors: complement() and invert(). While both are mathematically simple their effect on colors is a bit difficult to visualize:

  • invert() negates hue, saturation and lightness of a color because it acts on the RGB color space:

    rgbinverted = rgb(maxr – r, maxg – g, maxb – b)
  • complement() negates only the hue. Saturation and lightness remain unchanged.:

    hslcomplemented = hsl(maxh – h, s, l)

    The most obvious consequence is that complement() only effects colors. White, black and any gray tone in between remain (seemingly) unchanged.
A few examples:
  invert compl.
red
lime
blue
cyan
yellow
magenta
peru
  invert compl.
white
black
gray
lightgray
darkgray
  invert compl.
orchid
pink
indigo
khaki
brown
beige
springgr.

Converting Color Objects to Strings

When you've mixed and matched the colors you like, you will want to convert them back into strings so you can use them in CSS:

console.log("red: " + red.hex()); // outputs: "red: #FF000"
console.log("red: " + red.rgb()); // outputs: "red: rgb(255, 0, 0)"
console.log("red: " + red.hsl()); // outputs: "hsl: hsl(0, 1, 1)"
 
// hex format is the default:
console.log("red: " + red); // outputs: "red: #FF0000"

Edge Conditions

The HSL color space allows for changes that have no visual effect:

  • If the saturation of a color is 0, a change of hue no longer has a visual effect. The color will remain a graytone
  • If the lightness of a color is 0, neither a change of hue nor a change of saturation will have a visual effect. The color will remain black.

This library does not filter and discard values that have no effect.

The following methods make use of the HSL color space:

  • Color.rotate
  • Color.hue
  • Color.saturate
  • Color.saturation
  • Color.lighten
  • Color.lightness
  • Color.complement

Reference

module dev.colors
parse
fromRgb
fromHsl
css
Color Objects
Analysis Manipulation Output
red rgb
green hsl
blue hex
hue toString
saturation  
lightness  
isBright rotate  
isColor saturate  
  lighten  
  mix  
  invert  
  complement  

Methods of dev.colors

dev.colors.parse

parses color string into Color object
dev.colors.parse(color)
parameter:
color string
returns:
new Color object
throws:
Error if string cannot be parsed or values are out of bounds
Examples:
var red   = dev.colors.parse('#FF0000'),
    green = dev.colors.parse('#0F0'),
    blue  = dev.colors.parse('rgb(0, 0, 255)'),
    white = dev.colors.parse('white'),
    page  = dev.colors.parse(dev.colors.wikia.page);


dev.colors.fromRgb

creates Color object from numeric RGB values
dev.colors.fromRgb(red, green, blue)
parameter:
red Number between 0 and 255
 
green Number between 0 and 255
 
blue Number between 0 and 255
returns:
new Color object
throws:
Error if parameters aren't numbers or out of bounds
Example:
var red   = dev.colors.fromRgb(255, 0, 0);


dev.colors.fromHsl

creates Color object from HSL values
dev.colors.fromHsl(hue, saturation, lightness)
parameter:
hue Number between 0 and 1
 
saturation Number between 0 and 1
 
lightness Number between 0 and 1
returns:
new Color object
throws:
Error if parameters aren't numbers or out of bounds
Example:
var red   = dev.colors.fromHsl(0, 1, 1);


dev.colors.css

adds CSS-string to document head after replacing pseudo-values
dev.colors.css(styles)
parameter:
styles string that can be parsed into CSS
dev.colors.css(styles)
parameter:
styles string that can be parsed into CSS
 
custom object with pseudo-values as keys and real values as values


Methods of Color Objects

Color.rotate

rotates a color's hue by a degree
Color.rotate(degree)
parameter:
degree number between -360 and 360
returns:
new Color object
throws:
Error if degree is not a number or out of bounds
var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!


Color.saturate

saturates (positive values) or desaturates (negative values) a color
Color.saturate(percentage)
parameter:
percentage number between -100 and 100
returns:
new Color object
throws:
Error if percentage is not a number or out of bounds
var paleBlue = dev.colors.parse('blue').saturate(-10);


Color.lighten

lightens (positive values) or darkens (negative values) a color.
Color.lighten(percentage)
parameter:
percentage number between -100 and 100
returns:
new Color object
throws:
Error if percentage is not a number or out of bounds
var darkBlue = dev.colors.parse('blue').lighten(-10);


Color.mix

mixes two colors together (like the equivalent SASS function)
Color.mix(otherColor)
parameter:
otherColor Color object or string that can be parsed into Color object
returns:
new Color object
throws:
Error if otherColor is not a Color object or cannot be parsed
Mixes the two colors in equal proportion (50-50)
var orange = yellow.mix('red');
Color.mix(otherColor, percentage)
parameter:
otherColor Color object or string that can be parsed into Color object
 
percentage number between 0 and 100
returns:
new Color object
throws:
Error if otherColor is not a Color object or cannot be parsed
Mixes a second color with the object's current color. The given weight value biases the proportion/dominance of the current color. Values below 50 bias against the current color, values above 50 are in favor of it.
var sunYellow = yellow.mix('red', 80);


Color.invert

inverts a color (see section about negating colors above)
Color.invert()
returns:
new Color object


Color.complement

complements a color (see section about negating colors above)
Color.complement()
returns:
new Color object


Color.isBright

checks whether a color is bright or dark (luminance)
Color.isBright()
returns:
boolean
console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false


Color.isColor

checks whether this color is not a graytone. i.e. saturation and lightness are both greater than zero.
Color.isColor()
returns:
boolean
console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true


Color.red

get or sets the amount of red spectrum mixed into the color
Color.red()
returns:
number between 0 and 255
alert(dev.colors.parse('red').red()); // 255
Color.red(value)
parameter:
value number between 0 and 255
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var white = cyan.red(255);


Color.green

get or sets the amount of green spectrum mixed into the color
Color.green()
returns:
number between 0 and 255
alert(dev.colors.parse('red').green()); // 0
Color.green(value)
parameter:
value number between 0 and 255
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var white = magenta.green(255);


Color.blue

get or sets the amount of blue spectrum mixed into the color
Color.blue()
returns:
number between 0 and 255
alert(dev.colors.parse('red').blue()); // 0
Color.blue(value)
parameter:
value number between 0 and 255
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var white = yellow.blue(255);


Color.hue

get or sets the hue of a color
Color.hue()
returns:
number between 0 and 1
alert(dev.colors.parse('white').hue()); // 0
Color.hue(value)
parameter:
value number between 0 and 1
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var red = cyan.hue(0);


Color.saturation

get or sets the saturation of a color
Color.saturation()
returns:
number between 0 and 1
alert(dev.colors.parse('white').saturation()); // 0
Color.saturation(value)
parameter:
value number between 0 and 1
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var white = red.saturation(0);


Color.lightness

get or sets the lightness (brightness) of a color
Color.lightness()
returns:
number between 0 and 1
alert(dev.colors.parse('white').lightness()); // 1
Color.lightness(value)
parameter:
value number between 0 and 1
returns:
new Color object
throws:
Error if value is not a number or out of bounds
var black = red.lightness(0);


Color.rgb

converts the Color object to a string in rgb() format
Color.rgb()
returns:
String
alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)


Color.hsl

converts the Color object to a string in hsl() format
Color.hsl()
returns:
String
alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(0.6666666666666666, 1, 0.5)


Color.hex

converts the Color object to a string in hex format
Color.hex()
returns:
String
This method is more or less redundant since it doubles as the Color object's toString() method. Whenever you let JavaScript handle the converting you will implicitly call Color.hex
alert('Blue is: ' + dev.colors.parse('blue').hex()); // Blue is: #0000FF


Color.toString

toString() is a standard JavaScript function. This is an alias for Color.hex which will automatically convert your color object instances into hex form when concatenated.
Color.toString()
returns:
String
alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff


Start a Discussion Discussions about Colors

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.