Java, UX, HTML, CSS, WEB-design

Шестнадцатеричный цвет — кодовая сторона цвета

Краткое описание по статье Шестнадцатеричный цвет — кодовая сторона цвета

Название: Шестнадцатеричный цвет — кодовая сторона цвета . Краткое описание: [ad_1] ⭐ Бен Гре . Дата публикации: 16.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Бен Гремиллион

  • 0 Комментарии

Шестнадцатеричный цвет — кодовая сторона цвета

  • 7 минут чтения

  • Кодирование, Цвета, Теория цвета, Основы

Краткое резюме ↬

Проблема с названием цвета заключается в том, что два разных человека никогда не воспринимают его как один и тот же цвет, особенно если они заинтересованы в эмоциональном воздействии веб-сайта. Назовите цвет, и вы, скорее всего, произведете обманчивое впечатление. Даже что-то вроде «синего» неясно. Точнее, это может быть «небесно-голубой», «голубой океан», «синий джинсы» или даже «синий электродуговой сварки».

Проблема с названием цвета заключается в том, что два разных человека никогда не воспринимают его как один и тот же цвет, особенно если они заинтересованы в эмоциональном воздействии веб-сайта. Назовите цвет, и вы, скорее всего, произведете обманчивое впечатление. Даже что-то вроде «синего» неясно. Точнее, это может быть «небесно-голубой», «голубой океан», «синий джинсы» или даже «синий электродуговой сварки».

Шестнадцатеричный цвет

Описания варьируются в зависимости от личного вкуса и в контексте с другими цветами. Мы называем их «индиго», «нефрит», «оливковый», «мандариновый», «алый» или «кабаре». Что такое «электрическая известь»? Названия и точные оттенки различаются — если только вы не компьютер.

Дальнейшее чтение на SmashingMag:

  • Теория цвета для дизайнеров: значение цвета
  • Простое руководство веб-разработчика по цвету
  • Понимание цветовых концепций и терминологии
  • Создание собственных цветовых палитр

Еще после прыжка! Продолжить чтение ниже ↓

Код требует точности

Когда компьютеры называют цвет, они используют так называемую шестнадцатеричный код то, что большинство людей замалчивает: 24-битные цвета. То есть 16 777 216 уникальных комбинаций ровно шести символов, состоящих из десяти цифр и шести букв, которым предшествует решетка. Как и в любом компьютерном языке, здесь действует логическая система. Дизайнеры, которые понимают, как работают шестнадцатеричные цвета, могут обращаться с ними как с инструментами, а не как с тайнами.

Разбивка шестнадцатеричных чисел на управляемые байты

Пиксели на экранах с подсветкой темные до тех пор, пока не загорятся комбинацией красного, зеленого и синего цветов. Шестнадцатеричные числа представляют эти комбинации кратким кодом. Этот код легко взломать. Чтобы понять #970515нам нужно посмотреть на его структуру:

Первый персонаж # объявляет, что это «шестнадцатеричное число». Остальные шесть на самом деле представляют собой три набора пар: 0–9 и a–f. Каждая пара управляет одним основным аддитивным цветом.

шестнадцатеричное чтение цвета
Чем выше число, тем ярче каждый основной цвет. В приведенном выше примере 97 подавляет красный цвет, 05 — зеленый цвет и 15 — синий цвет.

Каждая пара может содержать только два символа, но #999999 только средний серый. Для достижения цветов ярче, чем 99 только с двумя символами, каждое из шестнадцатеричных чисел использует буквы для представления 10–16. A, B, C, D, Eи F после 0–9 делает даже 16в отличие от валетов, дам, королей и тузов в картах.

Диаграмма, показывающая, как шестнадцатеричные цвета проходят выше 0-9

Будучи математическими, удобными для компьютера кодами, шестнадцатеричные числа — это строки, полные шаблонов. Например, потому что 00 отсутствие первичного и ff является первичным в полную силу, #000000 черный (без основных цветов) и #ffffff белый (все основные цвета). Мы можем опираться на них, чтобы найти аддитивные и субтрактивные цвета. Начиная с черного, замените каждую пару на ff:

  • #000000 черный, отправная точка.
  • #**ff**0000 обозначает самый яркий красный цвет.
  • #00**ff**00 обозначает самый яркий зеленый цвет.
  • #0000**ff** обозначает самый яркий синий.

Субтрактивные цвета начинаются с белого, т.е. с помощью #ffffff. Чтобы найти вычитающие основные цвета, замените каждую пару на 00:

  • #ffffff белый, отправная точка.
  • #**00**ffff обозначает самый яркий голубой.
  • #ff**00**ff обозначает самый яркий пурпурный.
  • #ffff**00** обозначает самый яркий желтый.

Смешивание аддитивных цветов для получения субтрактивных

Ярлыки в шестнадцатеричном формате

Шестнадцатеричные числа, в которых используется только три символа, например #fae, подразумевают, что каждый разряд единиц должен соответствовать разряду шестнадцати. Таким образом #fae расширяется до #ffaaee и #09b действительно означает #0099bb. Эти сокращенные коды обеспечивают краткость кода.

В большинстве случаев можно прочитать шестнадцатеричное число, игнорируя все остальные символы, потому что разница между разрядами шестнадцати говорит нам больше, чем разряд единиц. То есть трудно увидеть разницу между 41 и 42; легче оценить разницу между 41 и 51.

