Большинство палитр начинаются с одного цвета, который кому-то уже нравится: синий, зеленый логотипа, мазок ткани для свадьбы. Сложная часть - это все после первого выбора. Какие цвета идут с ним, сколько вам нужно и почему набор, который выглядит сбалансированным в инструменте дизайна, разваливается, когда текст помещается поверх него?
Цветовая гармония отвечает на первые два вопроса простой геометрией на цветовом круге Контраст отвечает на третий, и это тот, кого люди пропускают Это руководство охватывает оба, с реальными значениями HEX вы можете проверить, и показывает, как свободные генератор цветовой палитры превращает один базовый цвет в шесть видов палитры.
TL;DR: Генератор цветовой палитры вращает базовый цвет 's оттеняет цветное колесо HSL фиксированными углами (180 градусов для дополнительных, 120 для триадных, 90 для тетрадных, 30 и 60 для аналогичных) или перемещает его легкость, чтобы создавать оттенки, оттенки и монохроматические наборы. Генератор цветовой палитры Toolz делает это на стороне клиента бесплатно, без регистрации: выберите базу, выберите один из шести режимов, щелкните свотч, чтобы скопировать его код HEX, или скопируйте весь набор в соответствии с индивидуальными свойствами CSS. HSL не является перцепционно однородным, поэтому проверьте любой текст и пару фона на соответствие соотношениям контрастности WCAG перед отправкой.
Что такое генератор цветовой палитры?
Генератор цветовой палитры - это инструмент, который берет один начальный цвет и вычисляет связанные цвета из него с помощью фиксированных правил, поэтому набор выглядит согласованным без проб и ошибок. правила исходят из цветового круга: цвета напротив друг друга контрастируют, цвета рядом друг с другом смешиваются, а цвета равномерно распределяются вокруг баланса колес.
Генератор Toolz работает в HSL, который описывает цвет как оттенок, насыщенность и легкость Оттенок - это угол от 0 до 360 градусов вокруг колеса (красный в 0, зеленый в 120, синий в 240). насыщенность - это то, насколько яркий цвет, от 0% серый до 100% полный цвет. Легкость проходит от 0% черного до 100% белого. HSL определяется для полотна в Цветовой модуль CSS, уровень 4 спецификация, и каждый браузер преобразует ее в одни и те же значения RGB.
Работа в HSL делает правила гармонии легко выразить. дополняющий цвет - это та же насыщенность и легкость с добавлением 180 к оттенку. это одно дополнение вместо большого количества возиться с ползунками RGB.
Каковы шесть ладов гармонии?
Каждый режим - это рецепт удаления от базового цвета Вот именно то, что генератор Toolz делает в каждом из них, взятое из его исходного кода.
| мода | Что меняется | Образцы | Позиции оттенка |
|---|---|---|---|
| Оттенки & усилитель; Оттенки | Только легкость, установленная на 90, 75, 60, базовое значение, 35, 22 и 12 | 7 | Базовый оттенок |
| однотонный | Легкость и насыщенность вместе | 5 | Базовый оттенок |
| дополнительный | Оттенок переворачивается на 180 градусов, с более светлым основанием и более темным дополнением | 4 | База, база + 180 |
| сходный | Оттенок ступенчатый 30 градусов в каждую сторону | 5 | -60, -30, база, +30, +60 |
| триадный | Хюэ отстоял на треть круга друг от друга | 3 | База, +120, +240 |
| Тетрадический | Хюэ отстоял на четверть круга друг от друга | 4 | База, +90, +180, +270 |
Две детали имеют значение на практике. аналогично, триадный и тетрадический сохраняют базовый цвет 's насыщенность и светлость на каждой части, поэтому они меняют только оттенок. оттенки & amp; оттенки и монохроматические сохраняют оттенок и меняют светлость, поэтому они производят светлые и темные версии одного цвета.
Рабочий пример: каждый режим из #4466ee
Генератор открывается #4466ee, средний синий. преобразован в HSL это оттенок 228, насыщенность 83%, легкость 60%. вот что каждый режим возвращает для этой базы. это коды HEX, которые печатает инструмент, и вы можете воспроизвести их со стандартным преобразованием HSL в RGB в спецификации CSS.
триадный добавляет к оттенку 120 и 240: 228, затем 348, затем 108 (468 обертывается до 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Обратите внимание на рисунок При одинаковой насыщенности и легкости вращение ровно на треть колеса производит перестановку тех же трех значений канала RGB: 44, 66 и ee торговых мест.
дополнительный добавляет 180, который попадает на оттенок 48, теплый желтый Режим также включает более светлую версию основы и более темную версию дополнения, так что вы получаете четыре отрывка: #8aa0f4, #4466ee, #eecc44 и #d2ac14.
сходный шаги 30 градусов за раз от 168 до 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. Он читается как полоса от бирюзового до синего и фиолетового.
Тетрадический добавляет 90, 180 и 270: #4466ee, #ee44bb, #eecc44, #44ee77.
однотонный сохраняет оттенок 228 и обменивает насыщенность на легкость в обоих направлениях: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Оттенки & усилитель; Оттенки устанавливает легкость на 90, 75, 60, базовое значение, 35, 22 и 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
Последний показывает причуду, которую стоит знать Шкала оттенков использует фиксированные шаги легкости плюс основание's собственной легкости, Когда основание случается сидеть ровно на 90, 75, 60, 35, 22 или 12 процентов легкости, как #4466ee делает на 60, два swatches выходят идентичными. Подтолкнуть базовую легкость на один шаг, если вы хотите семь различных цветов.
Как правильно выбрать гармонию для работы?
Выберите гармонию по тому, насколько контрастны нужны дизайну. схемы с низким контрастом чувствуют себя спокойно и их легко поддерживать в последовательности; схемы с высоким контрастом привлекают внимание, и их легко переусердствовать.
| мишень | Хороший стартовый режим | почему |
|---|---|---|
| Цветовая шкала пользовательского интерфейса (от 100 до 700) | Оттенки & усилитель; Оттенки | Один оттенок, предсказуемые шаги от света до темноты |
| Минимальный, сплоченный бренд | однотонный | Все имеет общий оттенок, ничто не противоречит |
| Выделяющийся призыв к действию | дополнительный | Противоположный оттенок - самый сильный контраст |
| Мягкий, естественный вид | сходный | Соседние оттенки смешиваются |
| Игровой, сбалансированный сет | триадный | Три равномерно расположенных оттенка, ни одного доминирующего |
| Графики с несколькими сериями | Тетрадический | Четыре различных оттенка, которые все еще связаны |
Общее эмпирическое правило для макетов - позволить одному цвету покрыть большую часть области, второму - меньшую долю, а акценту появляться умеренно. он хорошо работает с дополнительными и триадными палитрами, где предоставление всем цветам равного пространства имеет тенденцию выглядеть громко.
Почему палитра выглядит сбалансированной, но плохо читается?
Палитра может выглядеть сбалансированной в HSL и при этом провалиться на экране, потому что HSL легкость не является тем, насколько ярким цвет выглядит для человека. HSL относится к каждому оттенку при 60% легкости как к одинаково светлому Человеческое зрение не.
Дополнительный пример выше делает этот бетон. #4466ee и #eecc44 оба имеют HSL-светлость 60%. их относительная яркость, мера, которую Руководство по доступности веб-контента использует для воспринимаемой яркости, очень отличается: около 0,17 для синего и около 0,62 для желтого. желтый цвет в несколько раз ярче для глаз.
Этот разрыв проявляется как контраст. Используя формулу WCAG, коэффициент контрастности = (L1 + 0,05)/(L2 + 0,05), где L1 - более светлый цвет и #39;s яркость:
| Пара | Контрастное соотношение | WCAG AA для обычного текста (4,5:1) |
|---|---|---|
| Белый текст на #4466ee | около 4,77:1 | Проходит |
| Белый текст на #eecc44 | около 1,57:1 | неудача |
| Черный текст на #eecc44 | около 13,4:1 | Проходит |
Сам генератор уже реагирует на это: каждый образец выбирает темный или белый текст метки из оценки яркости, поэтому желтые образцы получают темные метки. Для реальных дизайнов запустите пары текста и фона, которые вы планируете использовать, через a проверка контрастности цвета. Пороги исходят от WCAG 2.2: 4,5:1 для обычного текста и 3:1 для большого текста на уровне АА. цветовое контрастное руководство шаг за шагом проходит по математике яркости.
Как экспортировать палитру в качестве переменных CSS?
Нажмите "Копировать CSS", и генератор поместит текущую палитру в буфер обмена в виде пользовательских свойств CSS :root. Имена нумеруются с шагом 100 в порядке свотчей Для триадного примера:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Вставьте это в верхнюю часть таблицы стилей и укажите цвета где угодно:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
Нумерация соответствует порядку переходов, а не светлоте. В оттенках & усилитель; Режим оттенков, который, как оказалось, проходит от светлого до темного, так что --color-100 является самым легким оттенком. в триадном или аналогичном режиме числа являются просто позициями. переименовать переменные в что-то значимое, например --brand, --accent а --surface как только вы выбрали, потому что --color-200 ничего не значит для следующего человека, читающего ваш CSS.
Чтобы скопировать один цвет вместо этого, щелкните его swatch.HEX код переходит в буфер обмена и swatch показывает & quot;Copied& quot; на мгновение.
Сделать из него свадебную или пастельную палитру можно?
Да, пока вы приносите начальный цвет. нет свадебных предустановок или кураторских тем, поэтому палитра хороша только так, как основа, которую вы выбираете.
Для свадьбы возьмите цвет из чего-то настоящего: цветов, запаса пригласительных билетов, ткани платья подружки невесты. введите его HEX-код и попробуйте каждый режим. начиная с шалфейного зеленого, #9caf88, Дополнительный возврат #c2ceb6, #9caf88, пыльная лаванда #9b88af и более глубокий #755e8d. Эта лаванда против шалфея - классическая пара, и математика нашла ее в один клик.
Для пастелей, начать с бледной, мягко насыщенной основы, такой как #a7c7e7. аналоговые, триадные и тетрадические сохраняют эту легкость и насыщенность на каждой части, поэтому весь набор остается мягким. оттенки &ампер; оттенки и монохроматические намеренно двигают светлость, поэтому они добавляют темные цвета, до #0d1f30 для этого синего. нет отдельного ползунка светлоты; базовый цвет является контролем.
Цвета экрана и печатные цвета различаются Монитор смешивает красный, зеленый и синий свет, в то время как принтер кладет голубые, пурпурные, желтые и черные чернила на бумагу, а некоторые яркие цвета экрана не имеют точного эквивалента чернил. если палитра идет на канцелярские товары, закажите распечатанное доказательство перед полным тиражом.
Каковы распространенные ошибки и случаи ошибок?
Большинство задач палитры возникают из-за ввода или слишком большого доверия к математике.
Палитра синеет во время набора текста. Пока текстовое поле не содержит действительный HEX-код, генератор возвращается к #4466ee. Полутипированное значение, подобное #9c или #9caf8 показывает синюю палитру по умолчанию. поле принимает три или шесть шестизначных цифр, с или без #, так #9ca на пути к #9caf88 кратко показывает палитру для #99ccaa.
Базовый свотч находится в одном шаге. Цвета округляются до целых номеров HSL перед обратным преобразованием, поэтому некоторые базы не выполняют точно туда и обратно. #c08081, например, возвращается как #c18182. Разница составляет одну единицу на канал и невидима, но важно, если вы точно соответствуете коду бренда: сохраните официальный HEX для базы и используйте сгенерированные для остальных.
Использование каждого цвета повсюду. Пятицветная аналогичная палитра - это диапазон на выбор, а не пять цветов, которые нужны для работы.
Пропуск контраста. Как показано выше, два цвета при одинаковой HSL-светлости могут отличаться яркостью более чем в три раза. проверьте текстовые пары.
Ожидание перцептивной ровности. Шаги оттенка даже в HSL легкость, не в том, как свет они выглядят Если вам нужна шкала, которая выглядит ровным, отрегулируйте отдельные шаги на глаз или работайте в пространстве восприятия, например OKLCH, который также определяет CSS Цвет 4.
Как это соотносится с другими цветными инструментами?
Генерация палитры - это один шаг в более длительном рабочем процессе. Таблица показывает, какой инструмент подходит для каждого шага.
| Задача | стрелка | Что оно дает вам |
|---|---|---|
| Найдите или попробуйте начальный цвет | Цветосборщик | HEX, RGB и HSL для любого цвета |
| Постройте скоординированный набор | Генератор цветовой палитры | Шесть режимов гармонии, экспорт CSS |
| Сделайте мелкозернистую чешуйку одного цвета | Генератор цветовых оттенков | Специальная рампа оттенка и тени |
| Смешайте два цвета | Цветовой смеситель | Промежуточные цвета между двумя входами |
| Проверьте читаемость текста | Проверка контрастности цвета | Коэффициент WCAG и пройден или вышел из строя |
Если масштаб имеет большее значение, чем гармония, то руководство по созданию оттенков и оттенков идет глубже на построении 50 до 900 пандусов. каждый цветной инструмент указан на концентратор цветных инструментов, йо-
Является ли генератор частным и работает ли он в автономном режиме?
Да. Все математические вычисления и рендеринг HSL выполняются в вашем браузере с помощью JavaScript. Ничего из того, что вы вводите, не загружается, а после загрузки страницы генератор палитры продолжает работать без сетевого подключения Копирование swatch или CSS засчитывается в ежедневный лимит использования, который записывает режим, в котором вы были, а не ваши цвета.
