Визначити колір html онлайн. Як дізнатися колір фону на сторінці? Вибирай ColorZilla! Photoshop та Paint: як дізнатися колір за допомогою піпетки

Дизайнери періодично стикаються з проблемою як дізнатися точний колір точки на екрані моніторі, зазвичай таким грішать люди, які займаються розробкою дизайнів сайтів, іноді простіше скопіювати колірну гаму, ніж самому винаходити велосипед. Можна піти тернистим шляхом справжніх експериментаторів, наприклад роблячи скріншоти екранів, потім розбираючись з отриманими картинками в графічному редакторі або взагалі риючись у вихідних кодах веб-сторінок, але краще не займатися дурною роботою винаходячи черговий велосипед, а зупинитися на утиліті, яка все зробить на частку секунди. Програм для цього достатньо, сьогодні йтиметься про мініатюрну утиліту.

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

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

Потрібний колір запам'ятовується натисканням будь-якої клавіші, про це свідчить замок, що з'явився, копіюємо значення, для подальшої роботи натискаємо ще раз будь-яку клавішу. Значення кольору не потрібно переписувати вручну, достатньо клацнути два рази мишею по потрібному кодуванню, а потім вставити.

Colorpix можна закріпити поверх всіх вікон, достатньо натиснути плюсик зверху і викликати щось на зразок збільшувального скла, знайдіть і натисніть пунктик з хитрою назвою «MAGNIFIER», після чого вікно збільшитися в розмірах і додається панель (іноді чудово блимає точно ткнути в потрібну) .

Налаштувань немає зовсім, настільки утиліта проста як двері.

Colorpix виявилася геніальною простотою, тільки необхідні можливості, мінімальні розміри і надзвичайно зручна у використанні. Як користуватися можна розібратися буквально за кілька секунд, все зроблено максимально інтуїтивно. Якщо комусь потрібно швидко визначити колір будь-якої точки на екрані, рекомендую до використання.

Станиця для безкоштовного скачування Colorpix http://www.colorschemer.com/download.php

Остання версія на момент написання Colorpix 1.2

Розмір програми: файл 605 КБ

Сумісність: Windows Vista та 7, Windows XP

Вид ПЗ: Визначення кольору
Розробник/Видавець: Vlad Polyanskiy
Версія: 1.0
iPhone + iPad: 33 рублі [Скачати з App Store ]

У житті так багато важливих та цікавих речей! Назви квітів – не з-поміж них. Запам'ятати відмінності якогось екрювід верблюжогоПотрібно лише деяким людям вкрай специфічних професій. Всім решті достатньо мати під рукою Колориметр. Ця програма для iPhone, яка визначає колір по фотографії, надаючи вам максимум інформації по кожному відтінку.

Помнете, як шукали шпалери певного кольору? Чи предмет одягу під специфічний дрескод? А може, вам потрібна деталь інтер'єру, яка б точно вписалася в кольори меблів або розбавила акценти? Вирішити всі ці та інші дрібні побутові завдання допоможе новий вітчизняний додаток Колориметрдля iPhone.

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

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

Побігавши по дому з айфоном і дізнавшись багато нових слів, починаєш усвідомлювати користь від практичного застосування програми. Зімітувати звук можна. Описати на слова форму предметів теж нескладно. А ось пояснити, чим відрізняється відтінок сірого від того, що уявляє собі співрозмовник, майже неможливо. І ось тут і знадобиться база квітів Колориметри.

Наприклад, потрібно купити шпалери певного кольору. Або ще гірше: хтось іншийповинен купити шпалери, а ви сидите в передчутті, що ввечері вам додому привезуть десяток рулонів зовсім не відтінку, про який ви мріяли. Сфотографувавши предмет і вибравши найближчий до нього відтінок, ви будете впевнені, що ваш партнер чи помічник з ремонту точно знає, щопотрібно купити.

Іноді навіть найменше відхилення кольору може стати критичним. Наприклад, під час вибору фарби. Тут вже недостатньо однієї назви чи зображення. Потрібні стандарти, цифри. Добре, що у Колориметрі все це теж є. Натиснувши назву кольору, ви відкриєте його докладний опис. Тут вказані параметри відтінку у найпопулярніших колірних моделях – RGB(цифрове зображення) та CMYK, для друку.

Якщо ж йдеться не про рідкі фарби та кольори, а про віртуальні, дизайнери оцінять і два додаткові параметри – HSB(тон, насиченість та яскравість) та HEX-код кольору для веб-сайтів. Крім цього, додаток показує три найбільш відповідні кольори у відомій системі Pantoneзнаючи які, вам буде набагато простіше вести діалог з виробником або продавцем меблів та декору.

До розробників Колориметриє кілька пропозицій щодо подальшого розвитку. Довідкова інформація про кольори повинна копіюватися в буфер обміну або хоча б виділятися як текст – це допоможе швидко обмінюватися інформацією з людьми через iMessage або електронну пошту, а не надсилати їм товстий скріншот. А в інтерфейсі вбудованої фотокамери не завадить перемикач спалаху, бо зараз він спрацьовує автоматично, що не завжди добре.

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

