Генератор оттенков и теней
21 цветов
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Технические детали
Как работает генератор оттенков и теней
Что делает инструмент
Генератор оттенков и теней создаёт более светлые оттенки (смешанные с белым) и более тёмные тени (смешанные с чёрным) из любого базового цвета. Введите цвет и выберите количество шагов, чтобы получить плавный градиент вариаций. Каждый шаг показывает значения HEX, RGB и процент смешивания, что упрощает создание согласованных цветовых шкал для UI-дизайна, брендинга и визуализации данных.
Распространенные сценарии использования для разработчиков
Разработчики используют генераторы оттенков и теней при построении шкал дизайн-токенов (например, blue-100 до blue-900), создании состояний hover и active для интерактивных элементов, проектировании доступных цветовых иерархий и формировании согласованных цветов фона и поверхностей для светлых и тёмных тем. Инструмент незаменим для создания пользовательских цветовых палитр Tailwind CSS или цветовых систем Material Design.
Как работают оттенки и тени
Оттенок создаётся смешиванием цвета с белым, увеличивая его светлоту. Тень создаётся смешиванием с чёрным, уменьшая светлоту. Формула для оттенков: new = base + (255 - base) × factor. Для теней: new = base × (1 - factor). Шаги равномерно распределяются между базовым цветом и чистым белым (оттенки) или чистым чёрным (тени), образуя линейный градиент значений цвета.
Распространенные ошибки и крайние случаи
Линейное смешивание с белым или чёрным может давать выцветшие оттенки или «грязные» тени для некоторых тонов. Жёлтые могут казаться зеленоватыми при затемнении, а синие — терять насыщенность при осветлении. Для перцептивно равномерных шкал рассмотрите использование цветовых пространств OKLCH или CIELAB. Всегда проверяйте, что ваши самые светлые оттенки и самые тёмные тени сохраняют достаточный контраст относительно предполагаемых фонов.
Когда использовать этот инструмент, а когда — код
Используйте этот браузерный инструмент для быстрого исследования и генерации цветовых шкал во время дизайн-работы. Для продакшен-дизайн-систем генерируйте оттенки и тени программно с помощью цветовых библиотек вроде chroma.js или culori, которые поддерживают перцептивно равномерные цветовые пространства и могут выводить дизайн-токены в любом формате.