Нужен цвет для макета, диаграммы или пустого холста, и вы предпочитаете не выбирать его по привычке? Этот бесплатный генератор случайных цветов берёт цвета из полного 24-битного диапазона, который может показать экран, и размещает каждый на образце рядом с его кодом. Выберите в поле Количество, сколько цветов вам нужно — от 1 до 50, — отметьте нужные форматы и нажмите кнопку Сгенерировать. Страница открывается с одним цветом в HEX, так что первый результат — это всего один клик. Флажок Код HEX отмечен с самого начала, рядом с ним стоят флажки Код RGB и Код HSL, и можно включить любую комбинацию этих трёх одновременно. Кнопка с шестерёнкой рядом с кнопкой Сгенерировать открывает раздел Расширенные настройки, где можно ограничить цвета одним типом или диапазоном, исключить повторения и изменить способ записи HEX.
Каждый цвет создаётся в вашем браузере с помощью Web Crypto API (crypto.getRandomValues), который предоставляет криптографически стойкие случайные байты из собственного источника случайности вашей системы, а не с помощью псевдослучайной функции вроде Math.random(). Цвет на экране — это три канала: красный, зелёный и синий, каждый — целое число от 0 до 255, а один случайный байт может принимать ровно 256 значений. Поэтому каждый канал — это просто один байт, без промежуточных шагов: остаток не берётся, и ни один шаг преобразования не отдаёт предпочтение какому-либо оттенку. Это делает все 16 777 216 цветов, которые может создать страница, абсолютно равновероятными каждый раз, когда вы нажимаете Сгенерировать. Более узкий диапазон в разделе Расширенные настройки сохраняет это свойство в пределах диапазона: цвета по-прежнему выбираются из всего пространства, а те, что выходят за его пределы, отбрасываются, так что каждый цвет, допустимый диапазоном, имеет одинаковый шанс. Ничего не отправляется на сервер, ничего не записывается, и как только страница загрузилась, она продолжает работать даже без подключения.
Три формата описывают один и тот же цвет тремя способами. Формат Код HEX — это шестизначная форма, используемая в CSS и большинстве инструментов дизайна, например #0778ff; она записывается строчными буквами с # в начале, а опции Заглавные буквы и Без # в разделе Расширенные настройки меняют это для инструментов, которые ожидают другой записи. Формат Код RGB расписывает три канала, как в rgb(7, 120, 255), что подходит для кода, работающего с каждым каналом отдельно. Формат Код HSL описывает цвет через оттенок, насыщенность и светлоту, как в hsl(213, 100%, 51%) — это форма, которую проще всего скорректировать вручную впоследствии. Все три вставляются прямо в таблицу стилей. Однако они не одинаково точны. HEX и RGB точны; HSL округлён. Страница записывает оттенок, насыщенность и светлоту целыми числами, и примерно для 89% цветов это округлённое значение не даёт при обратном пересчёте точно тот же цвет: #646503 показывается как hsl(61, 94%, 20%), что при обратном пересчёте даёт #616303. Разница никогда не превышает 5 шагов в канале и обычно составляет 1 или 2 — незаметная на экране, но реальная, если вы сохраняете значение HSL и рассчитываете получить исходный HEX. Поэтому сохраняйте лучше значение HEX или RGB.
Один цвет отображается в виде отдельного блока в середине результата; несколько цветов отображаются в виде пронумерованного списка, по одному цвету в строке, с выбранными форматами рядом и небольшим значком контрастности в конце. Список из более чем трёх цветов прокручивается внутри рамки, а стрелка в её углу раскрывает его на полную высоту; страница запоминает, в каком виде вы его оставили. Нажмите на любой код, чтобы скопировать только этот код. Кнопка копирования в конце строки копирует все коды этого цвета в одну строку, разделённые пробелами. Нажмите на сам образец, и откроется встроенное окно выбора цвета вашего браузера: выберите там другой цвет, и все коды в этой строке перепишутся соответственно, в каждом включённом формате, вместе со значком. Кнопка Скопировать всё копирует всю партию, по одному цвету в строке, а кнопка Сохранить в файл записывает тот же текст в обычный файл .txt; обе учитывают любой цвет, изменённый в окне выбора цвета. Панель История хранит ваши последние 10 партий в этом браузере точно такими, какими они были сгенерированы, а кнопка Очистить очищает результат. Ваши настройки, включая настройки в разделе Расширенные настройки, запоминаются для следующего визита.
Равновероятные цвета не выглядят равномерно распределёнными, а знание того, чего ожидать, убережёт от нажатия Сгенерировать по неверной причине. По измерениям на всём диапазоне около 35% цветов яркие и насыщенные, с насыщенностью HSL не менее 70% и светлотой от 35% до 65%. Почти серые цвета с насыщенностью ниже 20% составляют только около 4%, а очень тёмные цвета (светлота ниже 20%) и очень светлые (выше 80%) составляют примерно по 3%. Поэтому партия из десяти цветов с опцией Все цвета обычно будет содержать несколько насыщенных цветов и редко — пастельный или угольно-серый. Когда вам нужен определённый тип, выберите его в поле Тип цвета: опция Яркие соответствует именно этой группе, а опции Пастельные, Тёмные, Приглушённые и Оттенки серого — каждая своей. Опция Свои позволяет задать собственные диапазоны для полей Оттенок, Насыщенность и Светлота, и диапазон оттенка может проходить через 0, так что диапазон от 330 до 30 даёт красные тона. Диапазон проверяется относительно кода HSL, который показывает страница, так что ни один код не выходит за его пределы, а если в нём слишком мало цветов для вашего значения в поле Количество, страница просит расширить его, а не повторять цвета. В остальном повторения возможны, но редки: отметьте опцию Без повторений, чтобы исключить их, а без неё вероятность того, что два из 50 цветов из полного диапазона совпадут, составляет около 1 к 13 700.
Случайный цвет часто нужен в качестве фона, и тут возникает вопрос, на который образец не может ответить на глаз: будет ли текст на нём читаемым? Руководство по веб-доступности WCAG требует коэффициента контрастности не менее 4,5:1 для обычного текста. По измерениям на всех цветах, которые может создать эта страница, чёрный текст достигает этого примерно на 65% из них, а белый текст — примерно на 36%, и нет ни одного цвета, на котором оба варианта не проходят: лучший из двух всегда достигает не менее 4,58:1. Поэтому для любого случайного фона подойдёт либо чёрный, либо белый текст, и страница показывает, какой именно. Рядом с каждым цветом отображается небольшой значок с надписью Aa более читаемым из двух цветов текста, а за ним — коэффициент контрастности. Коэффициент округляется в меньшую сторону, поэтому он никогда не завышается и обновляется, когда вы меняете цвет в окне выбора цвета. Значок сравнивает только чёрный и белый текст; для фирменного цвета или любого другого цвета текста воспользуйтесь сервисом проверки контрастности.
Случайность — не то же самое, что гармоничность. Каждый цвет в партии выбирается независимо, без знания об остальных, поэтому генератор никогда не строит палитру в дизайнерском смысле — ни комплементарных пар, ни аналоговых рядов, ни общей светлоты. Более узкий диапазон меняет характер партии, а не это правило: пастельные тона или ряд синих оттенков по-прежнему появляются один за другим, и ничто их не связывает. В этом и смысл: генератор даёт вам цвет, который вы бы сами не выбрали, и именно это помогает выйти из привычки или творческого застоя. Чтобы превратить случайную находку во что-то полезное, сохраните понравившийся цвет и стройте на его основе, а не нажимайте Сгенерировать, пока весь набор случайно не совпадёт. Зафиксируйте его оттенок и меняйте светлоту, чтобы получить более светлые и более тёмные варианты, или поверните оттенок на 180 градусов, чтобы получить контрастную пару. Формат Код HSL превращает эти действия в арифметику, а не в угадывание.
Почему стоит выбрать этот генератор случайных цветов?
- Каждый цвет создаётся в вашем браузере с помощью Web Crypto API, ничего не отправляется на сервер
- Все 16 777 216 цветов абсолютно равновероятны, один случайный байт на канал
- Коды HEX, RGB и HSL для одного и того же цвета, в любой комбинации
- До 50 цветов одновременно, каждый на образце со значком контрастности текста
- Яркие, Пастельные, Тёмные, Приглушённые и Оттенки серого, либо собственный диапазон оттенка, насыщенности и светлоты
- Без повторений, когда это нужно, и HEX заглавными буквами или без #
- Нажмите на код, чтобы скопировать его, или измените любой цвет в окне выбора цвета вашего браузера
- Скопировать всё, Сохранить в файл и История последних 10 партий, хранящаяся в вашем браузере
- Бесплатно и без ограничений: без регистрации, без квоты, ничего не хранится на наших серверах
Случайные цвета оказываются полезны везде, где цвет нужен ещё до того, как кто-то его выбрал. Дизайнеры используют их, чтобы преодолеть творческий застой и найти отправную точку, до которой их привычная палитра никогда бы не добралась. Разработчики заполняют макеты, заглушки и аватары, дают каждой серии на графике собственный цвет, пока настоящая тема ещё не определена, и проверяют, как интерфейс справляется с фонами, для которых он не был спроектирован, — партия из 50 цветов с опцией Все цвета почти всегда включает хотя бы один очень тёмный или очень светлый цвет, а опция Тёмные или Пастельные направляет проверку в одну из этих крайностей. Генеративные художники и те, кто прототипирует игры, передают значения прямо в код, где форма RGB подходит для большинства графических библиотек. Преподаватели размещают три формата рядом, чтобы показать, что один цвет можно записать как код, как три канала или как позицию на цветовом круге, и почему версия HSL округлена. А любой, кто маркирует, тегирует или раскрашивает список по цветам, получает различимые цвета, не мучаясь над выбором.
Стоит знать несколько честных ограничений. Это генератор, а не инструмент для палитр: он не строит цветовые гармонии и не удерживает один цвет неизменным, пока остальные меняются, а более узкий диапазон даёт цвета одного типа, а не цвета, подобранные для сочетания друг с другом. Значок контрастности сравнивает только чёрный и белый текст. Страница работает с цветами sRGB, которые показывает экран, — HEX, RGB и HSL, — без прозрачности и без CMYK, Pantone, OKLCH или именованных цветов CSS; для печати сверяйте цвет в вашем процессе печати, а не полагайтесь на экранный код. Один и тот же код может также выглядеть немного по-разному на разных экранах, потому что экраны откалиброваны неодинаково. Значения HSL округлены, как описано выше, и если опция Без повторений не отмечена, партия не проверяется на повторения. То, что страница действительно гарантирует, — скромнее, но точно: каждый из её 16 777 216 цветов, или каждый цвет в пределах заданного вами диапазона, имеет одинаковый шанс при каждом нажатии, полученный из криптографического источника вашего браузера и никогда никуда не отправленный.