Colores

• dev.colors.fandom.body - #f6f6f6 (for el fondo del contenido; $body)
• dev.colors.fandom.page - #ffffff (for el fondo del artículo; $page)
• dev.colors.fandom.menu - #404a57 (for elementos de menú/botón; $menu)
• dev.colors.fandom.header - #404a57 (for el encabezado; $header)
• dev.colors.fandom.link - #009bbe (for enlace de contenido; $content link)
• dev.colors.fandom.split - #bacdd8 (for fondos divididos; $split)
• dev.colors.fandom.contrast - #ffffff (for texto del menú/botón; $contrast)
• dev.colors.fandom.text - #3a3a3a (for texto del artículo; $text)
• dev.colors.fandom.border - #cccccc (for color del borde/separador; $border)
• dev.colors.fandom.gradient - #6b7b91 (for interacción del menú/elemento; $gradient)

Aplicando los colores

La forma más sencilla de utilizar los colores anteriores es escribir CSS normal pero utilizar pseudocolores en lugar de los normales:

a { color: $link; }

Agregue todas estas reglas a una cadena y luego páselo a dev.colors.css(). dev.colors.css() reemplazará todos los pseudo-valores y agregará la hoja de estilo al encabezado del documento:

Ejemplo 1:

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

Puede utilizar un segundo parámetro opcional para agregar pseudovalores propios. Tenga en cuenta que debe anteponer el nombre de sus propios valores con un signo $:

Ejemplo 2:

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

Brillo y oscuridad

Una parte clave del diseño de los distintos esquemas de color en Fandom es determinar si el esquema es brillante u oscuro. dev.colors ofrece un método para eso, pero más importante aún: agregará dos clases a la etiqueta del cuerpo:

1. .menu-dark o .menu-bright - dependiendo de si el fondo del menú y los botones es oscuro o brillante
2. .page-dark o .page-bright - dependiendo de si el fondo del área del artículo es oscuro o brillante

Manipulación de colores

Para manipular el color, primero debe crear un objeto de color. dev.colors ofrece tres fábricas:

// 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.fandom are strings too:
var body = dev.colors.parse(dev.colors.fandom.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);

Una vez que tenga un objeto de color, puede manipularlo:

// 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');

Negar colores

dev.colors tiene dos funciones para negar colores: complement() y invert(). Si bien ambos son matemáticamente simples, su efecto sobre los colores es un poco difícil de visualizar:

• invert() niega el tono, la saturación y la claridad de un color porque actúa en el espacio de color RGB: ${\displaystyle rgb_{inverted} = rgb(max_r - r, max_g - g, max_b - b)}$
• complement() niega solo el tono. La saturación y la luminosidad permanecen sin cambios: ${\displaystyle hsl_{complemented} = hsl(max_h - h, s, l)}$. La consecuencia más obvia es que complement() solo afecta a los colores. El blanco, el negro y cualquier tono gris intermedio permanecen (aparentemente) sin cambios.

Algunos ejemplos:

Conversión de objetos de color en cadenas

Cuando haya mezclado y combinado los colores que le gustan, querrá convertirlos nuevamente en cadenas para poder usarlos en CSS:

console.log("red: " + red.hex()); // "red: #FF000"
console.log("red: " + red.rgb()); // "red: rgb(255, 0, 0)"
console.log("red: " + red.hsl()); // "hsl: hsl(0, 100%, 100%)"

// hex format is the default:
console.log("red: " + red); // "red: #FF0000"

Condiciones de borde

El espacio de color HSL permite cambios que no tienen ningún efecto visual:

• Si la saturación de un color es 0, un cambio de tono ya no tiene efecto visual. El color seguirá siendo un tono gris
• Si la claridad de un color es 0, ni un cambio de tono ni un cambio de saturación tendrán un efecto visual. El color seguirá siendo negro.

Esta biblioteca no filtra y descarta valores que no tienen ningún efecto.

Los siguientes métodos utilizan el espacio de color HSL:

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

Referencia

Methods of dev.colors

dev.colors.parse(color)

Parses a color string into a Color object.

Parameters

1. 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.fandom.page);

dev.colors.fromRgb(red, green, blue)

Creates a Color object from numeric RGB values.

Parameters

1. red: Number between 0 and 255
2. green: Number between 0 and 255
3. blue: Number between 0 and 255

Returns

New Color object

Throws

Error if parameters aren't numbers or out of bounds

Examples

var red = dev.colors.fromRgb(255, 0, 0);

