Генератор оттенков цвета

Превратите один базовый цвет HEX в шкалу оттенков 50-950 в стиле Tailwind, смешивая его с белым и чёрным; каждая ступень с образцом и копируемым HEX.

Загрузка инструмента…

Генератор оттенков цвета — Введите один базовый цвет в HEX и мгновенно получите шкалу оттенков из 11 ступеней (50, 100, 200 … 900, 950), построенную путём смешивания вашего цвета с белым для светлых ступеней и с чёрным для тёмных — с той же нумерацией, что и в Tailwind CSS. Каждая ступень показывает свой образец и значение HEX с кнопкой копирования в один клик. Всё выполняется полностью в вашем браузере; ни один цвет никогда не отправляется на сервер.

Что такое Генератор оттенков цвета?

Генератор оттенков цвета — это бесплатный онлайн-инструмент, который превращает один базовый цвет HEX в полную шкалу светлых и тёмных оттенков, пронумерованную от 50, 100, 200 до 900 и 950, точно как цветовые токены Tailwind CSS. Он строит градацию, линейно смешивая ваш базовый цвет с белым для более светлых ступеней (50-400) и с чёрным для более тёмных (600-950), сохраняя 500 как сам базовый цвет. Дизайнеры и фронтенд-разработчики используют его для создания единообразной цветовой шкалы для дизайн-системы, настройки пользовательских свойств CSS или цветов темы Tailwind и выбора доступных светлых/тёмных вариантов фирменного цвета. Каждая ступень показана как образец рядом со своим значением HEX с кнопкой копирования в один клик.

Как пользоваться Генератор оттенков цвета

  1. Введите базовый цвет в поле Базовый цвет (HEX) в формате #rrggbb или #rgb либо нажмите на крупный образец палитры, чтобы выбрать его визуально.
  2. Шкала 50-950 обновляется мгновенно: светлые оттенки (50-400) смешиваются с белым, 500 — это ваш базовый цвет, а тёмные оттенки (600-950) смешиваются с чёрным.
  3. Прочитайте каждую строку, чтобы рядом увидеть номер ступени (50 … 950), её образец цвета и значение HEX.
  4. Нажмите кнопку копирования в конце любой строки, чтобы скопировать значение HEX этой ступени в буфер обмена.
  5. Скопируйте HEX базового цвета кнопкой копирования рядом с полем ввода, когда вам нужна только ступень 500.

Примеры

Самая светлая ступень (50) из синей основы

Ввод

#4f86f7

Вывод

#f6f9ff

Самая тёмная ступень (950) из той же основы

Ввод

#4f86f7

Вывод

#0b1323

Создание цветов темы Tailwind

Введите фирменный цвет, затем по очереди скопируйте ступени с 50 по 950 в цвет темы Tailwind (например, colors.brand) или в пользовательские свойства CSS, получив готовую шкалу от светлого к тёмному, соответствующую стандартной нумерации оттенков Tailwind.

Часто задаваемые вопросы

Какие форматы цвета можно вводить?
Базовый цвет вводится как значение HEX в формате #rrggbb (шесть цифр) или в сокращённой форме #rgb (три цифры). Если значение не является допустимым цветом HEX, появляется сообщение 'Invalid HEX color' и шкала не создаётся. Каждая ступень результата показана как значение HEX в формате #rrggbb.
Как рассчитываются оттенки?
Каждая ступень — это линейное смешивание вашего базового цвета с чистым белым или чистым чёрным. Ступени 50-400 смешиваются с белым в убывающих пропорциях, ступень 500 — это неизменённый базовый цвет, а ступени 600-950 смешиваются с чёрным в возрастающих пропорциях. Нумерация совпадает с цветовыми шкалами Tailwind CSS.
Почему ступень 500 иногда не совсем соответствует номеру моего базового цвета?
Ступень 500 — это всегда точно ваш базовый цвет. Инструмент не перецентрирует ваш цвет по перцептивной кривой светлоты, поэтому, если ваш ввод очень светлый или очень тёмный, светлая или тёмная половина шкалы будет иметь меньший диапазон — выберите базу средней тональности для наиболее равномерной градации.
Можно ли выбрать цвет визуально вместо ввода HEX?
Да. Нажмите на крупный образец со встроенной палитрой, чтобы выбрать цвет; поле HEX обновляется автоматически, и вся шкала 50-950 мгновенно пересчитывается по мере изменения.
Загружаются ли мои данные о цвете куда-либо?
Нет. Всё выполняется полностью в вашем браузере с помощью локальных цветовых вычислений — ни одно значение цвета никогда не отправляется на сервер, поэтому инструмент работает офлайн и сохраняет вашу палитру конфиденциальной.

Похожие инструменты

Код в изображение

Превратите фрагмент кода в аккуратную PNG-карточку с подсветкой синтаксиса прямо в браузере — с темой, градиентным или прозрачным фоном и отступами, без загрузки на сервер.

Проверка цветового контраста

Проверьте коэффициент контраста WCAG между HEX-цветом текста и фона и узнайте, проходит ли он AA и AAA для обычного и крупного текста.

Смеситель цветов

Смешивайте два HEX-цвета в выбранной пропорции в цветовом пространстве RGB или Lab и считывайте полученный промежуточный цвет в виде образца и копируемого HEX-значения.

Симулятор дальтонизма

Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.