Генератор палітр кольорів

Генеруйте палітри з одного початкового кольору

Корисний генератор палітр перетворює один колір на невеликий набір споріднених варіантів, які можна справді випробувати в дизайні. Замість випадкових зразків цей інструмент використовує класичні співвідношення кольорового кола та зміни яскравості в HSL. Оберіть базовий колір, виберіть гармонію — і палітра миттєво оновиться зі значеннями HEX, які можна скопіювати. Це досить швидко для пошуку ідей і досить передбачувано, щоб після доопрацювання задокументувати результат як дизайн-токени.

Генератор працює повністю у вашому браузері, тому він безпечний для неопублікованих кольорів бренду, мудбордів клієнтів і внутрішніх тем продуктів. Жодних завантажень, облікових записів чи зовнішніх сервісів палітр. Обчислення детерміновані: той самий базовий колір і гармонія дають ті самі зразки, тож легко повернутися до палітри пізніше або порівняти кілька напрямів під час дизайн-рев'ю.

Вибір потрібної гармонії

Комплементарні палітри поєднують колір із протилежним відтінком на кольоровому колі. Вони створюють сильний контраст і корисні для закликів до дії, діаграм або акцентів, що мають виділятися. Аналогові палітри використовують сусідні відтінки, які зазвичай здаються спокійнішими й цілісними; вони добре підходять для тла, ілюстрацій і м'якших тем продуктів. Тріадні палітри рівномірно розподіляють відтінки по колу, даючи різноманітність без опори на один домінантний протилежний колір. Монохромні палітри зберігають постійний відтінок і змінюють яскравість, що ідеально для станів інтерфейсу, карток, рамок і непомітних поверхонь.

Від згенерованих кольорів до робочої дизайн-системи

Згенеровані палітри — це відправна точка, а не заміна тестуванню. Скопіюйте кольори у свій справжній інтерфейс і перевірте, як вони поводяться з текстом, іконками, тінями та сусідніми поверхнями. Деякі кольори, що виглядають збалансовано як зразки, можуть бути надто яскравими на великих ділянках або надто слабкими на малих елементах керування. Обравши напрям, скористайтеся перевіркою контрасту для читабельного тексту та розгляньте іменування фінальних кольорів за призначенням — основний, акцентний, поверхня чи попередження — а не лише за відтінком. Імена за призначенням полегшують майбутні редизайни, бо код передає намір.