Цвет, RGB, HEX

CoderStudio, 25.03.2023 03:01
Цвет, RGB, HEX
Куры вообще-то интересные существа, но правый верхний угол лучше бы украсила курочка | Photo by Elena Mozhvilo на Unsplash

Дайте вам цвет, и вы пишете!

Последнее обновление: 2023-03-25

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

Говоря о цветах, я задумался над вопросом, как объяснить цвета человеку, который родился полностью слепым (не в результате амблиопии или несчастного случая, что означает слепой от рождения). Поразмыслив над этим долгое время, я пришел к выводу, что не могу придумать никакого хорошего способа. Сказать ему, что красный цвет похож на огонь, а желтый - на цвет банана? Он никогда ничего не видел, так что это то же самое, что ничего не сказать. А как насчет того, что красный - страстный, а синий - спокойный? Это даже близко не похоже. Вместо того чтобы объяснять, на что похож цвет, возможно, само понятие "цвет" слишком сложно для слепых людей, посмотрите это видео на Youtube: Describing Colors As A Blind Person - Tommy Edison .

Чем больше вы думаете об этом, тем более странным это становится. Кажется, что все имеет свой цвет от природы, что все цвета смешиваются вместе, чтобы получить черный (или белый, если они разного цвета), и что противоположностью черного является белый, но белый - это не ничто (ничто не прозрачно). Теоретически существует бесконечное число цветов, потому что любые два цвета можно бесконечно отделять друг от друга, как числа (например, 1.1, 1.11, 1.111).

Если цвет настолько волшебен, то как люди управляют им? Если вы используете CSS, вы знаете, что существует такая вещь, как цветовой код, и хотя я не художник, это звучит хорошо, верно? Вот введение в RGB и HEX, которые обычно используются в CSS, или, если вам интересно узнать о цвете, вы можете посмотреть, что Wikipedia может сказать об этом, или даже перейти на английскую версию, которая обычно содержит больше информации.

Об именах цветов

Прежде чем говорить о RGB и HEX, давайте поговорим о названиях цветов. Если вы хотите использовать в настройках CSS такой цветовой стиль, как background-colour, вы можете выбрать несколько способов его написания, например RGB и HEX, или набрать цвет непосредственно на английском языке, например red и blue. Некоторые из них очень странные. Например:

1 - paleturquoise, 2 - mediumaquamarine.
1 - paleturquoise, 2 - mediumaquamarine.

На первый взгляд это выглядит очень страшно, но на самом деле это не так, это pale (светлый) + turquoise (бирюзовый), medium (средний) + aquamarine (аквамарин, аква-зеленый), сразу после изучения CSS вдруг почувствовала, что знаю цветовой словарь очень мало, это тоже своего рода урожай? В любом случае, вам не обязательно задавать цвета в цветовой кодировке, вы также можете выбрать прямой ввод на английском языке, если вам интересно, вы можете взглянуть на All 147 CSS color keywords and corresponding color values , где перечислены цвета, доступные на английском языке для CSS, хотя это простой китайский ресурс, этот парень написал несколько статей, связанных с цветами ( Я подозреваю, что вы ведете, но у меня нет доказательств), это стоит прочитать, у него также есть статья о примечаниях, связанных с цветами при написании веб-страниц, смотрите CSS1-CSS3 <color> Как много вы знаете о цветах? .

RGB

Аббревиатура названия на самом деле довольно проста, она происходит от Red, Green, Blue и записывается в CSS как

.red {
  background-color: rgb(255, 0, 0);
}

Прежде всего, это красный цвет. RGB - это цвет, который вам нужен, и все три параметра находятся в диапазоне от 0 до 255 (включая эти два числа), поэтому таким образом можно записать в общей сложности 256 * 256 * 256 = 16 777 216 цветов. Например, красный цвет выше настроен на верхний уровень, а все остальные цвета равны 0, так что это стандартный красный цвет. Если rgb(0, 0, 0) все цвета отсутствуют, то это черный цвет, а если rgb(255, 255, 255) все точки заполнены, то это белый цвет, поэтому логика подбора цветов RGB - это смешение света, а не цветов (если бы все цвета были сложены вместе, то получился бы темный цвет, близкий к черному). Эти три параметра также можно записать в виде процентов от 0% до 100%, но я не знаком с ними и считаю, что лучше записать их в виде целых чисел.

HEX

HEX - это не аббревиатура из трех символов, HEX - это Hexadecimal, шестнадцатеричная система счисления, и записывается в CSS следующим образом

.red {
  background-color: #ff0000;
}

Логика очень проста: это #RRGGBB, что означает, что перед ним стоит знак тика, затем первые два - для красного, средние два - для зеленого и задние два - для синего. RGB - 10-битный, а HEX - 16-битный, поэтому HEX просто преобразует логику цветового кодирования RGB в шестнадцатеричную. Очевидно, что код проще, поэтому лично я предпочитаю HEX.

Преобразования RGB, HEX

Если вы не знакомы с шестнадцатеричной системой счисления, вы можете взглянуть на Система счисления , чтобы понять преобразование десятичной системы счисления в шестнадцатеричную, что совсем не сложно. В английском языке решение простое и понятное, поэтому в шестнадцатеричной системе, кроме 0-9, позицию можно обозначить еще шестью английскими словами, от a до f, поэтому a - это 10, b - 11, f - 15 и так далее.

Что означает ff в шестнадцатеричной системе? Если вы напишете обе цифры до максимума на 10-м месте, то есть 99, что это значит? Итак, 99 - это 10 * 9 + 9, а если посмотреть на ff, то это означает 16 * 15 + 15 = 255. Если вы хотите думать быстрее, то 99 - это 10 * 10 -1, а ff - это 16 * 16 -1 = 255.

