Піпетка кольорів (Color Picker)
Оберіть колір і миттєво скопіюйте значення HEX, RGB та HSL. Створюйте світліші й темніші відтінки для фонів, рамок і станів інтерфейсу.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяОбирайте кольори та копіюйте готові значення
Надійна піпетка кольорів має вміти більше, ніж показувати гарний квадрат. Дизайнерам, розробникам і творцям контенту часто потрібен той самий колір у кількох форматах залежно від призначення. CSS приймає HEX, RGB і HSL, дизайн-системи можуть документувати токени як HEX, а швидкі правки прототипів часто простіші в HSL, адже відтінок, насиченість і світлість змінюються незалежно. Цей інструмент показує формати поруч, тож ви обираєте колір один раз і копіюєте значення, що підходить вашому робочому процесу.
Усе відбувається локально в браузері. Вибір кольору, обчислення перетворень і кнопки копіювання працюють на клієнтському JavaScript, тому не потрібні ні акаунт, ні завантаження, ні віддалена обробка. Це робить інструмент корисним для приватних палітр бренду, невипущених тем продуктів, роботи для клієнтів і швидких експериментів з інтерфейсом, які не мають залишати ваш комп'ютер.
Використання світліших і темніших відтінків в інтерфейсах
Світліші й темніші відтінки допомагають одному кольору бренду підтримувати весь інтерфейс. Світліші відтінки підходять для ненав'язливих фонів, станів наведення, панелей сповіщень і вибраних рядків. Темніші відтінки можуть слугувати рамками, станами натискання, акцентами темного режиму або високо виділеним текстом, коли початковий колір надто яскравий. Зразки тут зберігають сталими відтінок і насиченість, змінюючи лише світлість, що створює просту шкалу, пов'язану з базовим кольором.
Сприймайте згенеровану шкалу як відправну точку, а не як готову дизайн-систему. Людське сприйняття не ідеально лінійне, а деякі відтінки потребують ручного коригування, щоб виглядати рівномірно розташованими. Сині й фіолетові зазвичай витримують широкі діапазони світлості, тоді як жовті можуть потребувати темніших відтінків для читабельного тексту. Скопіюйте значення, перевірте їх у реальному компоненті та доопрацюйте найважливіші кроки.
Вибір між HEX, RGB і HSL
HEX компактний і поширений під час передавання дизайну, тому це гарний варіант за замовчуванням для документації. RGB корисний, коли інструмент просить числові канали червоного, зеленого й синього або коли ви мислите безпосередньо світлом екрана. HSL зазвичай найзручніший для невеликих змін: змінюйте відтінок, щоб рухатися колом кольорів, зменшуйте насиченість для спокійнішого тону або змінюйте світлість, щоб отримати світліший чи темніший відтінок. Коли всі три формати перед очима, менше помилок під час переходу між дизайн-інструментами, CSS-файлами та бібліотеками компонентів.
Як користуватися
- Оберіть колірСкористайтеся полем вибору кольору або вставте значення HEX у поле.
- Скопіюйте форматСкопіюйте значення HEX, RGB або HSL залежно від того, де плануєте його використати.
- Досліджуйте варіаціїВикористовуйте зразки світліших і темніших відтінків як швидку відправну точку для станів і фонів інтерфейсу.