Найти тему
Дзен.Framework

1.3 Поговорим о цветах?

Изображение из открытых источников
Изображение из открытых источников

Не! Не об этих, хотя конечно можно было бы.. 😆

Поговорим о тех цветах, которые цветА.

Сколько цветов вы знаете? Есть радуга - Каждый-Охотник-Желает-Знать-Где-Сидит-Фазан.

Изображение из открытых источников
Изображение из открытых источников

Ну и наши мнонохромные соратники черный с белым конечно.

Хотя.. Женщины со своими "цикломеновый", "терракотовый" и тому подобными могут наверное и поспорить. 😆

Одним из наиболее распространенным способом представления цвета является так называемая палитра RGB. Абревиатура по первым буквам Red Green Blue (Красный Зеленый Синий). Каждый из составляющих цветов в палитре может принимать значение от 0 до 255. Не сложно посчитать, что в итоге можно отобразить 255^3=16581375 цветов и оттенков.

Однако, из всего множества рекомендуется выбирать только определенные цвета - те, что принадлежат так называемой Web-безопасной палитре. Стандартные тона будут корректно отображаться в браузере. Web-безопасная цветовая гамма состоит "всего" из 216 вариантов, которые поддерживаются как операционной системой Mac, так и Windows. Из-за того, что этот набор является общим для обеих операционных систем, его использование в своей графике, позволяет не волноваться за качество отображения картинки. Например, при создании работы, содержащей только четыре цвета, стоит их брать из Web-безопасной палитры.

Для основных цветов в web-разработке существуют человекопонятные альтернативные названия, которые можно указывать в качестве цвета: red, green, blue, black и так далее. Список можно посмотреть по этой ссылке.

Теперь попробуем разобраться в том, как указывать нужный нам цвет.

Как я сказал выше, существует два варианта указания цвета: человекопонятный и в формате RGB (тут есть два варианта указания). И если человекопонятные названия очевидны для понимания, то откуда беруться числа и буквы, указанные в безпасной палитре?

Чтобы не зарываться в дебри вычислений и пояснений, не стану раписывать что такое системы счисления. Интересующиеся всегда могут найти самостоятельно (ну или перейти по ссылке).

Так вот, цвет в таблице по ссылке выше указан именно в 16-ти ричной системе. Перед значением необходимо указывать #.

Кроме того, цвет в web-разработке может быть указан в явном формате rgb, где первые три значения отвечают каждый за свой цвет в привычной нам 10-ти чной системе.

Сводя воедино, можно предложить на выбор один из трех вариантов, которые приведут к идентичному результату:

  • Указание цвета в 16-ти ричном формате:
    <p style="color: #9933FF">Фиолетовые слова</p>
  • Указание человекопонятным названием:
    <p style="color: darkorchid">Фиолетовые слова</p>
  • Указание в явном rgb формате:
    <p style="color: rgb(153 50 204)">Фиолетовые слова</p>

А если другие цвета нужны? Есть простой вариант найти нужный цвет. Итак, открываем консоль, которую мы чуть ранее рассматривали, и повторно воспроизводим действия, описанные в той статье.

Тогда мы писали руками цвет "red". Но, если обратили внимание, рядом с цветом был квадратик.

Если кликнуть на него мышкой, то откроется вот такое окно
Если кликнуть на него мышкой, то откроется вот такое окно

И здесь можно выбрать нужный цвет. К слову, изменение цвета в этом окне, приводит к моментальному изменению цвета на экране. В нашем примере будет меняться цвет текста "Везде как дома с Chrome".

Ниже также будет происходить изменение значения цвета - на скриншоте это "#202125".

Все, что останется сделать - скопировать значение и вставить его в свой код.

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

Все статьи попадают в "Оглавление канала". Не пропускаем новости!

-4