Диаграмма, подчеркивающая первый символ в каждой паре символов

В приведенном выше примере достаточно различий между шестнадцатыми разрядами, чтобы можно было легко угадать цвет — много красного, немного синего, зеленого нет. Это дало бы нам теплый фиолетовый цвет. Десятки во втором примере (9, 9 и 8) очень похожи. Чтобы судить об этом цвете, нам нужно изучить те (7, 0 и 5). Чем ближе расположены шестнадцать разрядов шестнадцатеричного цвета, тем более нейтральным (то есть менее насыщенным) он будет.

Заставьте шестнадцатеричные числа работать на вас

Понимание шестнадцатеричных цветов позволяет дизайнерам делать больше, чем впечатлять коллег и клиентов, говоря: «А, хороший оттенок бордового». Шестнадцатеричные цвета позволяют дизайнерам на лету настраивать цвета для улучшения разборчивости, идентифицировать элементы по цвету в таблицах стилей и разрабатывать цветовые схемы способами, недоступными для большинства графических редакторов.

Сохраняйте оттенки в характере

Чтобы осветлить или затемнить цвет, часто приходится регулировать его яркость. Это делает цветовую гамму от темной до яркой., но теряет свой характер на любом конце шкалы. Например, зеленый цвет ниже среднего становится явно черным при уменьшении яркости до 20%. Поднятый до 100%, когда-то нейтральный зеленый цвет приобретает яркость.

Забавная вещь происходит, когда мы обращаемся с шестнадцатеричными цветами так, как если бы они были десятичными. Добавляя единицу к каждому левому символу каждой пары, мы поднимать яркость цвета в то время как снижение его насыщенность. Это предотвращает слишком близкое блуждание оттенков заданного цвета к абсолютно черному или яркому неону. Изменение шестнадцатеричных пар сохраняет сущность цвета.

Диаграмма, показывающая, как шестнадцатеричный код влияет на яркость и насыщенность

В приведенном выше примере верхний набор оттенков становится желтым или опускается до черного, хотя технически это тот же зеленый оттенок. Изменяя свои шестнадцатеричные пары, второй набор, кажется, сохраняет более естественные оттенки.

Блеклые подчеркивания

По умолчанию браузеры подчеркивают текст для обозначения ссылок. Но толстые подчеркивания мешают выносным элементам букв. Дизайнеры могут сделать подчеркивание менее навязчивым, уменьшив шестнадцатеричные цвета. Идея состоит в том, чтобы сделать теги ближе к цвету фона, а сам текст становится контрастнее по отношению к фону.

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, каждой встроенной ссылке нужен span> внутри каждого :

a { text-decoration:underline;color:#aaaaff; }

a span { text-decoration:none;color:#0000ff; }

Пример подчеркивания, которое бледнеет по сравнению с кликабельным текстом

Как вы можете видеть здесь, подчеркивание того же цвета, что и текст, может мешать частям текста, которые опускаются ниже базовой линии. Изменение подчеркивания, чтобы оно больше напоминало фон, облегчает чтение выносных элементов, даже несмотря на то, что большинство браузеров размещают подчеркивание над буквенными формами.

Добавление промежутков к каждому тегу привязки может быть проблематичным. Популярной альтернативой является удаление подчеркивания и добавление границы снизу:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Улучшенная копия тела

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

Пример текста, который технически правильный, но выглядит слишком ярким

h1, p { color: #797979; }

Пример текста, технически более темного, но визуально такого же

h1 { color: #797979; }

p { color: #393939; }

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

Как разогреть или охладить фон

На нейтральном фоне может быть легко читать, но «нейтральный» не обязательно означает «мягкий». Настройка первого и последнего байта может сделать фон слегка теплее или холоднее.

Примеры с небольшими вариациями цвета фона

  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — кулер

Это слишком? Для более тонкого сдвига используйте вместо этого места с единицами:

Примеры очень незначительных изменений в цвете фона

  • #404040 — нейтральный
  • #4f4040 — теплее
  • #40404f — кулер

Координация цветов с помощью Copy-Paste

Распознавание структуры пар цифр и букв в шестнадцатеричных числах дает дизайнерам уникальный инструмент для изучения цветовых комбинаций. В отличие от цветовых кругов и диаграмм, перестановка пар в шестнадцатеричном числе — это простой процесс изменения оттенков при сохранении одинаковых значений. В качестве бонуса результаты могут быть непредсказуемыми. Самый простой способ — переместить одну пару символов в другое место, где основные цвета меняются местами.

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

Примеры того, как замена основных цветов может дать согласованные, но интересные результаты

Идти вперед

Не позволяйте коду запугать вас. Проявив немного творчества, шестнадцатеричные цвета станут инструментом в вашем распоряжении. По крайней мере, в следующий раз, когда кто-то спросит, можете ли вы решить проблему с кодом на любом языке, вы можете просто сказать:

«Не должно быть сложнее, чем анализировать шестнадцатеричные триплеты в моей голове».

Шестнадцатеричные инструменты цвета

Вам могут быть интересны следующие инструменты и приложения:

  • Поставка цвета
  • Цвета бренда
  • Цветной гекса
  • Палеттон
  • Охладители
Сокрушительная редакция
(иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Шестнадцатеричный цвет — кодовая сторона цвета

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»