dev.colors.fromHsl(hue, saturation, lightness)

Creates a Color object from HSL values.

Parameters

1. hue: Number between 0 and 1
2. saturation: Number between 0 and 1
3. lightness: Number between 0 and 1

Returns

New Color object

Throws

Error if parameters aren't numbers or out of bounds

Examples

var red = dev.colors.fromHsl(0, 1, 1);

dev.colors.css(styles)

Adds CSS-string to the document head after replacing pseudo-values.

Parameters

1. styles: string that can be parsed into CSS

dev.colors.css(styles, custom)

Adds CSS-string to the document head after replacing pseudo-values.

Parameters

1. styles: string that can be parsed into CSS
2. custom: object with pseudo-values as keys and real values as values

Methods of Color Objects

Color.rotate(degree)

Rotates a color's hue by a degree.

Parameters

1. degree: Number between -360 and 360

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!

Color.saturate(percentage)

Saturates (positive values) or desaturates (negative values) a color.

Parameters

1. percentage: Number between -100 and 100

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var paleBlue = dev.colors.parse('blue').saturate(-10);

Color.lighten(percentage)

Lightens (positive values) or darkens (negative values) a color.

Parameters

1. percentage: Number between -100 and 100

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var darkBlue = dev.colors.parse('blue').lighten(-10);

Color.mix(otherColor)

Mixes two colors together (like the equivalent SASS function) in equal proportion (50-50).

Parameters

1. otherColor: Color object or string that can be parsed into Color object

Returns

New Color object

Throws

Error if the first argument is not a Color object or cannot be parsed

Examples

var orange = yellow.mix('red');

Color.mix(otherColor, percentage)

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.

Parameters

1. otherColor: Color object or string that can be parsed into Color object
2. percentage: Number between 0 and 100

Returns

New Color object

Throws

Error if the first argument is not a Color object or cannot be parsed

Examples

var sunYellow = yellow.mix('red', 80);

Color.invert()

Inverts a color (see section about negating colors above).

Returns

New Color object

Color.complement()

Complements a color (see section about negating colors above).

Returns

New Color object

Color.isBright()

Checks whether a color is bright or dark (luminance).

Returns

boolean

Examples

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.

Returns

boolean

Examples

console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true

Color.red()

Gets the amount of red spectrum mixed into the color.

Returns

Number between 0 and 255

Examples

alert(dev.colors.parse('red').red()); // 255

Color.red(value)

Sets the amount of red spectrum mixed into the color.

Parameters

1. value: Number between 0 and 255

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var white = cyan.red(255);

Color.green()

Gets the amount of green spectrum mixed into the color.

Returns

Number between 0 and 255

Examples

alert(dev.colors.parse('red').green()); // 0

Color.green(value)

Sets the amount of green spectrum mixed into the color.

Parameters

1. value: Number between 0 and 255

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var white = magenta.green(255);

Color.blue()

Gets the amount of blue spectrum mixed into the color.

Returns

Number between 0 and 255

Examples

alert(dev.colors.parse('red').blue()); // 0

Color.blue(value)

Sets the amount of blue spectrum mixed into the color.

Parameters

1. value: Number between 0 and 255

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var white = yellow.blue(255);

Color.hue()

Gets the hue of a color.

Returns

Number between 0 and 1

Examples

alert(dev.colors.parse('white').hue()); // 0

Color.hue(value)

Sets the hue of a color.

Parameters

1. value: Number between 0 and 1

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var red = cyan.hue(0);

Color.saturation()

Gets the saturation of a color.

Returns

Number between 0 and 1

Examples

alert(dev.colors.parse('white').saturation()); // 0

Color.saturation(value)

Sets the saturation of a color.

Parameters

1. value: Number between 0 and 1

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var white = red.saturation(0);

Color.lightness()

Gets the lightness (brightness) of a color.

Returns

Number between 0 and 1

Examples

alert(dev.colors.parse('white').lightness()); // 1

Color.lightness(value)

Sets the saturation of a color.

Parameters

1. value: Number between 0 and 1

Returns

New Color object

Throws

Error if the argument is not a number or out of bounds

Examples

var black = red.lightness(0);

Color.rgb()

Converts the Color object to a string in RGB format.

Returns

string

Examples

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.

Returns

string

Examples

alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(240, 100%, 50%)

Color.hex()

Converts the Color object to a string in hex format. 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.

Returns

string

Examples

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.

Returns

string

Examples

alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff