Таблиця колірних кодів RGB

Наведіть курсор на колір, щоб отримати шістнадцятковий та десятковий колірні коди нижче:

Колірний простір RGB

RGB колірного простору або колірна система RGB створює всі кольори з комбінації R О.Д., G Reen та B LUE кольори.

Червоний, зелений і синій використовують по 8 біт кожен, які мають цілочислові значення від 0 до 255. Це дає 256*256*256 = 16777216 можливих кольорів.

RGB ≡ червоний, зелений, синій

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

Коли червоний піксель встановлений на 0, світлодіод вимкнено. Коли червоний піксель встановлений на 255, світлодіод буде повністю увімкнено.

Будь-яке значення з-поміж них встановлює часткове випромінювання світлодіода.

Колірний формат та розрахунок RGB

Код RGB має формат 24 біти (біти 0..23):

RGB = (R*65536)+(G*256)+B , (якщо R RED, G IS GREEN and B is BLUE)

Приклади розрахунків

Білий колір RGB

White RGB code = 255*65536+255*256+255 = #FFFFFF

Синій колір RGB

Blue RGB код = 0*65536+0*256+255 = #0000FF

Червоний колір RGB

Red RGB код = 255*65536+0*256+0 = #FF0000

Зелений колір RGB

Green RGB код = 0*65536+255*256+0 = #00FF00

Сірий колір RGB

Gray RGB код = 128*65536+128*256+128 = #808080

Жовтий колір RGB

Yellow RGB код = 255*65536+255*256+0 = #FFFF00

Таблиця кольорів RGB

#RRGGBB Десятковий код

#RRGGBB Десятковий код

Дивіться також

• Конвертер RGB у шістнадцятковий
• Конвертер RGB в HSV
• Конвертер RGB в HSL
• Конвертер RGB в CMYK
• Колірні перетворення
• Таблиця кольорового кола
• Тестер кольору екрану
• Коди кольорів HTML
• Коди символів HTML
• Таблиця ASCII
• Символи Unicode
• Безпечні для Інтернету кольори
• Жовтого кольору
• Золотий колір

ВЕБ-КОЛЬОРУ

• Колір RGB
• Палітра кольорів
• Колірна схема
• Тестер кольору
• Колірний круг
• Коди кольорів HTML
• Безпечні для Інтернету кольори
• Синій колір
• Золотий колір
• червоний колір
• Жовтого кольору

ШВИДКІ ТАБЛИЦІ

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

Вісім правил про колірні палітри, які повинен знати кожен

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

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

1. Обмежте кількість кольорів

Застосування кольору до дизайну проекту має багато спільного з балансом. Чим більше кольорів ви використовуєте, тим важче досягти цього балансу. Ви досягнете кращих результатів, якщо дотримуватиметеся максимум трьох основних кольорів у вашій кольоровій гамі. Згідно з дослідженням Університету Торонто про те, як люди використовували Adobe Color CC, більшість людей заявили, що віддають перевагу простим кольоровим комбінаціям, які спираються тільки на два або три кольори. Якщо вам потрібні додаткові кольори, крім тих, які ви задали у своїй палітрі, використовуйте відтінки та тони.

Як створити колірну схему

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

Монохроматична схема дуже приємна на вигляд (особливо синій чи зелений відтінки). Як ви можете бачити на прикладі Facebook, схема виглядає чистою та елегантною.

• Аналогова. Аналогові колірні схеми створюються із суміжних кольорів. Один колір використовується як домінуючий, а інші використовуються для збагачення схеми. Хоча це відносно легко, трюк полягає в тому, щоб вирішити резонанс кольорів, що використовуються, оскільки вся схема буде перебільшена ним. Наприклад, Clear – додаток для складання та організації списків справ, що використовує яскраві аналогові кольори для візуального визначення пріоритетів вашого поточного набору завдань. У той час як, додаток для медитації Calm, використовує сині та зелені аналогові кольори, щоб допомогти користувачам відчувати себе спокійними та умиротвореними.

Аналогові схеми створюються з використанням трьох кольорів, розташованих поруч один з одним на 12-колірному колі. Clear – додаток для складання та організації списків справ, що використовує яскраві аналогові кольори для візуального визначення пріоритетів вашого поточного набору завдань.

Calm використовує аналогові кольори для створення загального настрою.

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

Використання додаткових кольорів – найпростіший спосіб виділити щось.

• Користувальницька. Створення користувальницької колірної схеми не так складно, як багато хто думає. Існує простий трюк, який можна використовувати для створення чудової палітри кольорів: просто додайте яскравий колір для акценту в нейтральну палітру (наприклад, традиційну монохроматичну схему). Отримана схема буде візуально яскравою.

Додавання одного кольору в дизайн у відтінках сірого легко і ефективно привертає увагу. Макет з поєднанням білого та сірого з синіми акцентами у колірній схемі Dropbox.

2. Надихайтеся природою

Кращі комбінації кольорів можна зустріти в природі. Чому? Тому що ці схеми здаються природними для очей. Щоб знайти натхнення, нам потрібно лише озирнутися навколо. Якщо ви бачите особливо гарний або яскравий колір у повсякденному житті, спробуйте створити схему навколо нього. Просто зробіть знімок гарного моменту та створіть на його основі свою колірну схему.

