Спочатку видобудьте приклад палітри, а потім використовуйте точний вибір і ручне редагування, щоб вирішити, які кольори належать до вашого власного проекту. Відкрити Вибір кольору на зображенні.
Завантажте та витягніть початкову палітру
Відкрийте Image Color Picker і завантажте одне підтримуване зображення або спробуйте зразок. Автоматичне вилучення завантажує джерело на сервер. Зразок у цьому посібнику — collage-botanical.jpg, фото 1200 x 900 квітів, листя та персикового фону.
Залиште Colors to extract на 6 і виберіть Dominant для прикладу. Dominant віддає перевагу основним кольорам зображення, тоді як Vibrant надає більшого впливу барвистим акцентам. Запит може використовувати від 3 до 12 кольорів; зображення з меншою кількістю чітких видимих груп може повернути менше.
Фактичний результат Dominant містить #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Найбільша група — #E3B49F, що становить приблизно 28.88% від вибіркових видимих пікселів. Для вилучення використовувався зразок 512 x 384; ці відсотки не є точним переписом зображення повної роздільної здатності.
Колір палітри може бути середнім значенням сусідніх кольорів. Виберіть конкретний піксель, коли вам потрібне значення однієї дрібної деталі.
Виберіть і вдосконаліть окремі кольори
Клацніть або торкніться зображення, щоб перевірити піксель за допомогою лупи. Наведіть фокус на зображення та використовуйте клавіші зі стрілками для переміщення на один піксель, Shift плюс стрілка для переміщення на десять, потім Enter для вибору. Скопіюйте HEX, RGB або HSL за допомогою відповідної кнопки копіювання або скористайтеся Add to palette.
Виберіть зразок, щоб змінити його значення HEX або колір, перемістити його ліворуч чи праворуч або видалити. Додавання власного кольору приймає значення HEX на ваш вибір. Блокування кольору зберігає вибраний зразок, коли «Оновити палітру» або змінені налаштування видобування генерують іншу початкову палітру.
Вибірка та прозорість пропонують «Вихідний колір» та «Композицію на фоні». Вихідний колір включає непрозорість у скопійованих кодах, коли це доречно; композиція показує піксель, накладений на вибраний фон вибірки. Самі зразки палітри є непрозорими значеннями RGB. Відредаговані та вибрані кольори не мають оціночного відсотка джерела.
Зображення, що декодуються браузером, використовують зразки sRGB браузера. Якщо використовується нормалізований попередній перегляд, інструмент вибору чітко позначає свої кольори та координати як приблизні.
Приклад у цьому посібнику
Кольори для видобування: 6; Домінантні; без ручних змін або блокувань; Зберегти як: PNG. Автоматичне видобування виконало вибірку 512 x 384 пікселів.
- Вихідне зображення
- 1200 x 900 пікс.
- Видобуті кольори
- 6 непрозорих кольорів
- Картка палітри
- 600 x 500 пікс.
- Завантажено PNG
- 9,163 байтів
Перевірте пару «текст і фон»
Відкрийте «Перевірити контрастність кольорів». Встановіть текст і фон за допомогою елементів керування кольором, введіть коди HEX або використовуйте вибраний колір для будь-якої сторони. Живий зразок тексту дозволяє порівняти пару, а коефіцієнт супроводжується окремими результатами для Normal AA, Normal AAA, Large AA та Large AAA.
Вибирайте пару для цільового призначення, а не припускайте, що кожен видобутий колір можна використовувати як текст. Світло-персиковий і світло-фіолетовий можуть добре виглядати разом на фотографії, але бути поганою комбінацією тексту та фону.
Цей елемент керування перевіряє лише цю пару кольорів на контрастність тексту. Це не повний аудит доступності, і він не визначає, чи є зручними типографіка, взаємодія з клавіатурою або решта дизайну.
Коефіцієнт контрастності, що відповідає вимогам, є корисною перевіркою, а не гарантією того, що вся сторінка є доступною.
Скопіюйте значення або експортуйте палітру
Для швидкої передачі скопіюйте окремий код або скористайтеся «Копіювати кольори палітри HEX». Для файлу виберіть «Зберегти як» і натисніть «Почати». PNG створює зображення палітри з підписами; SVG зберігає зразки та підписи як векторний вміст; CSS надає пронумеровані змінні кольорів; JSON містить значення HEX, RGB та HSL.
Необроблений приклад із шести кольорів експортує palette.png у розмірі 600 x 500 пікселів та 9,163 байтів. Порядок зразків відповідає палітрі. Ваша остаточна палітра може містити від 1 до 12 кольорів після редагування, навіть якщо автоматична початкова кількість була іншою.
Завантажте перед виходом або оновленням. Остаточний експорт завантажує вихідні та вибрані кольори для обробки на сервері. Він створює новий файл палітри і не перефарбовує та не замінює оригінальну фотографію.
PNG та SVG є зручними візуальними довідниками. CSS та JSON корисні, коли на наступному етапі потрібні багаторазові значення кольорів.
Поширені запитання
Чи повертає піпетка ті самі кольори, що й автоматичне видобування?
Не обов'язково. Вибране значення описує конкретний піксель джерела або попереднього перегляду. Автоматичне видобування групує вибрані пікселі та може повертати усереднені кольори.
Чи враховуються прозорі пікселі?
Повністю прозорі пікселі виключаються з видобування. Частково прозорі пікселі мають меншу вагу. Вибірка джерела може показувати непрозорість, але експортовані зразки палітри є непрозорими.
Що відбувається із заблокованими кольорами, коли я оновлюю сторінку?
Заблоковані кольори залишаються в палітрі, тоді як нові видобуті кольори заповнюють інші позиції. Збереженому або відредагованому кольору не призначається вигаданий відсоток зображення.
Чи можу я використовувати це для точного брендового кольору?
Введіть відоме значення HEX безпосередньо або виберіть відповідний піксель джерела. Освітлення фотографії, стиснення, керування кольором і нормалізовані попередні перегляди можуть змінювати вибрані значення, тому автоматична палітра фотографії не є доказом оригінальної специфікації бренду.
Створіть палітру, яку ви зможете використовувати у своєму наступному дизайні
Спробуйте зразок або використайте власний файл і перегляньте результат перед поширенням.
