Генератор на цветови палитри - Създайте хармонични цветови схеми

Какво представлява генераторът на цветови палитри?

Генераторът на цветови палитри е инструмент, който създава набор от цветове, които си подхождат, въз основа на един начален цвят, наречен основен цвят. Този генератор приема основен цвят и тип хармония, след което изчислява останалите цветове в палитрата според правилата на теорията на цветовете. Поддържаните четири типа хармония са допълваща, аналогична, триадична и монохроматична.

Как инструментът създава палитра

Инструментът преобразува основния цвят от шестнадесетичен код (например #3B82F6) в цветовия модел HSL. HSL описва цвета с три числа:

• Тон: позицията на цвета върху цветово колело с обхват от 360 градуса (0° е червено, 120° е зелено, 240° е синьо).
• Наситеност: интензивността на цвета — от 0% (сиво) до 100% (чист цвят).
• Светлота: доколко цветът е близък до черно или бяло — от 0% (черно) до 100% (бяло).

Всеки тип хармония променя тона, светлотата или и двете, след което преобразува резултата обратно в шестнадесетичен код.

Как се изчисляват допълващите цветове

Формулата:

$h' = (h + 180) \bmod 360$

където h е оттенъкът на основния цвят в градуси, а h′ — новият оттенък. Операцията mod връща резултат, надхвърлящ пълната обиколка, обратно върху цветното колело.

Наситеността и светлотата остават същите.

Пример с изчисление: Чистото синьо, #0000FF, има оттенък 240°, наситеност 100% и светлота 50%. Добавянето на 180° води до оттенък 60°. Преобразуването на тон 60° обратно в шестнадесетичен код при същите наситеност и светлота дава #FFFF00 — жълто. Затова този инструмент съчетава синьо с жълто, а не с оранжево.

Това може да е объркващо, защото в часовете по изобразително изкуство често се преподава друго цветно колело — пигментното колело RYB (червено-жълто-синьо), при което противоположният на синьото цвят е оранжев. Този инструмент работи с базираното на RGB HSL цветно колело, използвано от екраните, затова допълващите му двойки се различават от колелото за смесване на бои.

Как се изчисляват аналогичните цветове

Аналогичните цветове се намират близо до основния цвят върху колелото. Инструментът създава два тона на разстояние 30° и два тона на разстояние 60° от основния тон, всички със същите наситеност и светлота.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

където h е оттенъкът на основния цвят.

Пример с изчисление: Синьото, #0000FF (тон 240°), дава тон 270° (#8000FF), тон 210° (#0080FF), тон 300° (#FF00FF) и тон 180° (#00FFFF). Заедно с основния цвят палитрата съдържа пет цвята.

Как се изчисляват триадичните цветове

Триадичните цветове са на разстояние 120° един от друг върху колелото и образуват равномерно разположена тройка с основния цвят.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Пример с изчисление: Червеното, #FF0000 (тон 0°), дава тон 120° (#00FF00, зелено) и тон 240° (#0000FF, синьо). Трицветният набор е червено, зелено и синьо — същите три цвята, използвани като основни цветове на цифровите екрани.

Как се изчисляват монохроматичните цветове

Монохроматичните цветове запазват същите тон и наситеност и променят само светлотата. Инструментът изменя светлотата с 15 и 30 процентни пункта във всяка посока, като я ограничава между 5% и 95%.

$l \pm 15, \qquad l \pm 30$

където l е светлотата на основния цвят, изразена в процентни пункта.

Пример с изчисление: Синьото, #0000FF (светлота 50%), дава светлота 65% (#4D4DFF), светлота 35% (#0000B3), светлота 80% (#9999FF) и светлота 20% (#000066).

Поради ограниченията 5% и 95% основен цвят, който вече е много светъл или много тъмен, може да достигне една и съща граница два пъти. Черното, #000000, дава светлота 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) и отново 5% (#0D0D0D), така че един цвят се повтаря.

Използване на инструмента

1. Изберете основен цвят с инструмента за избор на цвят или въведете шестнадесетичен код, например #3B82F6.
2. Изберете тип хармония: допълваща, аналогична, триадична или монохроматична.
3. Прегледайте генерираната палитра. Всяка цветова мостра показва шестнадесетичния си код върху бутон.
4. Натиснете този бутон, за да копирате шестнадесетичния код, или използвайте „Copy All Colors“, за да копирате цялата палитра наведнъж.

Проверка на контраста за достъпност

Всяка цветова мостра е придружена от две малки значки: едната за контраста спрямо бяло, а другата за контраста спрямо черно. Инструментът изчислява коефициент на контраст по формулата на WCAG (Насоки за достъпност на уеб съдържанието):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

където C е коефициентът на контраст.

L1 е относителната яркост на по-светлия цвят, а L2 — относителната яркост на по-тъмния цвят. Яркостта се изчислява от стойностите на червения, зеления и синия компонент на цвета. Значката показва „AA“, когато коефициентът е 4,5 или повече — минималната стойност на WCAG за текст с нормален размер. Показва „!“, когато коефициентът е под 4,5. При посочване на значката с курсора се показва точният коефициент. Черен текст на бял фон има коефициент 21 — най-високата възможна стойност.

Инструментът използва същото правило за контраста, за да избере цвета на бутона за копиране върху всяка мостра. Той сравнява цвета на мострата с черно и с бяло, след което поставя този от двата цвята, който се чете по-добре. Превключването се извършва при относителна яркост около 0,179 — точката, в която двата коефициента са равни.

Често задавани въпроси

Какво представлява генераторът на цветови палитри? Това е инструмент, който създава набор от съчетаващи се цветове, започвайки от един основен цвят и избрано правило за хармония.

Защо този инструмент съчетава синьо с жълто, а не с оранжево при допълващите цветове? Инструментът завърта тона с 180° върху HSL колелото, което се основава на начина, по който екраните смесват червена, зелена и синя светлина. Пигментното червено-жълто-синьо колело, преподавано в часовете по изобразително изкуство, дава различни допълващи двойки, защото смесва пигменти, а не светлина.

Колко цвята създава всеки тип хармония? Допълващата хармония създава общо 2 цвята (включително основния). Триадичната създава 3. Аналогичната създава 5. Монохроматичната създава 5.

Какъв цветови модел използва инструментът вътрешно? HSL (тон, наситеност, светлота). Той преобразува въведения шестнадесетичен код в HSL, извършва изчисленията и след това преобразува резултата обратно в шестнадесетичен код.

Проверява ли инструментът дали цветовете са достъпни? Да. Всяка мостра показва дали има достатъчен контраст спрямо бяло и черно, за да отговаря на стандарта WCAG AA за текст с нормален размер, който изисква коефициент най-малко 4,5.

Мога ли да използвам повече от един тип хармония за даден проект? Да. Много дизайни съчетават различни типове хармония, например аналогичен набор за основните цветове и един допълващ цвят за бутон или акцент.

Цветови формати

Инструментът записва всеки генериран цвят като шестцифрен шестнадесетичен код, предшестван от знак # (например #ff0000 за червено). Шестнадесетичните кодове пряко представят стойностите на компонентите за червено, зелено и синьо, всеки от 0 до 255. Основният цвят се показва точно както е въведен, така че трицифрен съкратен код като #F00 остава в кратък формат. Трицифрените кодове означават същия цвят като шестцифрения формат: всяка цифра се удвоява, така че #F00 е #FF0000. HSL е алтернативен начин за описване на същите цветове чрез тон, наситеност и светлота вместо количества червено, зелено и синьо.