Генератор монохроматичних кольорів
Створіть монохроматичну палітру на основі одного кольору за допомогою цього генератора монохроматичних кольорів. Введіть 3- або 6-значний hex-код, і інструмент збереже його відтінок і насиченість, змістивши світлоту на 30 і 15 пунктів в обидва боки в межах від 10 до 90 відсотків, а потім поверне п’ять відтінків і тонів у вигляді hex-кодів, розташувавши базовий колір посередині. Ідеально для дизайнерів і розробників, які створюють спокійні, узгоджені UI колірні шкали й теми.
Поширені запитання
Що повертає генератор монохроматичних кольорів?
Він повертає п’ять кольорів у вигляді шестицифрових hex-кодів у нижньому регістрі. Колір 3 — базовий, кольори 1 і 2 — його темніші версії, а кольори 4 і 5 — світліші версії того самого відтінку.
Як обчислюються відтінки?
Інструмент перетворює ваш hex-код на HSL і змінює лише світлоту: мінус 30, мінус 15, плюс 15 і плюс 30 відсоткових пунктів. Відтінок і насиченість залишаються незмінними, тому всі п’ять кольорів належать до однієї колірної гами.
Чи є нижня або верхня межа світлоти?
Так. Темніші кроки не опускаються нижче 10 відсотків світлоти, а світліші не перевищують 90 відсотків, тож шкала не доходить до чистого чорного й чистого білого.
Чому для дуже темних або дуже світлих базових кольорів з’являються дублікати чи неочікувані кольори?
Через межі у 10 і 90 відсотків сусідні кроки біля країв шкали зводяться до однакового значення. Для #000000 обидва темніші кроки стають #1a1a1a, що світліше за базовий колір, а для #ffffff обидва світліші кроки стають #e6e6e6.
Яку палітру дає чистий червоний?
Для #ff0000 інструмент повертає #660000, #b30000, #ff0000, #ff4d4d та #ff9999. Червоний має світлоту 50 відсотків, тому для нього доступний повний діапазон із двома темнішими й двома світлішими кроками.
У яких форматах можна вводити кольори?
Введіть один 3- або 6-значний hex-код із символом # або без нього, наприклад #3366cc або 36c. Запис RGB і HSL та назви кольорів не підтримуються, тож спершу перетворіть їх на hex.
Чому основний колір повертається трохи зміненим?
Відтінок, насиченість і світлота округлюються до цілих чисел, тому перетворення на HSL і назад може змінити один канал на один крок. Наприклад, #ff5733 відображається як #ff5833 посередині шкали.
Чи працює це для сірих кольорів?
Так. На відміну від схем, заснованих на відтінку, монохроматична шкала змінює світлоту, тож для сірого кольору створюються світліші й темніші сірі. Для чорного й білого діє описаний вище діапазон від 10 до 90 відсотків.
Як використовувати монохроматичну палітру в інтерфейсі?
Використовуйте найтемніші кольори для тексту й рамок, базовий колір — для основних дій, а найсвітліші — для тла й станів наведення. Перевірте контрастність тексту за допомогою засобу перевірки контрастності WCAG, оскільки сусідні кроки відрізняються за світлотою лише на 15 пунктів.
Чи збігається результат із результатом генератора палітри кольорів?
Так. Цей інструмент виконує саме обчислення для параметра «Монохроматична» в генераторі палітри кольорів, тож обидва інструменти повертають однакові п’ять hex-кодів для того самого базового кольору.