Rgb прозрачный цвет: Как задать блоку цвет с прозрачностью? — Хабр Q&A – Цвета в CSS. Прозрачный цвет

Коды цветов в html и css | History-of-Blog.ru

Коды цветов в html и css – все что нужно знать

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

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

Как задать нужный цвет для элементов сайта?

Чтобы задать нужный цвет достаточно прописать: “Я хочу чтобы фон сайта был серым, текст черным, а ссылки синими” – вот и все! Но для того, чтобы Ваше желание смог понять любой браузер и оценил посетитель – придется обратиться к кодам цветов.

Существует три варианта, как задать нужный цвет:

1. Через #. Код цвета в html или css можно задать шестью символами написанными после #. Например #ffffff – белый цвет. Так же для этого способа можно выделить один момент: число символов можно сократить до трех, если они попарно повторяются (1 и 2, 3 и 4, 5 и 6 – одинаковые). То есть белый цвет можно прописать так: #fff, а красный (#ff0000) так #f00.
2. Словами. Для наиболее распространенных цветов можно использовать слова (англ.). Белый цвет будет white, а черный black и так далее. Лично я очень редко пользуюсь таким способом, и чаще всего прибегаю к первому.
3. Через rgb.

RGB коды цветов – в чем их преимущество?

RGB – это аббревиатура, которая расшифровывается как красный зеленый синий (red green blue). Почему именно эти цвета? Все очень просто – меняя количественное содержание любого из них можно получить абсолютно любой цвет – это нужно понимать, но особо не вдаваться в подробности.

Количество одного цвета может колебаться от 0 до 255 условных единиц:

• Если мы совсем не дадим цвета: по 0 единиц красного, зеленого и синего, то получиться черный цвет.
• Если мы дадим все цвета по максимуму: 255 единиц красного, зеленого и синего, то получится белый цвет.
• Все остальные цвета находятся между ними.

Прописывается код цвета так: rgb (255, 255, 255).

• Первое преимущество rgb перед другими способами задания цвета очевидно – этим способом можно задать любой нужный оттенок, ведь используется аж 9 переменных, а не 6 или 1 как в первом и втором соответственно.
• Второе преимущество не столь очевидно, и чтобы его применить – его нужно знать. В код цвета можно дописать прозрачность.

Прозрачный цвет – как сделать?

В некоторых случаях цвет с определенным показателем прозрачности смотрится просто великолепно. Прозрачность может колебаться: от 0 – полностью прозрачный, до 1 – абсолютно не прозрачный. Смысла прописывать такие значения нет, а вот промежуточные положения прозрачности могут пригодится, например:

Со способами прописывания цвета определились, теперь для большей ясности приведем некоторые примеры кодов цветов в html и css.

Таблица кодов цветов.

