Генератор відтінків і тонів
Світліші й темніші варіації будь-якого базового кольору
Додайте колір вище, щоб отримати відтінки й тони
Підтримуються #RGB і #RRGGBB — можна ввести кілька кольорів одразу
Як працює генератор відтінків і тонів
Побудуйте повну колірну шкалу з будь-якого базового кольору: світліші й темніші варіації для дизайн-систем і розробки інтерфейсів.
Тони (світліші)
Отримуйте дедалі світліші варіації, змішуючи базовий колір із білим. Ідеально для фонів, станів наведення й делікатних поверхонь інтерфейсу.
Відтінки (темніші)
Створюйте глибші варіації, змішуючи колір із чорним. Використовуйте їх для тексту на кольоровому фоні, активних станів і темної теми.
Налаштовуваний крок
Керуйте кількістю кроків у кожній шкалі: 5 швидких варіацій або 20 дрібних кроків для детальних систем дизайн-токенів.
Копіюйте й діліться
Копіюйте будь-яке значення в HEX, RGB або HSL. Діліться всією шкалою за посиланням, щоб колеги бачили точно той самий набір кольорів.
Часті запитання
Відтінок (shade) — це колір, змішаний із чорним, тобто темніший. Тон (tint) — колір, змішаний із білим, тобто світліший. Разом вони утворюють повну шкалу від найсвітлішого тону до найглибшого відтінку будь-якого базового кольору.
Дизайн-системи використовують нумеровані колірні шкали (50, 100, 200… 900), щоб кольори застосовувалися однаково в усьому продукті. Найсвітліші значення підходять для фонів і рамок, середні — для іконок і другорядного тексту, темні — для основного тексту й акцентів.
Так. Введіть будь-який колір у форматі HEX, RGB або HSL як базовий — генератор побудує з нього повну шкалу тонів і відтінків. Базовий колір можна також вибрати візуально піпеткою.
Opacity впливає на весь елемент, зокрема на текст і рамки, а результат залежить від фону позаду. Тони — суцільні кольори, що виглядають однаково на будь-якому фоні. Вони передбачуваніші й доступніші за прозорість.