Оберіть колір, візьміть код і повертайтеся до роботи

Палітра, конструктор градієнтів і піпетка для зображень на одній сторінці. Без облікового запису, без встановлення й без очікування: оберіть відтінок і скопіюйте його як HEX, RGB, HSL або HSV.

%
Відкрити сторінку кольору

Коди кольору

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Популярні кольори

Переглянути всі популярні кольори
#A5E3FE
#8E1025
#65E76F
#046B8B
#C37B3C
#C02148
#B5A9D0
#F29C8C
#2C3F44
#F04777
#3B89B0
#7CD0B2

Що всередині

Піпетка

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

Перетворення форматів

Миттєво перемикайтеся між HEX, RGB, HSL, HSV, CMYK, XYZ, LAB і LCH та копіюйте будь-яке значення просто в CSS чи графічний редактор.

Конструктор градієнтів

Додавайте й перетягуйте точки вздовж смуги, перемикайте лінійний і радіальний режим, задавайте кут та прозорість, а тоді копіюйте готовий CSS.

Історія кольорів

Кожен колір і градієнт лишається у вашому браузері, щоб повернутися до нього згодом або використати в іншому проєкті.

Гармонії та варіації

На сторінці кожного кольору є освітлення, затемнення й шість схем гармонії, і будь-яку з них можна одним натисканням перетворити на градієнт.

Безкоштовно й приватно

Ні платного доступу, ні стеження за тим, що ви обираєте. Завантажені зображення читаються в браузері й нікуди не йдуть.

Для кого це

Дизайнери та продуктові команди
Коли накидаєте інтерфейс чи палітру бренду, перебираєте поєднання й копіюєте точний CSS для градієнта.
Ілюстрація та живопис
Щоб брати кольори з фотографій і картин піпеткою та планувати м’які переходи.
Фронтенд-розробка
Щоб мати узгоджені значення кольору в межах проєкту й зчитувати їх із наявного макета.
Перевірка доступності
Щоб порівняти колір у різних моделях і правити його, доки контраст не перевищить потрібний поріг.

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

  1. 1

    Оберіть колір

    Натисніть будь-де в полі насиченості, а тоді уточніть повзунками відтінку й прозорості. HEX, RGB і HSV оновлюються на ходу.

  2. 2

    Візьміть колір із зображення

    Перетягніть зображення на сторінку або оберіть файл, а тоді натисніть потрібний піксель. Коди з’являться одразу.

  3. 3

    Зберіть градієнт

    Натисніть смугу, щоб додати точку, і перетягніть її на місце. Перемкніть лінійний чи радіальний режим і задайте кут.

  4. 4

    Скопіюйте й використайте

    Копіюйте значення або цілу CSS-декларацію. Усе обране автоматично зберігається в історії.

Часті запитання

Маленький інструмент, що не заважає

Усе почалося як внутрішня утиліта: ми хотіли взяти колір, підправити його й рухатися далі, не відкриваючи спершу важкий графічний редактор. Це свідомо одна сторінка, свідомо швидка, і вона залишиться безкоштовною.

Розширення для браузера

Хочете брати кольори просто зі сторінок, які відкриваєте? Розширення для Chrome і Edge додають піпетку на панель, ведуть власну історію й відкривають цей інструмент одним натисканням.

Відкрити Chrome Web StoreВідкрити доповнення Microsoft Edge