Каждая система дизайна, которую я когда-либо отправлял, начиналась с одного цвета бренда, а затем сразу же требовалась ещё дюжина. одного синего никогда не бывает достаточно. вам нужен светло-синий для состояния зависания, гораздо светлее синий для фона выбранного ряда, более темный синий для текста, который сидит на бледной поверхности, и приглушенный синий для отключенной кнопки, которая не должна кричать. когда я создавал интерфейс для [Toolz.dev](/, я продолжал открывать сборщик цветов, подталкивая ползунок светлости, присматриваясь к тому, выглядит ли результат все еще как одно семейство, и вставляя гексограммы в мой стильный лист по одному, это работало, но это было медленно, и результаты были противоречивыми, потому что "nudge, пока он не выглядит правильно и не будет повторяемым процессом.
Поэтому я построил Генератор цветовых оттенков. Вы даете ему один цвет, и он дает вам три полных масштаба, рассчитанных в цветовом пространстве Цветовой модуль CSS, уровень 4 определяет, а не подталкивая шестизначные цифры: оттенки, идущие к белому, оттенки, идущие к черному, и тона, идущие к серому. В этом руководстве объясняется, что на самом деле означают эти три слова, как работает математика и как превратить один цвет бренда в связную палитру, которую можно сразу перейти в CSS.
TL;DR: Оттенок - это ваш цвет, смешанный с белым, оттенок - это ваш цвет, смешанный с черным, а тон - это ваш цвет, смешанный с серым. Каждый сохраняет исходный оттенок и меняет только то, насколько светлым, темным или приглушенным выглядит цвет. Вставьте значение HEX, RGB или HSL, выберите, сколько шагов вы хотите, и генератор построит все три шкалы одновременно, каждый образец копируется как HEX, RGB или HSL. Все работает в вашем браузере.
В чем разница между оттенком, оттенком и тоном?
Эти три слова происходят из традиционной теории цвета, и они описывают три различных способа изменения цвета без изменения того, какой цвет он в основе своей. Различие стоит получить правильно, потому что дизайнеры, и все чаще дизайн жетонов, используют слова точно.
Оттенок - это цвет, смешанный с белым Добавление белого повышает легкость и смягчает цвет Розовый - это оттенок красного, а детское синее - оттенок более сильного синего. оттенки - это то, к чему вы тянетесь, когда вам нужны бледные фоны, тонкие наполнители и самые легкие поверхности в интерфейсе.
Тень - это цвет, смешанный с черным Добавление черного снижает светлость и углубляет цвет. темно-бордовый - оттенок красного, а темно-синий - оттенок синего. оттенки дают вам более темный конец шкалы: цвета текста, состояния нажатых кнопок и границы, которым требуется больший вес, чем основа.
Тон - это цвет, смешанный с серым. добавление серого уменьшает интенсивность цвета 's, не делая его резко светлее или темнее. тона являются наиболее недостаточно используемыми из трех, и они являются секретом за палитрами, которые чувствуют себя изысканными, а не яркими. приглушенный цвет читается как более спокойный и профессиональный, поэтому приглушенные палитры доминируют в серьезном дизайне продукта.
Важное, что все три разделяют, это то, что они сохраняют оттенок. Оттенок синего все еще синий, оттенок синего все еще синий, а тон синего все еще синий. именно это делает набор оттенков, оттенков и тонов похожим на одну семью, а не на случайный ассортимент.
Как на самом деле рассчитывается каждая шкала?
Под капотом каждый swatch является прямолинейной смеси между двумя цветами в RGB пространстве Генератор принимает ваш базовый цвет как красный, зеленый, и синий тройной, и он принимает целевой цвет, затем он идет от одного к другому в четных шагах, Для tints цель белый, который является (255, 255, 255). Для оттенков цель черная, (0, 0, 0). Для тонов цель средне-серая, (128, 128, 128), йо-
Микс для любого отдельного канала простая арифметика Чтобы получить свотч, который составляет тридцать процентов от основания к цели, вы вычисляете base + (target - base) * 0.30 для красного канала, затем зеленый канал, затем синий канал, и круглый к целым числам. Десятиступенчатая шкала оттенка работает этот расчет на десять процентов, двадцать процентов и так далее до ста процентов, где цвет стал чисто белый. Базовый цвет сам включен как нулевой процент swatch в верхней части каждой шкалы, так что вы всегда можете увидеть, с чего вы начали.
Поскольку микс происходит на канал в RGB, оттенок остается по существу фиксированным для оттенков и оттенков. Смешивание с чисто белым или чистым черным меняет то, сколько света отражает цвет, но не его основной характер, поэтому оттенок и оттенок одной и той же основы читаются как один и тот же цвет при разной яркости. Тоны могут сдвинуть воспринимаемый оттенок волоса, потому что серый сидит в нейтральном центре и тянет к нему слегка десатурирует каждый канал, но на практике вся гамма все равно читается как один цвет. Если вы хотите точно проверить, как данный образец попадает в разные форматы, Преобразователь цвета покажет вам его значения HEX, RGB, HSL и HWB рядом.
Почему бы просто не изменить легкость HSL?
Разумно вопрос, почему инструмент смешивается с RGB, а не просто поднимает или опускает его L значение в HSL. Оба подхода производят монохроматическую шкалу, и оба являются действительными. Смешивание в сторону белого и черного в RGB является классическим живописцем 's модель оттенков и оттенков, и он чисто отображается на словах, которые дизайнеры уже используют. Он также сохраняет честность конечных точек: стопроцентный оттенок является точно белым, а стопроцентный оттенок - точно черным, что не всегда верно, когда вы манипулируете легкостью HSL только из-за того, как насыщенность взаимодействует с ним. Генератор дает вам тона как третью шкалу специально для покрытия "less intensive & Quot; ось, к которой чистое изменение легкости не обращается.
Сколько шагов я должен сгенерировать?
Генератор позволяет выбрать от двух до двадцати шагов в масштабе, и правильное число зависит от того, что вы строите. Для системы проектирования, где вам нужен именованный пандус, например blue-50 через blue-900, большее количество шагов дает вам тонкий градиент, из которого вы можете сделать выборку. Для быстрой пары зависания и активных состояний три или четыре шага - это много. Мой дефолт - десять, потому что десять оттенков, десять оттенков и десять тонов с одной базы дают мне полную рабочую палитру без подавляющей стены образцов.
Больше шагов означает меньшие скачки между соседними цветами, что то, что вы хотите, когда соседние оттенки должны быть визуально различимы, но близки, как чередующиеся полосы таблицы данных. меньше шагов означает более смелые скачки, что подходит компактной палитре, где каждый цвет имеет явно разную работу. нет неправильного ответа, и потому что инструмент мгновенно перевычисляет вы можете сдвинуть счет шагов вверх и вниз, пока расстояние не будет выглядеть правильно.
Чем оттенки отличаются от снижения непрозрачности?
Ловушка, в которую я попал рано, заключалась в использовании непрозрачности, чтобы имитировать оттенок. Это кажется эквивалентным: опустите синюю кнопку до пятидесяти процентов непрозрачности на белую страницу, и она будет выглядеть как светло-синий. Проблема в том, что непрозрачность - это не цвет, это инструкция по композитингу, и она полностью зависит от того, что сидит за элементом. Тот же пятидесятипроцентный синий цвет на темной поверхности становится мутным темно-синим, а на фотографии он становится непредсказуемым. Ваш " светлый синий & quot; меняет идентичность в зависимости от своего фона, что противоположно тому, что нужно системе дизайна.
Оттенок решает эту проблему, выпекая легкость в настоящий непрозрачный цвет. чашечка, которую дает вам генератор, представляет собой фиксированное значение шестигранника, которое выглядит одинаково, независимо от того, что за ним стоит, потому что оно полностью непрозрачно. когда вам нужна последовательная более легкая версия цвета, который предсказуемо ведет себя на каждой поверхности вашего продукта, используйте оттенок, а не прозрачность. Резервируйте непрозрачность для эффектов подлинной прозрачности, таких как наложения и сетки, где вы действительно хотите, чтобы фон был показан. Сохранение этих двух идей отдельно - одна из тихих привычек, которая делает палитру более твердой, чем случайной.
Как превратить эти весы в пригодную для использования палитру?
Палитра - это не просто куча цветов, это набор заданий. Вот рабочий процесс, который я использую, когда начинаю с одного цвета бренда. Возьмите основу в качестве основного цвета действия, тот, что на ваших основных кнопках и ссылках. Дойдите до оттенков для фона: очень легкий оттенок для поверхностей страницы или карты, немного более сильный оттенок для состояния зависания светового элемента. Дойдите до оттенков для текста и акцента: глубокий оттенок для копии тела, который нуждается в контрасте против бледного оттенка, средний оттенок для нажатого состояния вашей основной кнопки. Используйте тон, когда вам нужен цвет присутствует, но тихий, как отключенный элемент управления или дополнительный значок.
Единственное правило, которое вы не можете пропустить, - это контраст. оттенок, который выглядит прекрасно как фон кнопки, бесполезен, если текст метки на нем не соответствует требованиям контрастности доступности. как только вы выбрали пары цветов, которые будут сидеть друг на друге, проведите их через Проверка цветового контраста чтобы подтвердить, что они очищают пороги WCAG. Выбор красивых оттенков - это легкая часть. Убедитесь, что текст на них читаем, - это часть, которая отделяет настоящую палитру от доски настроения.
В таблице ниже показано, как я обычно отображаю десятишаговую шкалу ролей интерфейса.
| Источник подкачки | Типичная роль | Пример использования |
|---|---|---|
| Самые легкие оттенки | Поверхности и фоны | Фон страницы, заполнение карты, выбранная строка |
| Легкие оттенки | Наведите на светлые элементы состояния | Наведение кнопки, наведение элемента списка |
| Базовый цвет | Первичное действие | Основная кнопка, активная ссылка, акцент бренда |
| Средние оттенки | Нажатые и активные состояния | Кнопка активна, сфокусированная граница |
| Темные оттенки | Текст и высокий акцент | Текст тела на световых поверхностях, заголовки |
| Тоны | Приглушенные вторичные элементы | Контроль отключения, дополнительные значки |
Как это сочетается с другими цветными инструментами?
Генератор оттенков - один инструмент в маленьком оркестре Он отвечает на вопрос & quot;дайте мне больше этого одного цвета, & quot; но настоящая работа палитры затрагивает и несколько смежных вопросов Когда вам нужны гармоничные цвета, которые не имеют одинакового оттенка, как дополнительный или аналогичный набор, Генератор цветовой палит строит эти отношения. когда вы выбираете начальный цвет из изображения или дизайна и вам нужно прочитать его точное значение, палитра получает вам гекс код. и когда ваши оттенки предназначены для CSS фон, который исчезает от одного к другому, градиент генератора превращает два из них в готовые к вставке linear-gradient, йо-
Естественный конвейер выглядит следующим образом: выберите или вставьте базовый цвет, сгенерируйте его оттенки, оттенки и тона, проверьте пары, которые вы планируете сложить, на флажке контрастности и скопируйте победителей в свой список стилей или жетоны дизайна. Каждый из этих инструментов полностью работает в браузере, поэтому цвет бренда, который вы еще не объявили, никогда не переходит к кому-либо. и сервер #39;s. Если инструмент "локальный-первый" - это ценность, которую вы разделяете, то это часть на Конфиденциальность данных и онлайн-инстру объясняет, почему я так все строю, и Набор инструментов для веб-разработчиков собирает остальные утилиты, которые живут в моем ежедневном рабочем процессе.
Быстро сработавший пример
Начните с синего цвета #4466EE. Установите количество шагов на десять и оставьте формат копирования на HEX. Генератор возвращает три столбца.
Столбец оттенков начинается с #4466EE и поднимается к белому, проходя через все более бледный синий цвет, пока не будет получен последний образец #FFFFFF. Где-то посередине вы получаете мягкий барвинок, который делает отличный фон выбранного ряда. столбцы оттенков начинаются с того же самого #4466EE и спускается к черному, давая вам глубокие индиго, подходящие для текста и нажатых состояний, заканчиваясь на #000000. Столбец тонов начинается с #4466EE и движется к серому, создавая приглушенные грифельно-синие, которые читаются как спокойные и сдержанные, заканчиваясь на #808080, йо-
Из этого одного входа у вас теперь есть фон (светлый оттенок), заливка наведения (немного более темный оттенок), основной цвет (основа), цвет текста (темный оттенок) и отключенный цвет (тон). Нажмите любую точку, чтобы скопировать ее, переключите формат копирования на RGB или HSL, если ваш проект предпочитает их, и вставьте. Раньше было двадцать поездок к сборщику цветов, теперь это одна вставка и несколько щелчков, и поскольку математика детерминирована, палитра согласовывается каждый раз.
Часто задаваемые вопросы
В чем разница между оттенком, оттенком и тоном?
Оттенок - это цвет, смешанный с белым, делающий его светлее Оттенок - это цвет, смешанный с черным, делающий его темнее Тон - это цвет, смешанный с серым, который приглушает его, не меняя, светлый он или темный. все трое сохраняют первоначальный оттенок и только меняют, насколько светлым, темным или насыщенным выглядит цвет.
Как мне создать оттенки цвета?
Введите свой базовый цвет, затем прочитайте столбец оттенков, который смешивает цвет с увеличением количества черного. Каждая строка представляет собой более темную версию оригинала на четном шаге, и вы можете скопировать любую из них как HEX, RGB или HSL. Увеличьте количество шагов для более плавного диапазона темных значений.
Как рассчитываются светлые и темные цвета?
Каждая шкала представляет собой линейную смесь основного цвета к цели. Оттенки смешиваются в сторону белого (255, 255, 255), оттенки смешиваются в сторону черного (0, 0, 0), а тона смешиваются в сторону среднего серого (128, 128, 128). 30% оттенок, например, перемещает каждый красный, зеленый и синий канал на 30% пути от основания к белому.
Какие цветовые форматы я могу вставить?
Вы можете ввести HEX-код (3 или 6 цифр, с ведущим хешем или без него), значение rgb (), значение hsl () или общее имя цвета CSS, такое как малиновый или стальсиний. инструмент преобразует ваш ввод в RGB внутри и сообщает о каждом шаге в HEX, RGB и HSL.
Сколько оттенков я могу создать?
Вы можете установить от 2 до 20 шагов на шкалу. Каждая шкала также включает исходный базовый цвет, поэтому настройка из 10 шагов дает вам основание плюс десять оттенков, десять оттенков и десять тонов. Меньше шагов дают смелые скачки между значениями, а больше шагов дают тонкий градиент.
Могу ли я построить монохроматическую палитру с помощью этого инструмента?
Да. монохроматическая палитра использует один оттенок на разных уровнях легкости и насыщенности, что является именно тем, что производят оттенки, оттенки и тона. Выберите цвет базовой марки и используйте его оттенки для фона, основу для основных элементов и его оттенки для состояния текста или зависания.
Сохраняют ли сгенерированные цвета тот же оттенок?
Оттенки и оттенки сохраняют оттенок почти точно, потому что смешивание с чистым белым или черным меняет светлость, а не оттенок. тона могут смещаться очень незначительно, потому что серый находится в центре цветового пространства, но для практической дизайнерской работы вся шкала читается как одно семейство одного цвета.
Генератор цветовых оттенков бесплатный и приватный?
Да. Это совершенно бесплатно без регистрации и без ограничений. Все анализы и цветовая математика выполняются в вашем браузере с использованием JavaScript на стороне клиента, поэтому введенные вами цвета никогда не покидают ваше устройство, и инструмент продолжает работать в автономном режиме после загрузки страницы.
