Вибір кольору

Клікніть на візуальне коло, щоб обрати відтінок. Цей безкоштовний Color picker миттєво конвертує його у hex, rgb та hsl. Жодної реєстрації. Просто відкриваєте сторінку і працюєте.

Як колірне коло генерує формати

Клікніть на колі. Інструмент миттєво рахує точні координати у просторі hue, saturation та lightness. Стандартні матриці конвертації перетворюють ці дані у інші колірні простори. Ви отримуєте сирий hex код, rgb трійку і hsl значення одночасно. Уся ця математика виконується локально у вашому браузері.

Базова модель розглядає колір як тривимірний циліндр. Hue огинає зовнішній круговий край. Saturation змінюється від сірого центру до насиченого периферійного краю. Lightness масштабується від абсолютного чорного знизу до білого зверху. Потягнете один слайдер, і інші оновляться автоматично через жорсткі математичні зв'язки. Якщо знаєте точні значення, просто вбийте числа у відповідні поля вручну.

Коли вам знадобиться безкоштовний Color picker

Дизайнери тягнуть звідси точні значення з макету, коли клієнт вимагає специфічний відтінок синього. Фронтенд-розробники конвертують візуальні рішення у валідні css змінні. Іноді вам просто треба підібрати комплементарний колір для слайда презентації. Цей інструмент прибирає прірву між візуальною інтуїцією та суворими вимогами коду.

Річ незамінна при збірці дизайн-системи, де треба жорстко контролювати коефіцієнти контрастності. Берете базовий колір, дивитесь на його hex. Далі крутите слайдер lightness вручну, поки текст на темному фоні не стане чітко читабельним.

• Витягування точних hex кодів з гайдлайну бренду.
• Генерація комплементарних або аналогових палітр для нової теми сайту.
• Конвертація rgb значення зі скріншоту у робочий hex код.
• Тестування контрастності тексту через підкручування lightness до проходження перевірки.

Обмеження онлайн Color picker

Цей інструмент працює виключно у стандартному просторі srgb. Він не згенерує значення для екранів з широкою гамою типу display-p3 чи rec2020. Якщо ви верстаєте під топові мобільні дисплеї, отримані тут hex і rgb значення просто кліпнуться або зламають мапінг кольорів на цих пристроях.

Ввести cmyk напряму і побачити його на колі теж не вийде. Конвертація cmyk у rgb критично залежить від конкретного icc профілю цільового принтера. Тут зашита стандартна універсальна конвертація. Для вебу це підходить, але для професійного друку дає хибні результати. Завжди перевіряйте фізичні пробні відбитки.

Як користуватися Color picker

1. Клікніть будь-де у великому кольоровому квадраті, щоб задати базові saturation та brightness.
2. Потягніть вертикальний слайдер праворуч, щоб змінити загальний hue.
3. Відкалібруйте точні значення через числові поля для hex, rgb або hsl.
4. Скопіюйте згенерований код прямо з текстового поля біля потрібного формату.
5. Змініть слайдер opacity, якщо потрібен rgba або hsla з конкретним alpha каналом.

Порівняння колірних форматів

Різні середовища вимагають різних рядкових форматів. Розуміння, який саме використовувати, рятує від багів рендерингу.

Frequently asked questions

Цей Color picker справді безкоштовний?

Так. Інструмент повністю безкоштовний і не вимагає створення акаунта чи логіну. Генеруйте стільки колірних кодів, скільки потрібно, без жодних пейволів.

Як витягти колір з картинки?

Цей конкретний інструмент спирається на візуальне коло та слайдери, а не на піпетку для картинок. Щоб взяти колір з фото, спочатку використайте системний color picker екрана або окремий інструмент для витягування. Коли отримаєте початкове значення, просто вставте готовий hex код сюди у поле для фінальної підкрутки.

Чому мій hex код на телефоні виглядає інакше?

Калібрування екранів жахливо відрізняється між пристроями. Hex код — це абсолютне математичне значення у просторі srgb, але фізичний дисплей змінює те, як саме випромінюється це світло. Якщо колір виглядає хибно, проблема у профілі монітора, а не у згенерованому коді.

Чи можу я конвертувати cmyk у hex тут?

Ви можете ввести значення cmyk, але отриманий hex код буде лише наближенням. Cmyk — це субтрактивна модель для чорнила, тоді як hex описує адитивну модель світла. Конвертації бракує конкретного icc профілю принтера для реальної точності.

Чи працює інструмент у мобільних браузерах?

Так. Інтерфейс адаптивний, а тач-зони для слайдерів і кольорового квадрата достатньо великі для введення пальцем. Ви копіюєте згенеровані коди у буфер обміну так само, як на десктопі. На менших екранах лейаут просто ставить контрол вертикально, щоб елементи не налазили один на одного.