Предыдущая работа заключалась в создании конвертера цветовых кодов RGB в HEX, где пользователь вводил цветовой код RGB (используя тягу) и он преобразовывался в HEX код, и при перетаскивании колеса прокрутки вы видели HEX код цвета и цвета предварительного просмотра, вы можете нажать на Я сделал конвертер цветовых кодов чтобы поиграть с ним, на самом деле Работает, как показано ниже:

Извлечено из описания работы AC (Проснись, ты большой художник блаблабла)
Извлечено из описания работы AC (Проснись, ты большой художник блаблабла)

HSL

Эй, мы еще не закончили говорить об этом, зачем еще что-то? Поскольку мы уже говорили о RGB и HEX, давайте вспомним о HSL.

HSL - это аббревиатура слов Hue, Saturation и Lightness, как следует из названия, это использование этих трех вещей для настройки цвета, но я не знаком с этим, но я нашел статью, которая написана четко, с простыми для понимания диаграммами, пожалуйста, обратитесь к RGB, HSL, Hex веб-код цвета, после прочтения этой статьи, я все понял! Также, вы можете зайти на сайт W3Schools и поиграть с ползунком, чтобы увидеть, как меняется HSL.

О прозрачности

Однажды я поделился идеей на Lighthouse, учебной платформе AC, о том, что слово прозрачность - это немного магическое слово. Возьмем для примера непрозрачность в CSS, если вы просто запомните, что непрозрачность - это прозрачность, вы можете запутаться, поэтому лучше использовать оригинальное слово напрямую. непрозрачность равна 0 ⇒ непрозрачность очень низкая ⇒ прозрачность очень высокая ⇒ он очень прозрачен и поэтому невидим. Конечно, если вам лень разбираться, вы также можете просто использовать метод насильственного запоминания. 0 означает "нет", поэтому он невидим, 1 означает "да", поэтому он виден.

Позднее преподаватель добавил к этому (цитата ниже), что, действительно, opacity переводится как "непрозрачность" в Photoshop. В RGBA также есть альфа-канал, который обычно совпадает с непрозрачностью: 0 - полностью прозрачный, 1 - непрозрачный. Однако в некоторых программах базовый цвет черный, а в некоторых - белый. Например, Safari имеет другой базовый цвет, чем Chrome. Поэтому, как правило, нам приходится напрямую корректировать значение, чтобы увидеть результат, независимо от того, на английском или китайском языке он написан.

Здесь я хотел бы добавить, что, помимо непрозрачности, вы также можете установить прозрачность, написав ее непосредственно при установке цвета, вот простое объяснение того, как установить прозрачность для RGB, HEX и HSL.

1️⃣ RGBA

Правильно, это просто добавление альфа непосредственно после RGB, и концепция этого - непрозрачность, значение находится в диапазоне от 0 до 1, чем больше значение, тем больше непрозрачность, например

.red {
  background-color: rgba(255, 0, 0, 0.3);
}

2️⃣ HEX

HEX - это то же самое, что и HEX, просто добавьте еще две цифры к концу исходного числа, чтобы контролировать непрозрачность, логика такова: #RRRGGBBAA, A - это альфа, то же самое, чем больше число, тем больше непрозрачность, важно отметить, что эта сторона также шестнадцатеричная, как показано ниже:

.red {
  background-color: #ff00006f;
}

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

3️⃣ HSLA

Как следует из названия, это та же логика, что и RGBA, еще один параметр и то между 0 и 1, чем выше значение, тем более непрозрачным он является, но как и HSL, упомянутый выше, так как я не часто его использую, я просто прикрепляю один для справки: [CSS3]hsl и hsla color .

Опять же, все три вышеуказанные настройки основаны на понятии непрозрачности, чем выше значение, тем более непрозрачным он является.

Ресурсы

Поделитесь некоторыми полезными ресурсами

⭐ Adobe Color : список предлагаемых цветовых комбинаций и возможность прямого копирования цветовых кодов HEX.

⭐ ToolsKK Online : очень позитивный пользовательский интерфейс со списком часто используемых цветов, удобной палитрой и такой же возможностью прямого копирования цветовых кодов HEX.

⭐ ifreesite : еще более пружинистый XD и не может копировать цветовые коды HEX напрямую, но под ним есть палитра для выбора цветов и список цветовых кодов RGB, HEX и HSL одновременно.

⭐ ColorZilla: полезный плагин для Chrome, подборщик цветов, как пипетка PPT для выбора цвета, удобен тем, что можно скопировать HEX-код цвета напрямую, так что если я думаю, что цвета на странице достаточно красивы, чтобы использовать их в CSS, просто используйте ColorZilla, чтобы нажать на них. Так что если я думаю, что цвет на веб-странице подходит для CSS, я могу использовать ColorZilla, чтобы нажать на него и вставить HEX-код цвета прямо в CSS.

Наконец, позвольте мне рассказать анекдот, я давно хотел рассказать этот анекдот.

Эта картинка - логотип на стеклянной стене ресторана неподалеку от места, где я живу, под названием "Три основных цвета XXX".

Все, давайте повеселимся (снято в одном из районов Тайбэя, фотограф не поможет?)
Все, давайте повеселимся (снято в одном из районов Тайбэя, фотограф не поможет?)

Хахахахахаха

Так случилось, что вскоре после того, как я изучил CSS и познакомился с RGB, открылся этот ресторан, и однажды вечером я мельком увидел, как включается свет, и задался вопросом, что не так с цветами. Я хотел бы спросить, не было ли это сделано намеренно, но думаю, что слишком многого прошу.