1. Надає список найважливіших кольорів на даній сторінці, які ви можете використати в своєму скрипті для адаптації якихось його елементів до колірної схеми вікі;
2. Дає можливість маніпулювати кольорами за допомогою певних методів, тому ви зможете створити свою колірну схему на базі існуючої.

Примітка: ця бібліотека призначена для JavaScript-розробників. Якщо ви не пишете скрипт, вона буде даремна для вас. Відвідайте w:Help:Color, щоб отримати про кольори більше інформації.

Кольори

• dev.colors.fandom.body - #f6f6f6 (for фону сторінки; $body)
• dev.colors.fandom.page - #ffffff (for фону статті; $page)
• dev.colors.fandom.menu - #404a57 (for елементів меню та клавіш; $menu)
• dev.colors.fandom.header - #404a57 (for капелюхи сторінок; $header)
• dev.colors.fandom.link - #009bbe (for посилань; $content link)
• dev.colors.fandom.split - #bacdd8 (for розділень фонів; $split)
• dev.colors.fandom.contrast - #ffffff (for тексту на клавішах і у меню; $contrast)
• dev.colors.fandom.text - #3a3a3a (for тексту статті; $text)
• dev.colors.fandom.border - #cccccc (for меж і роздільників; $border)
• dev.colors.fandom.gradient - #6b7b91 (for взаємодій з меню і елементами; $gradient)

Застосування кольорів

Найпростіший спосіб використовувати кольори вище — використовувати CSS, але замість звичайних кольорів застосовувати псевдокольори:

a { color: $link; }

Напишіть ці стильні правила в рядок, а потім вставте її в метод dev.colors.css(). Він замінить все псевдовеличини на справжні і з'явиться в «голові» сторінки.

Приклад 1:

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

Ви можете використати необов'язковий другий параметр, щоб додати свої власні псевдокольори. Але зауважте, що для застосування їх потрібно писати ім'я кольору зі значка $.

Приклад 2:

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

Освітленість і затемненність

Ключовий момент дизайну колірних схем по всьому Фандому — визначення того, яка це тема: темна чи світла. dev.colors пропонує для цих цілей спеціальний метод, а, що більш важливо, в код сторінки будуть додані два класи:

1. .menu-dark і .menu-bright позначають клавіші і меню в темній і світлій темах відповідно;
2. .page-dark і .page-bright залежить від фону статті, темного чи світлого.

Управління кольорами

Щоб управляти кольорами, вам потрібен об'єкт з кольором. dev.colors надає три методи, що створюють цей об'єкт:

// parse() дозволяє створити колір з рядка:
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');

// і з назв кольорів по dev.colors.wikia:
var body = dev.colors.parse(dev.colors.fandom.body);

// fromRgb() дає виставити кольори за допомогою цифр значення повинні бути в проміжку від 0 до 255:
var red = dev.colors.fromRgb(255, 0, 0);

// fromHsl() жіє схоже, але використовує кольорову модель HSL значення повинні бути в проміжку від 0 до 1:
var red = dev.colors.fromHsl(0, 1, 1);

І тепер, коли об'єкт у нас є, їм можна управляти:

// освітлити червоний на 20%:
var lightRed = red.lighten(20);

// зменшити насиченість червоного на 20%:
var paleRed = red.saturate(-20);

// провернути відтінок на 180 градусів для отримання відповідного вихідному кольору:
var cyan = red.rotate(180);

// змішати два кольори:
var orange = red.mix('yellow');

Негативні кольори

У dev.colors є дві функції для звернення кольорів в негативні: complement() і invert(). Вони обидва вкрай прості, а їх дія на кольори трохи різниться:

• invert() робить протилежними відтінок, насиченість і яскравість кольору, оскільки він діє в схемі RGB: ${\displaystyle rgb_{inverted} = rgb(max_r - r, max_g - g, max_b - b)}$
• complement() звертає в негативний тільки відтінок. Насиченість і яскравість не змінюються: ${\displaystyle hsl_{complemented} = hsl(max_h - h, s, l)}$. Найочевиднішим зміною після застосування методу є зміна кольору. Відтінки чорного, білого і сірого не змінюються.

Деякі приклади

Конвертація об'єктів Color у строках

Коли ви зробили кольори, які вам до душі, може з'явитися потреба конвертувати їх назад в рядки для подальшого використання їх в такому вигляді в 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%)"

// за замовчуванням стоїть шістнадцятковий формат:
console.log("red: " + red); // "red: #FF0000"

Умови роботи

Колірний простір HSL дозволяє зробити зміни кольорів, ніяк на себе не проявляють:

• Якщо насиченість дорівнює 0, зміна відтінку ні до чого не приведе. Колір так і залишиться сірим.
• Якщо яскравість дорівнює 0, ні відтінок, ні насиченість нічого не дають. Колір так і буде чорним.

