Інструмент вибору кольору Morph дозволяє візуально обрати будь-який колір і миттєво отримати його код у форматах, якими ви справді користуєтесь: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) і HSL (`hsl(214, 64%, 53%)`). Перетягуйте курсор полем кольору, точно налаштовуйте відтінок повзунком hue і копіюйте значення прямо в CSS, файл дизайну чи будь-куди, де воно потрібне.
Усі три коди описують один і той самий колір — це просто різні способи його запису, і кожен має своє призначення:
Змінюйте колір як завгодно — всі три коди залишаються синхронізованими, тож можна брати той, який потрібен вашому проєкту.
Дизайнери використовують його, щоб точно визначити палітру й скопіювати значення у файл макета чи гайдлайн. Front-end розробники беруть HEX для кнопки або перетворюють RGB дизайнера на HSL, щоб створити hover-стан. Кожен, хто налаштовує тему, колір графіка чи шаблон листа, може підібрати точний відтінок і скопіювати його в один клік. Оскільки HSL завжди поруч із HEX, створювати світліші й темніші варіанти базового кольору набагато легше, ніж підбирати цифри hex на око.
Color picker — це чистий браузерний код: і обчислення кольору, і інтерфейс працюють на вашому пристрої. Нічого не завантажується на сервер, не потрібен акаунт, і жодні дані нікуди не надсилаються. Сторінка швидко завантажується і продовжує працювати офлайн, щойно відкрита, адже вибір кольору й обчислення його кодів ніколи не потребують мережевого з'єднання.
Скопійоване значення HEX готове для вставки в CSS без змін. Якщо потрібен колір із прозорістю, перетворіть його на RGB і додайте альфа-канал (`rgba(...)`) у своєму коді. Щоб побудувати узгоджену палітру, оберіть один базовий колір і використовуйте значення яскравості HSL для створення світліших і темніших відтінків, змінюючи яскравість вгору чи вниз і залишаючи відтінок та насиченість незмінними — так набір кольорів виглядатиме як єдина родина, а не випадковий набір.
Він показує HEX, RGB і HSL для кожного обраного кольору, синхронізовані між собою, тож можна скопіювати той формат, який потрібен вашому проєкту.
HSL дозволяє інтуїтивно налаштовувати колір — підвищуйте яскравість для світлішого відтінку, знижуйте для темнішого або зсувайте відтінок — без вгадування цифр hex.
Оберіть колір, скопіюйте значення RGB і додайте альфа-канал у своєму коді як rgba(...), щоб задати потрібний рівень прозорості.
Ні. Інструмент повністю працює у вашому браузері. Нічого не завантажується на сервер — він навіть працює офлайн після завантаження сторінки.
Оберіть базовий колір і використовуйте його значення HSL, а потім змінюйте яскравість вгору чи вниз, залишаючи відтінок і насиченість незмінними, щоб створити світліші й темніші відтінки, які виглядають як єдиний набір.