Як взяти точний колір із зображення: HEX, RGB та HSL

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

Піпетка кольору із зображенняПотрібен точний код кольоруБезкоштовно

Що зберігає піксель

Кожен піксель — це крихітний квадратик кольору. На екрані або у файлі зображення його записано трьома числами: для червоного, зеленого та синього, кожне від 0 до 255. Чистий червоний — це 255, 0, 0. Ці три числа несуть однакову інформацію в будь-якому форматі, тож один колір можна записати кількома способами.

HEX, RGB і HSL

• HEX записує кожне число в шістнадцятковій системі, по два символи на канал. #FF0000 — це чистий червоний. Його використовують веб-сторінки, CSS і більшість дизайнерських інструментів.
• RGB записує ті самі числа в десятковій системі, як rgb(255, 0, 0). Це той самий колір, що й HEX-код.
• HSL описує колір так, як ми говоримо про нього в побуті. Відтінок — це кут на колірному колі, насиченість — наскільки колір яскравий, а світлість — наскільки він світлий або темний. hsl(0, 100%, 50%) — це чистий червоний.

Використовуйте HEX, коли вставляєте колір у код, RGB — коли інструмент його вимагає, а HSL — коли потрібна світліша або темніша версія того самого відтінку. Зміна лише світлості в HSL зберігає відтінок, а вручну це зробити в HEX важче. Для перевірки контрастності двох кольорів див. HEX, RGB, HSL, CMYK і контрастність.

Ось приклад кольору в таблиці стилів:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Чому код може не збігатися з екраном

• Зображення стиснуте. JPEG економить місце, згладжуючи дрібні деталі, тож пікселі поблизу краю можуть трохи відрізнятися від кольору, який ви бачите в середині області.
• Краї змішуються. Там, де сходяться два кольори, пікселі між ними є сумішшю. Це не окремий колір.
• Профілі кольору різняться. Піпетка зчитує значення, які декодує браузер, а вони в sRGB. Фото, збережене з широкогамутним профілем, в інших програмах може виглядати інакше.
• Масштабування змішує пікселі. Скриншот, знятий при масштабованому розмірі дисплея, може мати змішані пікселі. Якщо можна, робіть скриншот у повному розмірі.
• Дуже великі зображення читаються з копії. Зображення, довша сторона яких перевищує 6000 пікселів, зчитуються з копії 6000 пікселів, тому окремий піксель може трохи відрізнятися від файлу повного розміру.

Беріть колір із середини однорідної ділянки

Знайдіть ділянку одного кольору, а потім перейдіть до її центру. Лупа показує 11 на 11 пікселів навколо курсора, тож видно, чи місце змішане, чи однорідне. З клавіатури переміщуйте приціл на один піксель стрілками або на десять — зі Shift, а щоб вибрати колір, натисніть Enter. Перевірте показання, перш ніж копіювати.

Використовуйте палітру для колірної схеми

На фото рідко є лише один колір, який вам потрібен. Палітра показує до шести його основних кольорів. Вона працює так: округлює кожен піксель до 16 рівнів на канал, рахує групи і залишає найчастіші групи, що відрізняються одна від одної. Кожен зразок показує середнє значення своєї групи. Натисніть на зразок, щоб скопіювати його HEX-код. Сприймайте палітру як відправну точку, бо це середнє значення, а не виміряний фірмовий колір.

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

Якщо дизайнерський інструмент вимагає інший формат, вставте HEX-код у конвертер кольорів. Він перетворює між HEX, RGB і HSL без зміни кольору, тож результат збігається з кодом, який ви взяли.

Останні вибірки та приватність

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

Як це зробити у fixmint

1. Відкрийте піпетку кольору для зображень і перетягніть фото в поле.
2. Наведіть курсор на потрібне місце. Або виберіть зображення і переміщуйте приціл на один піксель стрілками, утримуючи Shift для десяти пікселів.
3. Клацніть або натисніть Enter, щоб взяти колір. Перевірте показання, перш ніж копіювати.
4. Скористайтеся кнопкою «Копіювати» поруч із HEX, RGB або HSL, щоб скопіювати потрібне значення.
5. Якщо дизайнерський інструмент вимагає інший формат, вставте значення в конвертер кольорів.

Коротко про головне

Чому колір на моєму екрані виглядає інакше? Ваш екран показує масштабовану версію файлу з керуванням кольором. Беріть колір із середини однорідної ділянки і порівнюйте HEX-код із відомим зразком.

Який формат краще копіювати? HEX для веб-сторінок і більшості дизайнерських інструментів. RGB або HSL використовуйте, коли інструмент вимагає саме їх.

Чи завантажує інструмент моє зображення? Ні. Зображення декодується і зчитується у вашому браузері.