Наиболее удобным способом записи цвета для меня является первый (#), поэтому приведу примеры для него.  Основные цвета:

• Код белого цвета: #fff;
• Код черного цвета: #000;
• Код красного цвета: #f00;
• Код зеленого цвета: #0f0;
• Код синего цвета: #00f;

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

Посмотрите это видео, и у Вас никогда не будет проблем с подбором нужного кода цвета, кроме того, Вы сразу будете видеть результат на своем сайте:

Как узнать код цвета?

В некоторых случаях может потребоваться узнать код цвета. Вариантов здесь может быть 2:

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

Открываем картинку и кликаем сюда:

Этой информации будет достаточно чтобы знать что такое код цвета в html и css:

• Как записать, подобрать или узнать код цвета? – уже не такие страшные вопросы, правда?

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

Комментировать через ВКонтакте:

Опасайтесь прозрачных пикселей / Habr

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

Даже если значение альфа-канала равно 0, с пикселем всё равно связано значение цвета. Этот цвет ни на что не влияет, так ведь? В конце концов, пиксель полностью прозрачен, кому есть дело до его цвета…

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

Пора привести пример из реальной жизни! Вот XMB моей PS3 (главное меню), с демо-версиями нескольких игр.

Сначала выбрана Limbo, потом я просто нажимаю «вверх», чтобы переместиться к The Unfinished Sawn
(кстати, обе игры отличные).

Начало.

Нажимаю «вниз». Limbo спускается вниз.

Фон становится белым.

Артефакты.

Видите, что произошло с областью логотипа Limbo?

Фон сменился на белый фон The Unfinished Swan

и в результате «абсолютно белый» логотип Limbo отрисован поверх фона, который тоже полностью белый. Эта область должна быть полностью белой, тогда откуда взялись эти странные серые пиксели?

Вероятнее всего, искажение возникло из-за того, что текстура Limbo использует для полностью прозрачных пикселей неправильные цвета RGB.

Артефакты на самом деле возникают из-за того, как видеопроцессор фильтрует текстуру при рендеринге спрайта на экране. Давайте рассмотрим его работу на простом примере.

Вот небольшая пиксельная текстура с красным крестом размером 12×12:

А вот его увеличенное изображение, шахматная клетка просто показывает, что это полностью прозрачная область со значением альфа-канала 0.

Можно использовать этот спрайт как значок для отображения в UI здоровья или как текстуру для игровой модели аптечки. (Хотя нет! На самом деле этого делать не стоит!)

Давайте создадим три версии этого спрайта, просто изменив значение цвета пикселей с нулевой альфа-прозрачностью.

Прозрачная область: зелёная. Как выглядит изображение:

Прозрачная область: синяя. Как выглядит изображение:

Прозрачная область: красная. Как выглядит изображение:

(Вы можете скачать файлы и проверить значения RGB прозрачных пикселей)

Эти три спрайта выглядят на экране совершенно одинаково, правда? Это логично: мы всего лишь изменили значение цвета прозрачных пикселей, которые всё равно будут невидимыми.

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

Мы видим тут искажения! Коричневый оттенок у первого спрайта и фиолетовый у второго. У третьего всё правильно, именно так он должен выглядеть.

Давайте рассмотрим синюю версию:

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

Рассмотрим случай, когда положение спрайта не совпадает ровно на половину пикселя:

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

$$display$$0,5\ast\begin{bmatrix} \color{#ff2c2c}1\\ \color{#00c300}0\\ \color{#2f9fff}0\\ 1\\ \end{bmatrix}+0,5\ast\begin{bmatrix} \color{#ff2c2c}0\\ \color{#00c300}0\\ \color{#2f9fff}1\\ 0\\ \end{bmatrix}=\begin{bmatrix} \color{#ff2c2c}{0,5}\\ \color{#00c300}0\\ \color{#2f9fff}{0,5}\\ 0,5\\ \end{bmatrix}$$display$$

А это частично прозрачный фиолетовый, примерно такой: █

Этот цвет, возвращённый сэмплером текстур, теперь будет примешан к альфа-каналу результата рендеринга (сплошному белому цвету).

Уравнение смешивания имеет вид:

$$display$$=0,5\ast\begin{bmatrix} \color{#ff2c2c}{0,5}\\ \color{#00c300}0\\ \color{#2f9fff}{0,5}\\ \end{bmatrix}+(1 — 0,5)\ast\begin{bmatrix} \color{#ff2c2c}1\\ \color{#00c300}1\\ \color{#2f9fff}1\\ \end{bmatrix}=\begin{bmatrix} \color{#ff2c2c}{0,75}\\ \color{#00c300}{0,5}\\ \color{#2f9fff}{0,75}\\ \end{bmatrix} $$display$$

Поэтому конечный цвет пикселя на экране будет примерно таким: █

Это нас не устраивает. Правильный результат (который мы получили, когда прозрачные пиксели были красными) будет таким:

$$display$$\begin{bmatrix} \color{#ff2c2c}{1}\\ \color{#00c300}0\\ \color{#2f9fff}{0}\\ 0,5\\ \end{bmatrix}$$display$$

— это билинейно интерполированное значение, которое затем смешивается и получается

$$display$$\begin{bmatrix} \color{#ff2c2c}{1}\\ \color{#00c300}{0,5}\\ \color{#2f9fff}{0,5}\\ \end{bmatrix}$$display$$

Пиксель на экране выглядит так: █

Как же нам избежать этих неприятных артефактов?

Если вы художник: пусть всё просочится!

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

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

Можно бороться с таким просачиванием цветов… дополнительным просачиванием!

Исходный спрайт

Только RGB

Под этим я подразумеваю то, что перед экспортом графики на диск нужно сначала сделать так, чтобы все непрозрачные пиксели «просочились» в значения RGB соседних прозрачных пикселей (это также называется заливкой (flood-filling) или контурной заливкой (edge-padding)). В этом случае когда прозрачные пиксели в процессе выполнения игры просочатся к своим непрозрачным соседям, то они хотя бы протекут с правильным цветом.

На изображениях выше показан пример из реального мира: атлас спрайтов растительности, извлечённый из GTA V, с альфа-каналом и без него.

Заметьте границу вокруг пикселей с ненулевой прозрачностью: прозрачные пиксели заимствуют цвета своих ближайших видимых соседей. Rockstar не случайно проделала всю эту работу.

В этом процессе нам могут помочь инструменты: у Photoshop есть плагин Solidify,
для Gimp тоже существует плагин…

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

Если вы программист: используйте Premultiplied Alpha!

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

Можно использовать инструмент для автоматизации просачивания цвета, о котором мы говорили ранее. Его следует использовать при импорте ресурсов. Но у нас есть гораздо лучшее и более надёжное решение: premultiplied alpha.

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

Также крайне рекомендую посты Тома Форсайта (Tom Forsyth): 1 и 2 на эту тему.

Идея очень проста: вместо хранения текстуры как

$$display$$\begin{bmatrix} \color{#ff2c2c}{R}\\ \color{#00c300}G\\ \color{#2f9fff}{B}\\ \alpha\\ \end{bmatrix}$$display$$

нужно хранить её как

$$display$$\begin{bmatrix} \alpha\ast \color{#ff2c2c}{R}\\ \alpha\ast \color{#00c300}{G}\\ \alpha\ast \color{#2f9fff}{B}\\ \alpha\\ \end{bmatrix}$$display$$

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

Так можно превратить спрайт:

Оригинал

Premultiplied Alpha

Также необходимо изменить уравнение смешивания, потому что наша текстура теперь содержит результат первого умножения, и её не нужно снова умножать на значение альфа-прозрачности:

В OpenGL это выражается во внесении следующих изменений в функцию смешивания:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) ⇒ glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)

Вернёмся к нашему спрайту с красным крестом, смещённому на полпикселя. В случае режима Premultiplied Alpha билинейный интерполятор будет искать среднее между

$$display$$\begin{bmatrix} \color{#ff2c2c}{1}\\ \color{#00c300}0\\ \color{#2f9fff}{0}\\ 1\\ \end{bmatrix} и \begin{bmatrix} \color{#ff2c2c}{0}\\ \color{#00c300}0\\ \color{#2f9fff}{0}\\ 0\\ \end{bmatrix},\; вернув \begin{bmatrix} \color{#ff2c2c}{0,5}\\ \color{#00c300}0\\ \color{#2f9fff}{0}\\ 0,5\\ \end{bmatrix}=\color{#7f0000}█ \; при \; смешивании, \; а \; затем \; \begin{bmatrix} \color{#ff2c2c}{1}\\ \color{#00c300}0,5\\ \color{#2f9fff}{0,5}\\ \end{bmatrix}=\color{#ff7f7f}█$$display$$

Это правильно и довольно неплохо решает все наши проблемы! Конечный результат получился в точности таким же, какой мы ожидаем при «традиционном смешивании», за исключением того, что мы избавились от всех артефактов. Вы заметите, что при работе с premultiplied alpha полностью прозрачный пиксель всегда имеет значение RGB чёрного цвета, поэтому нам не нужно волноваться о том, что же содержится на самом деле в прозрачных областях спрайта. Premultiplied alpha также позволяет избежать головной боли при генерировании цепочек MIP-текстур и наслоении нескольких просвечивающих спрайтов одного над другим.
Итак, вернёмся к первоначальной теме: была ли проблема с логотипом Limbo действительно вызвана «мусором» в RGB прозрачных пикселей?

Есть только один способ узнать это, поэтому я извлёк файл PNG из пакета демо /PS3_GAME/ICON0.PNG.

На первый взгляд, изображение выглядит отлично, но давайте удалим альфа-канал, чтобы визуализировать полные значения RGB:

Оригинал

Только RGB

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

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

Если вы художник, то вы — первая линия защиты, уделяйте внимание цветам, которые находятся внутри прозрачных пикселей. Если вы программист, то задумайтесь об использовании premultiplied alpha.

RGBA — инструмент для преобразования цветов в шестнадцатеричные цвета

наRGBA цвет в Hex Color инструмент для онлайн-конвертации:

Этот интерактивный инструмент преобразования цвета RGBA в шестнадцатеричный цвет помогает преобразовать цвет RGBA (включая прозрачность и непрозрачность) в шестнадцатеричный цвет и проверить выбранный цвет в режиме реального времени.

Цветовая система RGBA:

В системе цветов RGBA «R» обозначает красный канал («Red»), «G» обозначает зеленый канал («Green»), «B» обозначает синий канал («Blue»), а «A» обозначает прозрачность (непрозрачность). Например, rgba(16,110,190,0.7) .

Система шестнадцатеричного цвета:

Цветовая система HTML может быть представлена шестнадцатеричным числом от #000000 (чисто черный) до #FFFFFF (чисто белый). Например, #123456 красный канал имеет значение «12» (между «00» и «FF») Зеленый канал — «34», а синий — «56». Система Hex color также поддерживает упрощенное отображение, такое как #e1a и #ee11aa .

Как преобразовать цвет RGBA в цвет Hex?

1. Шаг 1: Получить значение красного канала, значение зеленого канала, десятичное значение голубого канала и значение прозрачности цвета RGBA соответственно

2. Шаг 2: Преобразуйте значение цветового канала из десятичного в шестнадцатеричное.

3. Шаг 3: Объедините три значения цветовых каналов в соответствии с синтаксисом системы Hex color.

Пример 1. RGBA-цвет «rgba (16,110,190,0.66)» преобразуется в шестнадцатеричный цвет (в результате получается «# 106ebe» со значением прозрачности 66%):

Step 1:	RGBA Color «rgba(16,110,190,0.66)»: Red(16), Green(110), Blue(190), Opacity(0.66)
Step 2:	Red: (16)->(0x10), Green: (110)->(0x6e), Blue: (190)->(0xbe), Opacity: (0.66)->(66%)
Step 3:	RGB Color «rgba(16,110,190,0.66)» -> «#106ebe» with opacity 66%

ссылка:

Википедия (веб-система цветов): https://en.wikipedia.org/wiki/Web_colors

Википедия (RGBA Color System): https://en.wikipedia.org/wiki/RGBA_color_space

Преобразование цвета RGBA в Hex в Python:

import re


def rgb_to_hex(rgb_color):
    rgb_color = re.search('\(.*\)', rgb_color).group(0).replace(' ', '').lstrip('(').rstrip(')')
    [r, g, b] = [int(x) for x in rgb_color.split(',')]
    # check if in range 0~255
    assert 0 

Нужен код прозрачного цвета (HTML- код)

#block { background-color:transparent }

Ну вы даёте… В CSS есть 2 тега: 1. 2. прозрачный — &lt;— пример — А тег background — это установка заднего фона в CSS: если background:transparent url (<a rel=»nofollow» href=»http://….)» target=»_blank»>http://….)</a> — это картинка если background-color:… -будет цвет

#00000000 Обычный html код цвета состоит из 6 символов, а прозрачный из 8 символов состоящих из нулей.

rgba(255, 255, 255, 0.03)