Генератор CSS-тем
Оберіть кольори бренду та згенеруйте на стороні клієнта тему :root із користувацькими властивостями CSS і похідними токенами для hover, меж і поверхонь.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяПеретворіть кольори бренду на CSS-змінні
Практична веб-тема потребує більше, ніж один основний колір. Кнопкам потрібні стани наведення, карткам — поверхні, кільцям фокуса — прозорість, а межам — відтінок, що поєднується з фоном сторінки. Цей генератор CSS-тем виходить із компактного набору виборів бренду й отримує з нього невеликий блок користувацьких властивостей, який можна вставити в таблицю стилів. Результат навмисно простий: корисні змінні для лендингу, прототипу, сайту документації чи невеликого застосунку без громіздкого конвеєра токенів.
Оберіть основний та акцентний кольори, а потім задайте фон і колір тексту, що визначають загальний контраст. Браузер виводить значення для наведення, поверхні, приглушеного тексту, межі та фокуса, коригуючи яскравість HSL і застосовуючи прозорий RGB там, де це доречно. Картка попереднього перегляду використовує ті самі змінні, що показані у виводі, тож ви швидко побачите, чи набір виглядає цілісним, перш ніж копіювати його.
Використання згенерованого блоку :root
Користувацькі властивості CSS найлегше підтримувати, коли вони описують призначення, а не сирий відтінок. Назва на кшталт --color-primary підказує майбутнім учасникам проєкту, де використовувати значення, тоді як --color-blue після редизайну може стати неточною. Вставте згенерований блок :root на початку таблиці стилів, а потім посилайтеся на змінні в компонентах. Наприклад, кнопки можуть використовувати --color-primary, стани наведення — --color-primary-hover, а панелі — --color-surface разом із --color-border.
Доопрацювання початкової теми
Похідні кольори — це добра перша чернетка, а не заміна тестуванню. Перегляньте тему з реальними заголовками, основним текстом, вимкненими елементами керування, полями форм, посиланнями та сповіщеннями. Якщо колір наведення здається надто темним, вручну підвищте його яскравість. Якщо межі зникають на тлі, збільште їхній контраст. І найголовніше — перевірте контраст тексту на кнопках і поверхнях. Генератор виконує всю роботу в браузері, тому безпечний для раннього дослідження бренду, але відшліфована дизайн-система все одно потребує перевірки людиною та коригувань на рівні компонентів.
Як користуватися
- Оберіть кольори брендуВиберіть основний, акцентний, фоновий кольори та колір тексту для теми.
- Перегляньте похідні токениПеревірте в попередньому перегляді значення для наведення, межі, поверхні та кільця фокуса.
- Скопіюйте CSS :rootВставте згенеровані користувацькі властивості у свою таблицю стилів.