Генератор кольорової палітри
Створюйте відтінки, тони та гармонійні кольори з одного базового HEX-кольору, кожен із копійованим HEX-значенням.
Генератор кольорової палітри — Введіть один базовий колір у HEX і миттєво отримайте повну палітру навколо нього — світліші тони, темніші відтінки, додатковий колір, а також аналоговий і тріадний набір. Кожен зразок показує своє HEX-значення з кнопкою копіювання в один клік. Усе виконується повністю у вашому браузері; жоден колір ніколи не надсилається на сервер.
Що таке Генератор кольорової палітри?
Генератор кольорової палітри — це безкоштовний онлайн-інструмент для створення кольорових схем для дизайнерів і фронтенд-розробників, яким потрібно побудувати повну палітру навколо одного базового кольору. Введіть один HEX-колір, і інструмент миттєво виведе світліші тони, темніші відтінки, додатковий колір, а також аналогові й тріадні гармонії за допомогою кольорової математики HSL — кожен зразок показано з його HEX-значенням і кнопкою копіювання в один клік. Використовуйте його, щоб вибирати кольори інтерфейсу, будувати шкалу відтінків і тонів або підбирати акцентні кольори під бренд. Це генератор HEX-палітри, створювач шкали відтінків/тонів і пошук додаткових кольорів в одному інструменті.
Як користуватися Генератор кольорової палітри
- Введіть базовий колір у поле «Базовий колір (HEX)» у форматі #rrggbb або #rgb чи натисніть на великий зразок вибору кольору, щоб обрати його візуально.
- Установіть «Відтінків на сторону» на 2, 3 або 4, щоб задати, скільки світліших тонів і темніших відтінків створюється з кожного боку базового кольору.
- Перегляньте розділ «Відтінки й тони»: світліші тони відображаються над базовим кольором, а темніші відтінки — під ним, кожен із позначкою (Lighter N / Base / Darker N) і своїм HEX-значенням.
- Перегляньте розділ «Гармонійні кольори» для додаткового, аналогових (+30deg / -30deg) і тріадних (+120deg / -120deg) кольорів.
- Натисніть кнопку копіювання поряд із будь-яким зразком (або поряд із полем базового кольору), щоб скопіювати це HEX-значення до буфера обміну.
Приклади
Додатковий колір із чистого червоного
Вхідні дані
#ff0000
Результат
#00ffff
Тріадний колір із чистого червоного
Вхідні дані
#ff0000
Результат
#00ff00
Створення шкали відтінків бренду
Введіть синій колір вашого бренду (наприклад, #4f86f7) і встановіть «Відтінків на сторону» на 4, щоб отримати чотири світліші тони зверху та чотири темніші відтінки знизу від базового кольору, що дає 9-ступеневу шкалу, яку ви можете копіювати колір за кольором у свої дизайн-токени.
Поширені запитання
- Які формати кольору можна вводити?
- Базовий колір вводиться як HEX-значення у форматі #rrggbb (шість цифр) або в скороченій формі #rgb (три цифри). Якщо значення не є дійсним HEX-кольором, зʼявляється повідомлення 'Invalid HEX color' і палітра не створюється. Усі вихідні зразки показано як HEX у форматі #rrggbb.
- Скільки відтінків і тонів створюється?
- Ви обираєте 2, 3 або 4 відтінки на сторону. Інструмент створює вказану кількість світліших тонів (інтерпольованих у бік білого) і таку саму кількість темніших відтінків (інтерпольованих у бік чорного), плюс базовий колір посередині.
- Які гармонійні кольори включено?
- Він виводить додатковий колір (відтінок повернуто на 180deg), два аналогові кольори (+30deg і -30deg) і два тріадні кольори (+120deg і -120deg), усі обчислені шляхом повороту відтінку базового кольору в HSL.
- Чи можна вибрати колір візуально замість введення HEX?
- Так. Натисніть на великий зразок із вбудованим засобом вибору кольору, щоб обрати колір; поле HEX оновлюється автоматично, а палітра миттєво перераховується в міру зміни.
- Чи завантажуються мої дані про колір кудись?
- Ні. Усе виконується повністю у вашому браузері за допомогою локальної кольорової математики — жодне кольорове значення ніколи не надсилається на сервер, тож інструмент працює офлайн і зберігає вашу палітру приватною.
Схожі інструменти
Кодування / декодування Base32 / Base58
Кодуйте текст у Base32 (RFC 4648) або Base58 (алфавіт Bitcoin) і декодуйте обидва формати назад у текст — повністю безпечно для UTF-8 і цілком у вашому браузері.
Кодування / декодування Base64
Закодуйте текст у Base64 або розкодуйте Base64 назад у текст (безпечно для UTF-8).
Конвертер регістру та лічильник
Змінюйте регістр тексту та рахуйте символи, слова й рядки.
Форматувальник і мініфікатор коду
Миттєво форматуйте або мініфікуйте HTML, CSS і JavaScript прямо у браузері з відступом у 2 пробіли, 4 пробіли чи табуляцію та стисканням JavaScript на основі Terser.