Генератор відтінків і тіней
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, які підтримують перцептивно рівномірні колірні простори та можуть виводити дизайн-токени в будь-якому форматі.