Руководство для кодера по цветам — перестаньте использовать RGB и используйте вместо него это | Джейк Краевски
Вместо того, чтобы становиться экспертом в теории цвета, вот как вы можете легко управлять цветами, как дизайнер.
Apple iPad 2 пикселя под микроскопом. Взято с Anandtech.com Популярная викторина: Опишите без обмана, какой цвет может представлять этот шестнадцатеричный код: #03A87C ? Вот подсказка : RGB(3, 168, 124) (это помогло?)
— Ответ: ¡uoʇʇnq ʍoןןoɟ ǝɥʇ ɟo uǝǝɹƃ ǝɥʇ s,ʇI
Свет комбинируется по-разному. Красный и зеленый дают желтый, зеленый и синий — голубой, а красный и синий — пурпурный. Трудно предсказать, какие цвета вы получите, и с легкостью управлять ими, поэтому лучше не программировать и не проектировать в цветовом пространстве RGB. То, что вы передаете своей машине, — это интенсивность красного, зеленого и синего света на пиксель на дисплее RGB.
Если вы не являетесь экспертом в аддитивном смешивании цветов, вы, вероятно, не сможете предсказать, какие комбинации цветов дадут точный цвет, который вы ищете. В самом общем смысле комбинации этих трех основных цветов используются для создания более 16 миллионов цветов, которые мы обычно видим на наших дисплеях.
Об этой серии
В этой серии я раскрою тайну выбора правильных цветов для работы. Цель состоит в том, чтобы дать вам практические инструменты, чтобы все выглядело так, как будто вы наняли дизайнера для выбора цветовых схем. Когда ваши проекты выглядят хорошо, мы все выигрываем!
- Часть 1: Не используйте RGB, если вы не являетесь экспертом в теории цвета
- Часть 2: Как украсть цветовую палитру у природы.
Какого черта?
Вот правило, которое нужно выучить, чтобы правильно его отклонить (если вы знаете, что такое шестнадцатеричные цветовые коды, переходите к следующему разделу) .
Шестнадцатеричные «цифры» представляют собой 16 значений от 0 до 15, где вместо добавления «1» к разряду 10 при передаче числа 9 мы продолжаем считать выше разряда 1, как если бы было шесть дополнительных цифры , которые представляли числа 10–15.
Поскольку эти числа не встроены в наши клавиатуры, в шестнадцатеричном формате используется просто 9.0007 a =10, b =11, c =12, d =13, e =14 and f =15 . Это дает нам 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
Шестнадцатеричный формат позволяет нам представлять трехзначные значения, используя только 2 цифры. Например: 255 становится FF.
Определение цвета с помощью шестнадцатеричного числа
Цвета создаются путем смешивания каналов. Когда вы видите цвет, записанный в шестнадцатеричном формате (например, #AABBCC ), то вы видите интенсивность каналов для красного ( AA ), зеленого ( BB ) и синего ( CC ) пикселей, разделенных от 0–255 ( 00–FF ) шагов.
Ноль «выключен», и есть 255 различных различий интенсивности вплоть до полной яркости.
Это количество вариаций является источником 16 миллионов+ цветных дисплеев, поскольку существует 255 × 255 × 255 = 16 581 375 различных комбинаций, которые вы можете создать, изменяя интенсивность каждого канала или субпикселя.
Что случилось с предсказуемостью?
На изображениях ниже кнопка слева получается аддитивной смесью трех цветных кнопок справа. Кто бы знал, что темно-красный, ярко-зеленый и интенсивно-синий приведут к светло-зимнему цвету? И в этом заключается проблема с RGB. Это совсем не интуитивно понятно. Вы не можете предсказать, какие цвета были смешаны, просто взглянув на конечный цвет, и вы не можете сказать, какой конечный цвет вы получите, просто взглянув на основные цвета.
Не интуитивно понятно, какие сочетания цветов следует использовать для получения цвета слева. На самом деле это результат аддитивного смешивания красной, зеленой и синей версий справа.
Смешивание цветов с использованием RGB. Аддитивное смешивание трех цветов дает средний цвет. С теорией аддитивного света #FFFFFF или RGB(255, 255, 255) (полная интенсивность по всем каналам) дает нам чистый белый свет, а #000000 или RGB(0, 0, 0) (все каналы выключены), создает черноту.
Теперь, зная эти основы RGB, должно быть легко понять, что #FF0000 — чисто красный, #00FF00 — чисто зеленый, а #0000FF — чисто синий.
Единственный, последний вывод заключается в том, что всякий раз, когда все каналы имеют одинаковую интенсивность (за исключением черного и белого, упомянутого ранее), конечным результатом является один из 253 оттенков серого (например, #333333 — темно-серый, #C3C3C3 светло-серый).
Если вы хотите облегчить себе жизнь и иметь возможность выбирать цвета, которые хорошо смотрятся вместе, выберите HSL или Оттенок , Насыщенность , Яркость .
Период . Конец статьи… (Ну, ладно. Поясню еще немного).
Оттенок — это цвет цветность , о котором мы говорим: краснота, зелень, голубизна, оранжеватость, фуксианность, розоватость и т. д. От 0 до 360 градусов есть круг, который начинается с красного, заканчивается красным и имеет все цвета радуги между ними.
Цветовой круг оттенка. Все оттенки выбираются из этого колеса и отображаются с полной яркостью и насыщенностью.Насыщенность — полнота цвета от серого до полностью насыщенного. Это шкала от 0% до 100% насыщения. Чем менее насыщенный, тем бледнее оттенок, чем насыщеннее, тем интенсивнее оттенок.
Яркость определяет, насколько близким к черному или полной яркости должен быть цвет, также по шкале от 0% до 100%. При яркости 100% у вас белый цвет, при 0% — черный.
Это несложно. На самом деле это должно быть просто , как .
Как использовать эту информацию
Начиная со всех значений, установленных на 0, если вы отрегулируете только яркость, вот что вы получите.
Обратите внимание, что для яркости 0 не имеет значения, какой у вас оттенок и насыщенность, у вас будет полностью черный цвет без света.
Теперь выберем третью кнопку сверху и увеличим насыщенность с 0 до 89.. Если Hue по-прежнему установлен на 0, мы получаем довольно интенсивный, довольно яркий красный цвет. Когда мы настраиваем только оттенок, сохраняя яркость и насыщенность одинаковыми, у нас есть 360 различных оттенков для игры.
Добавление насыщенности к одному из серых блоков выше. Регулировка оттенка изменяет этот цвет.При тех же самых значениях оттенка, если мы отрегулируем только насыщенность, мы получим 100 более мягких или более ярких вариаций каждого оттенка. Здесь они менее интенсивные, слегка приглушенные версии вышеуказанных цветов. У них есть мягче на ощупь. Чем ближе насыщенность к 0, тем более бесцветными или серыми они будут выглядеть.
Регулировка насыщенности цветов создает более приглушенные или пастельные или более смелые и интенсивные цвета.
Снова используя нашу третью кнопку, если мы вместе внесем небольшие корректировки в оттенок, насыщенность и яркость, мы сможем создать семейство стилей кнопок, которые можно использовать для одного и того же элемента призыва к действию:
Играем со всеми тремя факторы в небольшом диапазоне могут создать семейство стилей для конкретного интерфейса.Как видите, принципы, лежащие в основе HSL, позволяют вам иметь детальный контроль над каждым аспектом вашего выбора цвета, не полагаясь на дизайнеров или предустановленные таблицы цветов. Самое главное, результаты несколько предсказуемы! Если вы хотите более яркий красный, измените яркость, если вы хотите, чтобы он был мягче, понизьте насыщенность, побольше синего? Найдите оттенок, который вы хотите, чтобы он был, и так далее и тому подобное.
Если у вас есть возможность, нет никаких причин выбирать RGB вместо HSL, если только вам не нужен низкоуровневый контроль над интенсивностью света на уровне субпикселей.
В противном случае имеет смысл настраивать цвета так, чтобы они были сосредоточены на человеческом восприятии, а не на способах, которые соответствуют возможностям аппаратного дисплея.
Далее в этой серии
Позже в этой серии я объясню, как создавать цветовые темы с базовыми цветами, цветами выделения, акцента и тона, которые можно использовать для оформления целых приложений или веб-страниц. черный в мире, какие цветовые сочетания не использовать и многое другое.
Удачной раскраски!
Коллектив UX жертвует 1 доллар США за каждую статью, опубликованную на нашей платформе. Эта история помогла Bay Area Black Designers: профессиональному сообществу разработчиков чернокожих, которые занимаются цифровыми дизайнерами и исследователями в районе залива Сан-Франциско. Объединяясь в сообщество, участники делятся вдохновением, связью, наставничеством, профессиональным развитием, ресурсами, обратной связью, поддержкой и устойчивостью. Молчание против системного расизма — не выход.
Создайте дизайнерское сообщество, в которое вы верите.Топ 22 оранжевых шестнадцатеричных кодов, оптимистичный и удивительный
Любите оптимистичный оранжевый?
Вот 22 основных оранжевых шестнадцатеричных цветовых кода и значения RGB.
Они охватывают самые важные оттенки, которые вам понадобятся.
Таблица содержит образцы цветов для визуализации значений оранжевого цвета. За ними следуют название цвета, шестнадцатеричный код и цветовой код RGB.
Кроме того, есть удобная таблица цветов, которую можно прикрепить!
Давайте выложимся на оранжевом.
Оранжевый Цветовой код
Оранжевый является одним из трех вторичных цветов в системе RGB, наряду с зеленым и фиолетовым. В RGB оранжевый получается путем соединения красного с зеленым!
Цветовое пространство RGB используется любым типом монитора — компьютером, телевизором, мобильным устройством, — который использует красный, зеленый и синий свет для создания цветов.
Оттенок, традиционно известный в Интернете как оранжевый, имеет шестнадцатеричный код цвета #FFA500. Это означает, что красный свет полностью включен, с большим количеством зеленого, а синий свет отсутствует.
Оранжевый #FFA500 Образец цвета:
Этот ярко-оранжевый цвет напоминает апельсиновый сок.
Число RGB для этого оранжевого: 255, 165, 0. Его можно выразить в процентах как 100, 64,7, 0. требуется сейф.
Безопасный для Интернета оранжевый образец цвета #ff9900:
Оранжевый также является вторичным цветом в субтрактивной цветовой системе RYB (красный, желтый, синий), которая используется для физических носителей, таких как краски.
Этот конкретный апельсин будет в основном желтым с изрядной долей красного. Это скорее желто-оранжевый.
Нужна дополнительная информация об этом? Найдите таблицу смешивания цветов RYB с полным руководством по цветовому кругу RYB.
Если вам нужно напечатать соответствующие деловые материалы, оранжевый #FFA500 будет представлен 0 % голубым, 35 % пурпурным, 100 % желтым и 0 % черным в красках CMYK.
Таким образом, оранжевый цветовой код CMYK — C: 0, M: 0,35, Y: 1, K: 0.
20 оранжевых цветовых кодов
Вот несколько красивых оттенков оранжевого, от мягкого оранжевого до золотистого и насыщенного теплого коричневого.
Проверьте точные цвета в образцах, за которыми следуют названия цветов и номера цветов.
Самый простой способ использовать их для своей веб-страницы или дизайнерских проектов — скопировать шестнадцатеричные числа и вставить их туда, где это необходимо.
| Цвет | Название цвета | Шестнадцатеричный | (RGB) |
|---|---|---|---|
| Dark Orange | #FC6600 | (252, 102, 0) | |
| Gold | #F9A602 | (249, 166, 2) | |
| Goldenrod | #DBA520 | (219, 165, 32) | |
| Pumpkin | #FF7417 | (255, 116, 23) | |
| Fire | #FDA50F | (253, 165, 15) | |
| Охра | #CC7722 | (204, 119, 34) | |
| Burnt Orange | #964000 | (150, 64, 0) | |
| Dijon | #C49102 | (196, 145, 2) | |
| Tangerine | #F9812A | (249, 129, 42) | |
| Tiger | #FD6A02 | (253, 106, 2) | |
| Honey | #EB9605 | (235 , 150, 5) | |
| Carrot Orange | #EF7215 | (239, 114, 21) | |
| Amber | #FFBF00 | (255, 191, 0) | |
| Apricot | #EF820D | (239, 130, 13) | |
| Bronze | #B1560F | (177, 86, 15) | |
| Cider | #B3672B | (179, 103, 43) | |
| Clay | #813F0B | (129, 63, 11) | |
| Rust | #8B4000 | (139, 64, 0) | |
| Amber 2 | #883000 | (136, 48, 0) | |
| Spice | #793802 | (121, 56, 2) |
Вы можете проверить больше названий оранжевых цветов в нашем цветовом тезаурусе.
Заключение
Как и коричневый, оранжевый цвет является одним из наименее любимых цветов как мужчин, так и женщин. Но сильный выбор для оптимистов и экстравертов!
Возможно, вам захочется узнать, что это значит, если оранжевый – ваш любимый цвет .
В брендинге оранжевый обычно означает доступность, как в Amazon и Payless Shoes. Или это может означать «молодость», как у Nickelodeon.
Если вы рассматриваете оранжевый цвет для брендинга, вы можете узнать больше о выборе деловых цветов .
Есть большая вероятность, что вы нашли именно то, что вам нужно выше, но если вам нужно больше похожих оттенков, я могу добавить их позже:
- Бледно-оранжевый
- Атомный мандарин
- Сиракузский апельсин
- Светло-лососевый
- Оранжевый сила воли
- Глубокий шафрановый
- Оранжевый безопасный
Если вы нашли этот комментарий полезным, сообщите мне об этом, чтобы узнать больше anes.