Найкращі колірні комбінації зустрічаються у природі. Ви можете створити схему кольору з фото.

3. Намагайтеся дотримуватися правила 60–30–10

Це вічне правило декорування, яке допоможе вам легко скласти колірну схему. Пропорції 60% + 30% + 10% призначені для забезпечення балансу кольорів у будь-якому просторі.

Ця концепція неймовірно проста у використанні: 60% – ваш домінуючий відтінок, 30% – вторинний колір, а 10% – колір акценту. Ідея полягає в тому, що вторинний колір підтримує основний колір, але вони досить відрізняються, щоб розділяти їх. Ваші 10% – колір акценту. Це може бути колір для виклику до дії або іншого елемента, який ви бажаєте виділити.

60% – ваш домінуючий відтінок, 30% – вторинний колір та 10% – колір для акценту. Цей метод дозволяє оку зручно переміщатися з однієї точки в іншу.

4.Спочатку дизайн у відтінках сірого

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

Додати колір в самому кінці, і навіть тоді, тільки з певною метою.

Додавання одного кольору до макету з відтінками сірого привертає погляд просто та ефективно.

5. Уникайте використання чорного кольору

У реальному житті чиста чорна майже ніколи не зустрічається. Всі “чорні” об'єкти навколо нас мають деяку кількість світла, що відбивається від них, а це означає, що вони не зовсім чорні, вони темно-сірі. Дороги не чорні. Тіні не чорні.

Колір цього собаки темно-сірий, а не чорний.

Коли ви поміщаєте чистий чорний колір поруч із набором ретельно підібраних кольорів, чорний все пересилить. Він виділяється, тому що це природно. У більшості програм, які ми щодня використовуємо, є чорні кольори, які насправді не чорні, але темні сірі. Наприклад, найтемніший колір на верхній панелі Asos не # 000000, це # 242424. Тому не забудьте завжди додати трохи насиченості у свій колір.

Темний колір у ASOS – не чорний

6. Підкресліть важливість, використовуючи колірний контраст

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

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

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

Відомо, що кольори мають властиві їм значення та можуть викликати емоції. Ці значення матимуть прямий вплив на те, як ваші користувачі сприймають ваш продукт.

Коли ви вибираєте колірну палітру для своєї програми / сайту, ви не можете просто думати про те, як все виглядає - ви повинні думати про те, як усі відчувається. Кольори, які ви обираєте, можуть працювати за або проти ідентичності бренду, який ви намагаєтеся створити. Для початку, я склав короткий довідковий посібник, який охоплює основні асоціації з кожним кольором (у західному світі).

Червоний, Помаранчевий, Жовтий

• Червоний (Пристрасний, Потужний, Небезпечний, Важливий): Червоний – надзвичайно стимулюючий колір. Він створює враження швидкості та сили. Він відомий як колір енергії. Він довів фізіологічні ефекти збільшення циркуляції крові та підвищення метаболізму. Ось чому, коли люди бачать червоний колір, вони читають старанніше та швидше. Використання червоного – це спосіб привернути увагу користувачів або виділити окремий елемент, який потребує уваги.
• Помаранчевий (грайливий, енергійний, привабливий, дешевий): Помаранчевий – теплий та повний життя колір. Він має енергійну ауру і здатний створити теплий прийом для ваших користувачів. Деякі дослідники вважають, що помаранчевий виражає дешевизну.
• Жовтий (Веселий, доброзичливий, стимулюючий, що привертає увагу): Жовтий - надзвичайно універсальний колір, залежно від обраного відтінку. Світло-жовтий асоціюється із сонцем і, отже, передає позитивність та теплоту. Темні відтінки жовтого (наприклад, золото) створюють враження давнини та віку. Ці темніші відтінки часто пов'язані з вічністю та мудрістю.

Зелений, синій, фіолетовий

• Зелений (природний, безпечний, свіжий): зелений колір відображає почуття довкілля та близькість до природи. Він також означає зростання, і саме тому він часто пов'язаний із бізнесом. Зелений означає почуття правильного чи неправильного.
• Синій (заспокійливий, відповідальний, що вселяє довіру, надійний): синій колір часто асоціюється зі спокійними та розслаблюючими емоціями. Він також асоціюється з силою та надійністю, з почуттям довіри та професіоналізму. Синій випромінює відчуття внутрішньої безпеки. Ось чому ви можете бачити банки та технологічні компанії, які використовують цей колір. Гіганти соціальних мереж, такі як Facebook, Twitter та LinkedIn, використовують синій колір у своїх мережах.
• Фіолетовий (Розкішний, Таємничий, Романтичний, Духовність): Історично пов'язаний із королівською родиною, фіолетовий натякає, що продукт високого класу.

Рожевий, Чорний, Білий, Сірий

