Генератор колірної палітри — безкоштовно
Генеруйте доповняльні, аналогічні, тріадичні та монохроматичні колірні палітри з будь-якого базового кольору. Копіюйте hex-коди одним кліком.
Введіть hex-код, назву кольору, як-от teal чи tomato, або rgb(20, 184, 166) / hsl(174, 80%, 40%) і натисніть Enter.
Перевірка тексту й фону
Типові застосування
- Генеруйте кольорові палітри для веб-дизайнуСтворіть гармонійні кольорові схеми для веб-сайтів, веб-додатків та компонентів користувацького інтерфейсу.
- Створюйте палітри брендових кольорівРозробіть повну систему кольорів бренду з одного кольору бренду — первинний, вторинний, акцент та нейтральні.
- Генеруйте кольорові палітри для мистецтва та ілюстраційСтворіть гармонійні кольорові комбінації для цифрового мистецтва, ілюстрацій та творчих проектів.
- Генеруйте кольорові стилі для FigmaСтворіть палітри кольорів для використання як кольорові стилі Figma та основи токенів дизайну.
- Створюйте палітри кольорів темного режимуГенеруйте світлі та темні варіанти вашої кольорової палітри для побудови підтримки темного режиму.
Як це працює
Інструмент створено без жодних зовнішніх бібліотек — уся колірна математика виконується власноруч написаним JavaScript прямо у вашому браузері. Він перетворює вибраний колір між hex і HSL, а потім застосовує класичні правила гармонії з теорії кольору (комплементарна, тріадна, аналогова тощо) через арифметику на колі відтінків, щоб створити кожну палітру.
- 1Перетворення hex у HSLКоли ви вибираєте колір, інструмент розбирає рядок hex на компоненти RGB і перетворює їх на HSL (відтінок, насиченість, світлота). Відтінок — це позиція від 0 до 360 градусів на колірному колі; уся математика палітр відбувається в цьому просторі.
- 2Арифметика відтінків для гармоніїКожен тип палітри — фіксована формула повороту, застосована до базового відтінку. Комплементарна додає 180°, тріадна — 120° і 240°, тетрадна крокує по 90°, розщеплена комплементарна використовує 150° і 210°. Монохромна й відтінки зберігають відтінок і насиченість сталими, змінюючи світлоту вгору й униз.
- 3Виведення HSL у hexКожна обчислена трійка HSL перетворюється назад на колір hex за стандартною формулою хроми. Результати показуються як колірна смуга з автоматично контрастними підписами (темний текст на світлих зразках, світлий — на темних), що визначаються простим порогом яскравості.
- 4Експорт у потрібному форматіПалітру можна скопіювати як рядки hex або експортувати як файл змінних CSS (:root { --color-1: … }), змінні SCSS, фрагмент конфігурації Tailwind, об’єкт JSON або колірну смугу PNG. Експорт PNG використовує Canvas API браузера (toDataURL), щоб намалювати кожен зразок із підписом hex, — усе генерується локально за кліком.
Схожі інструменти
Генератор випадкових кольорів
Генеруйте випадкові кольори по одному або як палітру з п’яти, блокуйте ті, що сподобалися, копіюйте значення HEX, RGB чи HSL і експортуйте палітру як PNG або CSS.
Витягувач колірної палітри із зображення
Витягуйте домінуючі кольори з будь-якого зображення за допомогою k-means квантизації кольорів. Отримайте hex-коди для 2–16 основних кольорів фото або логотипу.
Вибір кольору та генератор палітр
Вибирайте кольори, конвертуйте HEX/RGB/HSL та створюйте гармонійні палітри.