Ця бібліотека не відфільтровує і не вилучят значення, що не володіють ефектом.

Такі методи використовують кольоровий простір HSL:

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

Виноска

Методи dev.colors

dev.colors.parse(color)

Звертає рядок в об'єкт Color

Parameters

1. color: рядок

Returns

новий об'єкт Color

Throws

помилку, якщо звернути не можна або якщо значення невірні

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)

Створює об'єкт Color зі значень RGB

Parameters

1. red: число від 0 до 255
2. green: число від 0 до 255
3. blue: число від 0 до 255

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

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

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

створює об'єкт Color зі значень HSL

Parameters

1. hue: число від 0 до 1
2. saturation: число від 0 до 1
3. lightness: число від 0 до 1

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

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

dev.colors.css(styles)

додає CSS-код в «голову» документа після заміни псевдокольорів

Parameters

1. styles: рядок, аналізується за правилами CSS

dev.colors.css(styles, custom)

додає CSS-код в «голову» документа після заміни псевдокольорів

Parameters

1. styles: рядок, аналізується за правилами CSS
2. custom: об'єкт з псведовеличинами в якості ключів і дійсними величинами як значення

Методи об'єкта Color

Color.rotate(degree)

обертає відтінок кольору на заданий кут

Parameters

1. degree: Number between -360 and 360

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

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

Color.saturate(percentage)

збільшує (позитивні значення) і зменшує (негативні) насиченість кольору

Parameters

1. percentage: -100 до 100

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

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

Color.lighten(percentage)

освітлює (позитивні значення) і затемнює (негативні) колір

Parameters

1. percentage: -100 до 100

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

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

Color.mix(otherColor)

змішує два кольори (еквівалент функції в SASS)

Parameters

1. otherColor: об'єкт Color або рядок, яку можна перетворити в об'єкт

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є об'єктами Color або якщо їх не можна проаналізувати

Examples

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

Color.mix(otherColor, percentage)

Змішує даний колір з поточним. Дане в функції значення визначає кількість поточного кольору. Значення менше 50 діють проти нього, більше 50 — на користь нього.

Parameters

1. otherColor: об'єкт Color або рядок, яку можна перетворити в об'єкт
2. percentage: число від 0 до 100

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є об'єктами Color або якщо їх не можна проаналізувати

Examples

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

Color.invert()

інвертує колір (див. розділ Негативні кольори)

Returns

новий об'єкт Color

Color.complement()

підбирає відповідний колір (див. розділ Негативні кольори)

Returns

новий об'єкт Color

Color.isBright()

перевірять, світлий чи колір або темний (яскравість)

Returns

boolean

Examples

console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false

Color.isColor()

перевіряє, чи є колір відтінком сірого, тобто більше чи нуля насиченість і яскравість

Returns

boolean

Examples

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

Color.red()

отримує або задає кількість червоного відтінку у кольорі

Returns

число від 0 до 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: число від 0 до 255

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var white = cyan.red(255);

Color.green()

отримує або задає кількість зеленого відтінку у кольорі

Returns

число від 0 до 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: число від 0 до 255

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var white = magenta.green(255);

Color.blue()

отримує або задає кількість синього відтінку у кольорі

Returns

число від 0 до 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: число від 0 до 255

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var white = yellow.blue(255);

Color.hue()

отримає або задає відтінок кольору

Returns

число від 0 до 1

Examples

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

Color.hue(value)

Sets the hue of a color.

Parameters

1. value: число від 0 до 1

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var red = cyan.hue(0);

Color.saturation()

отримає або задає насиченість кольору

Returns

число від 0 до 1

Examples

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

Color.saturation(value)

Sets the saturation of a color.

Parameters

1. value: число від 0 до 1

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var white = red.saturation(0);

Color.lightness()

отримає або задає яскравість кольору

Returns

число від 0 до 1

Examples

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

Color.lightness(value)

Sets the saturation of a color.

Parameters

1. value: число від 0 до 1

Returns

новий об'єкт Color

Throws

помилку, якщо параметри не є числами або якщо вони не входять у встановлений проміжок

Examples

var black = red.lightness(0);

Color.rgb()

конвертує об'єкт Color в рядок у форматі RGB

Returns

рядок

Examples

alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)

Color.hsl()

конвертує об'єкт Color в рядок у форматі HSL

Returns

рядок

Examples

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

Color.hex()

конвертує об'єкт Color в рядок у форматі HEX

Returns

рядок

Examples

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

Color.toString()

toString() — стандартна функція JavaScript. Тут має подібну функцію — Color.hex. Конвертує об'єкт Color в рядок у форматі HEX

Returns

рядок

Examples

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