Понимание шестнадцатеричных цветовых кодов

1. Шестнадцатеричные коды представляют красный, зеленый и синий
2. Шестнадцатеричные коды Использование шестнадцатеричной системы для минимизации длины
3. Шестнадцатеричные коды могут быть сокращены
4. Придумайте свои собственные шестнадцатеричные коды
5. Рекомендуемое обучение - домик на дереве

В CSS есть два основных способа выбора цвета. Во-первых, просто используйте название цвета, например так:

цвет фона: синий;

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

Вот почему CSS использует шестнадцатеричные коды , например:

цвет фона: #DDEEFF;

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

Шестнадцатеричные коды представляют красный, зеленый и синий

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

Шесть цифр шестнадцатеричного кода на самом деле представляют собой три двузначных числа, каждое из которых представляет уровень красного, зеленого и синего. Таким образом, # 000100 имеет нулевой красный цвет, самый темный из возможных оттенков зеленого цвета, но при этом не является абсолютно черным, а нулевой синий # 010101, поскольку все три значения равны, это самый темный из возможных оттенков серого, а # 020202 - второй самый темный. И конечно же # 000000 черный. Но как насчет #FFFFFF для белого - что означают буквы?

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

Существует 256 возможных оттенков красного, зеленого и синего (от 0 до 255). Если бы мы хотели получить белый цвет (самые яркие уровни всех трех цветов вместе), нам нужно было бы написать # 255255255. Это девять цифр в длину.

Шестнадцатеричные коды используют шестнадцатеричную систему счисления, чтобы сделать возможным представление 256 чисел только двумя цифрами. Вместо того, чтобы считать от 0 до 10, как наша обычная десятичная система счисления, он считает 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F и затем 10, затем 11, 12, 13, 14, 15, 16, 17, 18, 19, 1А, 1В, 1С, 1D, 1Е, 1F, а затем 20. Имеет смысл?

Это означает, что 256 чисел могут быть представлены только двумя цифрами вместо 100, которые возможны в нашей десятичной системе счисления (от 0 до 99). Таким образом, максимально возможное двузначное число - это не 99, а FF (равно 255). Вот почему белый цвет #FFFFFF, чистый красный цвет # FF0000, чистый зеленый цвет # 00FF00 и чистый синий цвет # 0000FF.

Узнайте больше о шестнадцатеричном и его связи с двоичным ...

Шестнадцатеричные коды могут быть сокращены

Возможно, вы видели шестнадцатеричные коды, такие как #FFF, # 000, # 0F0 или даже #ABC, которые используют только три цифры. Это всего лишь сокращение от написания кода, который состоит из трех пар идентичных цифр: #FFFFFF, # 000000, # 00FF00 или #AABBCC.

Придумайте свои собственные шестнадцатеричные коды

Итак, теперь вы знаете, как генерируется шестнадцатеричный код, становится возможным писать свой собственный, не нуждаясь в палитре цветов. Конечно, палитра цветов по-прежнему является более простым вариантом для более непонятных цветов, но для простых комбинаций, таких как пурпурный (синий + красный, # F0F), голубой (синий + зеленый, # 0FF) или любой оттенок серого (примеры # 222 , # 555 или #CCC), зная, как работают шестнадцатеричные коды, вы сэкономите много времени.

Рекомендуемое обучение - домик на дереве

Хотя этот сайт рекомендует различные учебные услуги, наша главная рекомендация Дом на дереве ,

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

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

Прочитайте наш полный обзор Treehouse ...

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

Похожие

Комментарии