Генератор палітр
Натискайте пробіл - отримуйте нову палітру. Закріплюйте кольори, що сподобалися, перевіряйте контраст і забирайте код для сайту.
Наведіть на колір: замок закріплює його, крапки - перетягнути, «+» - додати колір поруч. Натисніть на код кольору, щоб змінити його.Кнопки біля кожного кольору: закріпити, копіювати, відтінки, видалити. Натисніть на код кольору, щоб змінити його.
Контраст
Пари кольорів палітри за WCAG: AA - звичайний текст, AAA - найкращий варіант.
Експорт
Готові палітри
Швидкі перевірки: Фавікон · SEO-прев'ю · Магазин конкурента · Генератор палітр
Як користуватися
Кожне натискання пробілу дає нову палітру. Сподобався колір - закріпіть його замком, і наступні палітри підбиратимуться до нього. Натисніть на код кольору, щоб підправити яскравість, насиченість і відтінок або ввести свій HEX. Кнопка зі смужками показує світлі й темні відтінки кольору - зручно, коли потрібен фон або колір для наведення. Кольори можна перетягувати, додавати між сусідніми й видаляти, від 2 до 10.
Палітра з фото і готовий код
Завантажте фото або вставте його з буфера - інструмент знайде в ньому головні кольори. Готову палітру можна скопіювати як CSS-змінні, SCSS, конфіг Tailwind або JSON, завантажити картинкою PNG чи SVG, зберегти в профілі або відкрити в «Градієнті з фото» й зробити з неї тло. Адреса сторінки завжди містить поточну палітру - нею можна просто поділитися.
Часті запитання
Не знайшли відповідь - напишіть нам, підкажемо.
Натисніть пробіл або кнопку «Згенерувати». Кольори, що сподобалися, закріпіть замком - під час наступної генерації вони залишаться, а решта підбереться до них у вибраній гармонії.
Аналогова - сусідні відтінки, спокійно й м'яко. Монохромна - один відтінок різної яскравості. Комплементарна - протилежні кольори, найяскравіший контраст. Розділено-комплементарна, тріада й тетрада - 3-4 відтінки, рівномірно рознесені по колу. «Авто» щоразу обирає одну з них.
У цьому просторі однакові числа яскравості виглядають однаково світлими для ока, тому в палітрі завжди є світлі й темні кольори, а насиченість не «стрибає» між відтінками, як у HSL.
У блоці «Контраст» показано пари кольорів із палітри та їхній контраст за WCAG: від 4.5:1 - звичайний текст (AA), від 7:1 - AAA, від 3:1 - лише великі заголовки. Колір підпису в кожній колонці підбирається автоматично.
Приблизно кожен дванадцятий чоловік розрізняє кольори інакше. Увімкніть симуляцію протанопії, дейтеранопії, тританопії або монохромного зору й перевірте, що важливі кольори палітри не зливаються.
Так, без обмежень. Палітри генеруються у вашому браузері, а набір кольорів не охороняється авторським правом.