• Рожевий (жіночий, невинність, молодість): рожевий найбільш відомий своїми асоціаціями з жіночністю.
• Чорний (потужний, витончений, загадковий, трендовий): чорний привертає увагу швидше, ніж інші кольори, зокрема червоний. Ось чому він найчастіше використовується лише для тексту та акцентів.
• Білий (чистота, здоров'я, охайність, невинність): білий робить акцент на інших кольорах навколо нього, що робить його популярним вибором як вторинний колір.
• Сірий (нейтральний, формальний, вишуканий, стерильний): сірий колір є нейтральністю, він може приймати характеристики чорного або білого кольорів. При використанні його як основний колір створюється враження формальності.

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

8. Зробіть свій дизайн доступним

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

Уникайте використання кольору як індикатора

Приблизно 8% чоловіків та 0,5% жінок страждають від деякої форми колірної сліпоти. Це 1 із 12 чоловіків та 1 із 200 жінок. Хоча існує кілька форм цього захворювання, червоно-зелена кольорова сліпота є найпоширенішою. Людина, яка страждає на цю форму дальтонізму, зазвичай має проблеми з відмінностями як червоного, так і зеленого кольорів.

Як бачить кольори людина з нормальним зором і ті ж кольори людина з червоно-зеленою сліпотою (дейтеронопія і протанопія).

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

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

Уникайте низької контрастності тексту

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

Низькоконтрастний текст – це те, що може потенційно порушити зручність використання багатьох програм.

Перевірте контраст, щоб кольори фону та переднього плану відображалися з достатнім контрастом для людини, яка страждає на дальтонізм або погано бачить людину. Це дійсно не так складно – все, що вам потрібно зробити, це перевірити коефіцієнт контрастності. Коефіцієнт контрастності показує, як колір відрізняється від іншого кольору (зазвичай це 1: 1 або 21: 1). Чим вище різниця між двома числами у співвідношенні, тим більша різниця у відносній яскравості між кольорами. W3C рекомендує наступні коефіцієнти контрастності для тексту та тексту на зображенні:

• Маленький текст повинен мати коефіцієнт контрастності щонайменше 4,5:1 стосовно фону.
• Великий текст (при 14 pt жирний / 18 pt звичайний) повинен мати коефіцієнт контрастності принаймні 3: 1 до фону.

Хороші новини вам не потрібно перевіряти їх вручну. Використовуючи інструмент Color Contrast Checker, ви можете перевірити свої комбінації кольорів всього за кілька кліків.

Програма перевірки кольорового розмаїття від Webaim

Бонус: Основні інструменти UX дизайнера

Щоб спростити вам завдання, я також склав список найкращих інструментів для вибору палітри кольорів.

Adobe Color CC

Adobe Color CC (раніше відомий як Kuler) – чудовий інструмент для пошуку, зміни та створення колірних схем. Кожен колір на панелі може бути індивідуально змінений або обраний як базовий колір всього за кілька кліків. Палітри можуть бути збережені та додані до бібліотеки, і існує безліч відмінних колірних схем, створених спільнотою та доступних на сайті:

Adobe Color CC – чудовий інструмент, який здатний прискорити вивчення різних варіантів колірної схеми.

Dribbble пошук за кольором

Якщо ви хочете зробити візуальні дослідження з використання певного кольору іншими дизайнерами, зайдіть на dribbble.com/colors та виберіть потрібний колір.

Ви також можете вказати мінімальний відсоток вмісту кольору (наприклад, 30% синього).

Вкажіть мінімальний відсоток вмісту кольору

Material Design

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

Colorzilla

ColorZilla - це розширення для Google Chrome і Mozilla Firefox, яке включає безліч пов'язаних з кольором інструментів, у тому числі підбирач кольорів, піпетку, генератор градієнта CSS і браузер палітри.

Coolors.co

Coolors – потужний інструмент створення багатобарвних схем. Ви можете просто заблокувати вибраний колір та натиснути пробіл, щоб створити нову палітру. Цей інструмент чудовий тим, що ви не обмежені лише одним результатом – можна отримати кілька колірних схем, просто змінивши базову точку.

Один із моїх улюблених способів створення колірної схеми – це використання фотографії.Цей інструмент дозволяє завантажити зображення і зробити колірну палітру.

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

Симуляція колірної сліпоти в Adobe Photoshop

За допомогою Photoshop можна перевірити доступність вашого дизайну. Просто перейдіть в View> Proof Setup, а потім ви можете вибрати один з двох типів сліпоти кольору (протанопія або дейтронопія).

NoCoffee Vision Simulator для Chrome

Щоб уникнути проблем із доступністю в дизайні, при проектуванні рекомендується перевіряти дизайн на колірну сліпоту. NoCoffee Vision Simulator можна використовувати для імітації проблем із зором. Наприклад, використовуючи параметр “Color Deficiency”, встановивши “Deuteranopia”, ви можете переглядати веб-сторінки у відтінках сірого. Це допоможе вам зробити ваш дизайн доступним для користувачів із порушеннями зору.

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

Колірні схеми – ваша проблема? Записуйтесь на курси від Springboard Введення у UX дизайн. Тисячі студентів пройшли їх, щоб розпочати успішну кар'єру у дизайні.