Вибір за sanstv.ru: знайде код пікселя

Добре, нарешті почали робити онлайн сервіси російською sanstv.ru, і ось адреса, відмінна риса розбиває файл до пікселя. Щоб почати користуватися, прошу дивитися скріншот.

  • Можна вставити файл для визначення шляхом натискання кнопки PrtScr, при цьому зробиться знімок з усього браузера, але його не видно, щоб показати на екрані натискаємо cntrl+f.
  • Або простим перетягуванням з комп'ютера у вікно редактора.
  • Може робити по фото у високій якості.
  • Зручно дізнатися про забарвлення на сайті, зробив знімок і вставив.

Після всіх маніпуляцій побачите свою ілюстрацію та велике збільшення. Щоб визначити код (назву) кольору, треба навести на необхідний відтінок і подивитися комбінацію.

  1. Наводимо на потрібне місце на екрані, велике збільшення.
  2. Номер у двох формаціях rgb і hex, обидва використовуються, але популярніший за hex.

Тут багато корисних речей, наприклад, як верстальнику з'єднання css. Створено альтруїстом, за користування грошей не просить. Переходимо до решти сервісів.

Просто визначити колір онлайн з imagecolorpicker.com

Даний сайт imagecolorpicker.com відрізняється простотою визначення кольору онлайн, працює швидко. Але простота дає деякі обмеження:

  • Не можна збільшувати, якщо натисканням cntrl і +.
  • Щоб визначити відтінок, не можна користуватися перетягуванням і скрін, лише завантаженням.

Сайт варто уваги, піпетка виводиться прицілом, не втратите.

Колорист imgonline.com.ua: допоможе дізнатися навіть колір волосся

Даний сайт не може вказати саме який потрібен код, він робить розбивку на основні складові, ось адресу. Потрібно дизайнеру, який не може встановити популярний колаж в ілюстрації. Звіт має такий вигляд:

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

getcolor.ru: по картинці не працює

Помістив у статтю getcolor.ru, тому що немає претендентів, величезний мінус: немає пошуку по картинці. Працює на основі простого відтінкового кола, та вибору натисканням. Переміщаєте бігунок у потрібному напрямку і дивіться параметри rgb, а також hex.

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

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

HEX/HTML

Колір у форматі HEX ​​- це ні що інше, як шістнадцяткове уявлення RGB.

Кольори видаються у вигляді трьох груп шістнадцяткових цифр, де кожна група відповідає за свій колір: #112233, де 11 – червоний, 22 – зелений, 33 – синій. Усі значення мають бути між 00 та FF.

У багатьох додатках допускається скорочена форма запису шістнадцяткових кольорів. Якщо кожна з трьох груп містить однакові символи, наприклад #112233, їх можна записати як #123.

  1. h1 ( color: #ff0000; ) /* червоний */
  2. h2 ( color: #00ff00; ) /* зелений */
  3. h3 ( color: #0000ff; ) /* синій */
  4. h4 ( color: #00f; ) /* той же синій, скорочений запис */

RGB

Колірний простір RGB (Red, Green, Blue) складається з усіх можливих кольорів, які можуть бути отримані шляхом змішування червоного, зеленого та синього. Ця модель популярна у фотографії, телебаченні, та комп'ютерній графіці.

Значення RGB задаються цілим числом від 0 до 255. Наприклад, rgb(0,0,255) відображається як синій, тому що синій параметр встановлений у найвище значення (255), а інші встановлені в 0.

Деякі програми (зокрема, веб-браузери) підтримують відсотковий запис значень RGB (від 0% до 100%).

  1. h1 ( color: rgb(255, 0, 0); ) /* червоний */
  2. h2 ( color: rgb(0, 255, 0); ) /* зелений */
  3. h3 ( color: rgb(0, 0, 255); ) /* синій */
  4. h4 ( color: rgb(0%, 0%, 100%); ) /* той же синій, відсотковий запис */

Значення кольорів RGB підтримуються у всіх основних браузерах.

RGBA

З недавніх пір сучасні браузери навчилися працювати з колірною моделлю RGBA - розширенням RGB за допомогою альфа-каналу, що визначає непрозорість об'єкта.

Значення кольору RGBA визначається як: rgba(red, green, blue, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

  1. h1 ( color: rgb(0, 0, 255); ) /* синій у звичайному RGB */
  2. h2 ( color: rgba(0, 0, 255, 1); ) /* той же синій в RGBA, тому як непрозорість: 100% */
  3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* непрозорість: 50% */
  4. h4 ( color: rgba(0, 0, 255, .155); ) /* непрозорість: 15.5% */
  5. h5 ( color: rgba(0, 0, 255, 0); ) /* повністю прозорий */

RGBA підтримується в IE9+, Firefox 3+, Chrome, Safari, та в Opera 10+.

HSL

Колірна модель HSL є поданням моделі RGB у циліндричній системі координат. HSL представляє кольори більш інтуїтивним та зрозумілим для сприйняття чином, ніж типове RGB. Модель часто використовується в графічних додатках, палітрах кольорів, і для аналізу зображень.

HSL розшифровується як Hue (колір/відтінок), Saturation (насиченість), Lightness/Luminance (світло/світлість/світлість, не плутати з яскравістю).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Lightness є відсотковим значенням світлості (від 0% до 100%).

  1. h1 (color: hsl(120, 100%, 50%); ) /* зелений */
  2. h2 (color: hsl(120, 100%, 75%); ) /* світло-зелений */
  3. h3 (color: hsl(120, 100%, 25%); ) /* темно-зелений */
  4. h4 (color: hsl(120, 60%, 70%); ) /* пастельний зелений */

HSL підтримується в IE9+, Firefox, Chrome, Safari та Opera 10+.

HSLA

За аналогією з RGB/RGBA, HSL є режим HSLA з підтримкою альфа-каналу для вказівки непрозорості об'єкта.

Значення кольору HSLA визначається як: hsla(hue, saturation, lightness, alpha). Параметр alpha – це число в діапазоні від 0.0 (повністю прозорий) до 1.0 (повністю непрозорий).

  1. h1 ( color: hsl(120, 100%, 50%); ) /* зелений у звичайному HSL */
  2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* той же зелений в HSLA, тому що непрозорість: 100% */
  3. h3 (color: hsla(120, 100%, 50%, 0.5); ) /* непрозорість: 50% */
  4. h4 (color: hsla(120, 100%, 50%, .155); ) /* непрозорість: 15.5% */
  5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* повністю прозорий */

CMYK

Колірна модель CMYK часто асоціюється з кольоровим друком, з поліграфією. CMYK (на відміну від RGB) є субтрактивною моделлю, це означає, що більш високі значення пов'язані з темнішими кольорами.

Кольори визначаються співвідношенням блакитного (Cyan), пурпурового (Magenta), жовтого (Yellow) з додаванням чорного (Key/blacK).

Кожне з чисел, що визначає колір CMYK, є відсоток фарби даного кольору, що становить колірну комбінацію, а точніше, розмір точки растру, що виводиться на фотонабірному апараті на плівці даного кольору (або прямо на друкованій формі у випадку з CTP).

Наприклад, для отримання кольору PANTONE 7526 слід змішати 9 частин блакитної фарби, 83 частин пурпурової фарби, 100 - жовтої фарби, і 46 - чорної. Це можна позначити так: (9,83,100,46). Іноді мають такі позначення: C9M83Y100K46, або (9%, 83%, 100%, 46%), або (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (також відома як HSV) схожа на HSL, але це дві різні колірні моделі. Вони обидві засновані на циліндричній геометрії, але HSB/HSV заснована на моделі "hexcone", у той час як HSL заснована на моделі "bi-hexcone". Художники часто вважають за краще використовувати цю модель, прийнято вважати, що пристрій HSB/HSV ближче до природного сприйняття кольорів. Зокрема, колірна модель HSB застосовується у Adobe Photoshop.

HSB/HSV розшифровується як Hue (колір/відтінок), Saturation (насиченість), Brightness/Value (яскравість/значення).

Hue задає положення кольору на колі (від 0 до 360). Saturation є відсоткове значення насиченості (від 0% до 100%). Brightness є відсотковим значенням яскравості (від 0 до 100%).

XYZ

Колірна модель XYZ (CIE 1931 XYZ) є суто математичним простором. На відміну від RGB, CMYK та інших моделей, у XYZ основні компоненти є «уявними», тобто ви не можете співвіднести X, Y, і Z з будь-яким набором кольорів для змішування. XYZ є майстер-моделлю майже всіх інших колірних моделей, які у технічних областях.

LAB

Колірна модель LAB (CIELAB, CIE 1976 L*a*b*) обчислюється з простору CIE XYZ. При розробці Lab переслідувалася мета створення колірного простору, зміна кольору в якому буде більш лінійною з точки зору людського сприйняття (порівняно з XYZ), тобто для того, щоб однакова зміна значень координат кольору в різних областях колірного простору виробляло однакове відчуття зміни кольору.

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

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

Для цього необхідно завантажити картинку на сайт. Щоб завантажити файл, натисніть кнопку «Огляд». Виберіть потрібний файл із зображенням та натисніть «Завантажити». Як тільки зображення завантажиться, ви побачите його на екрані. Потім потрібно навести курсор на той піксель, колір якого хочете визначити. В окремому вікні ви зможете побачити колір пікселя, а в полі «Поточне значення» з'явиться відповідний номер пікселя HTML і RGB кольору пікселя.

Сервіс передбачає збереження коду кольору у форматі HTML та RGB кольору. Для цього потрібно навести курсор на потрібний піксель і натиснути лівою кнопкою миші. У полі «Збережені значення» в окремому вікні можна побачити колір пікселя, а також збережені значення коду пікселя у форматі HTML і RGB кольору.

Відгуки

Та начебто непогано, дякую
Норм
щедевр
наїс.
Допомогли дуже лойс вам