Что значит прозрачный цвет
Шестнадцатеричная прозрачность в цветах [дубликат]
этот вопрос уже есть ответ здесь:
Я работаю над реализацией опции прозрачности виджета для моего виджета приложения, хотя у меня возникли проблемы с получением шестнадцатеричных значений цвета. Будучи совершенно новым для прозрачности цвета hex, я искал вокруг немного, хотя я не мог найти конкретного ответа на свой вопрос.
Я хочу задать прозрачность, шестигранный цвет так скажем моего наговора цвет ID «#33b5e5» и я хочу, чтобы это было 50% прозрачный. Тогда я буду использовать «#8033b5e5», потому что 80-это 50%.
теперь проблемы начинают появляться, когда я получаю выше 100 в hex. Сглаз цветовые коды могут быть только 8 символов справа? Например #11233b5e5 (80%) аварийно завершает работу.
что я могу сделать, чтобы использовать более высокие числа?
10 ответов
вот правильная таблица процентов к шестнадцатеричным значениям. Е. Г. для 50% белых вам пришлось бы использовать #80FFFFFF.
короткий ответ:
краткое объяснение в псевдокоде
процент до шестнадцатеричных значений
шестнадцатеричные значения в процентах
длинный ответ: Как рассчитать в голове
проблема может быть решена в общем случае умножение крест.
у нас есть процент (от 0 до 100 ) и другое число (от 0 до 255), затем преобразуется в шестнадцатеричное.
таблица в лучшем ответе дает процент шаг за шагом 5%.
Я предпочитаю учить, как найти решение, а не передавать таблицу
дайте человеку рыбу, и вы кормите его в течение дня; научите человека ловить рыбу и ты кормишь его всю жизнь!—7—>
цвет шестнадцатеричное обозначение выглядит следующим образом: #AARRGGBB
вы должны сначала посмотреть, как шестнадцатеричное строительство. Вы можете написать не более FF.
шестнадцатеричные числа являются базовыми-16, поэтому каждая цифра представляет собой значение между 0 и F. максимальное значение для двухбайтового шестнадцатеричного значения (например, прозрачность цвета) равно 0xFF или 255 в десятичном формате. Таким образом, 100% является 0xFF.
Я построил этот небольшой вспомогательный метод для android-приложения, может пригодиться:
Это может быть очень поздний ответ.. Но эта диаграмма убивает его.
все процентные значения сопоставляются с шестнадцатеричными значениями.
попробуйте это в Google search (или нажмите здесь)
он будет генерировать 0x33 как результат.
Я понимаю, что это старый вопрос, но я наткнулся на нее, когда делаем что-то подобное.
использование python для вычисления этого, например (написано на python 3), 50% прозрачности :
Я всегда продолжаю приходить сюда, чтобы проверить значение int / hex alpha. Итак, в конечном итоге создайте простой метод в моем классе Java utils. Этот метод преобразует процент в шестнадцатеричное значение и добавляет к значению строки цветового кода.
Русские Блоги
Расчет прозрачности цвета
В процессе разработки мы часто сталкиваемся с такой вещью: дизайнер дает вам значение цвета, а затем говорит, что значение цвета имеет прозрачность 30%. Большинство людей спросят, что такое 30% прозрачность? Как рассчитать эту 30% прозрачность?
Значение цвета обычно соответствует стандарту RGB / ARGB, а при использовании оно обычно начинается с символа # и выражается в шестнадцатеричном формате.
где RGB обозначает Красный (Red) 、 Зеленый (Зеленый) 、 Blue (синий)
ARGB, в свою очередь, представляет прозрачность (альфа), Красный (Red) 、 Зеленый (Зеленый) 、 Blue (синий)
Мы можем понять это следующим образом: прозрачность и непрозрачность составляют до 1 или 100%
Альфа = 255 * 30%, а затем преобразовать в шестнадцатеричное, чтобы получить значение прозрачности первых 2 цифр нашего цвета
Затем я написал скрипт Paython для вычисления значения прозрачности, чтобы разработчик мог сказать нам, сколько прозрачности в будущем. Мы можем напрямую ввести команду, чтобы получить желаемое значение прозрачности.
Эффект бега заключается в следующем:
Приведенный выше скрипт на python, если вы введете 0, конвертирует прозрачность от 0 до 100%
После прочтения, чувствуете ли вы, что в будущем это будет намного удобнее? Вам не нужно спрашивать дизайнера, сколько должно быть написано 30% прозрачности. Ха-ха.
Цвета в CSS
Свойство color
Итак, свойство color позволяет задать основной цвет элемента. При настройке этого свойства можно использовать различные значения:
Именованные цвета
CSS поддерживает стандартные наименования цветов, которые можно использовать, просто указывая в качестве значения свойства color имя нужного цвета. Вот как это выглядит:
Вот, если интересно, полный список имён цветов. Тут стоит сказать о том, что некоторые имена цветов поддерживаются не во всех браузерах.
Здесь я использую красный цвет ( red ) для того чтобы быстро показать обводку всех элементов страницы. Цвет red популярен в подобных ситуациях, мне даже доводилось видеть мемы об этом.
Шестнадцатеричные цветовые значения
Шестнадцатеричный код цвета состоит из шести символов. Например, значение #ffffff представляет белый цвет. При описании цветов с использованием шестнадцатеричных значений есть одна особенность, позволяющая, в определённых ситуациях, использовать сокращённую запись кода цвета.
Дело в том, что если пара значений в описании одного компонента цвета идентична, одно из таких значений можно убрать. Каждая пара значений представляет собой описание одного из компонентов цвета. Это, соответственно, компоненты Red (красный), Green (зелёный) и Blue (Синий). Рассмотрим следующий пример:
Сокращение шестнадцатеричных кодов цветов
Цвета, задаваемые в формате RGB/RGBA
При использовании цветовой модели RGB (Red, Green, Blue — красный, зелёный, синий) цвета представляют тремя значениями, описывающими цветовые каналы — соответственно — красный, зелёный и синий канал. Каждое из значений можно представить числом, находящимся в диапазоне от 0 до 255, или процентным значением — от 0 до 100%.
Если три значения равны 0, то получится чёрный цвет. А если все три цветовых компонента установлены в значение 255, то получится белый. То же самое справедливо и при использовании процентных значений.
При описании цветов с использованием цветовой модели RGB можно, помимо цветовых компонентов, указывать и значение, соответствующее альфа-каналу, которое позволяет управлять прозрачностью цвета. Это помогает в работе с насыщенностью цветов, что весьма полезно. Ниже мы рассмотрим некоторые варианты использования цветов, при описании которых используется альфа-канал. Для работы с такими цветами применяется функция rgba() :
Если значение, соответствующее альфа-каналу, равно нулю, тогда основной или фоновый цвет элемента окажется полностью прозрачным, то есть — невидимым.
Цвета, задаваемые в формате HSL
Я редко вижу использование цветовой модели HSL (Hue, Saturation, Lightness — тон, насыщенность, светлота), но в последнее время эта цветовая модель стала привлекать к себе всё больше внимания со стороны дизайнеров и разработчиков.
На цветовом круге каждому цвету соответствует определённый угол, описывающий цветовой тон (hue). Для описания HSL-цвета, помимо тона, нужно указать значения, отвечающие за насыщенность и светлоту цвета.
Разберём процесс описания HSL-цветов. Представим, что нас интересует цветовой тон, показанный на следующем рисунке.
Выбор цветового тона
Для выбора насыщенности и светлоты можно воспользоваться удобным инструментом, который находится здесь. А именно, после выбора тона, насыщенность и светлоту цвета можно представить так, как показано ниже.
Выбор насыщенности и светлоты
Шкала насыщенности, в начале, представлена серым цветом, а в конце — цветом, который мы выбрали на цветовом круге. Шкала светлоты начинается с чёрного цвета, доходит до выбранного цветового тона и заканчивается белым цветом.
Эта гибкость может оказаться очень кстати. Например, можно выбрать цветовой тон, а потом подстроить насыщенность и светлоту в соответствии со своими нуждами. Такой подход позволяет создавать динамичные и лёгкие в использовании цветовые палитры.
Ключевое слово currentColor
Интересной особенностью currentColor является тот факт, что это ключевое слово можно использовать и на уровне родительского элемента, и для дочерних элементов.
В этом примере currentColor можно использовать и для элемента
, и для элемента :
Использование инструментов разработчика для исследования цветов
При проведении экспериментов с CSS-цветами можно воспользоваться одной полезной возможностью инструментов разработчика Chrome. Для вызова этой возможности нужно выбрать некий элемент, цвета которого заданы в шестнадцатеричном формате, и переключиться в режим его исследования. Затем нужно щёлкнуть по маленькому квадратику, который представляет цвет, используемый элементом в данный момент.
Этот приём подходит только для шестнадцатеричных цветов и для свойств, при настройке которых используются CSS-переменные:
Тут надо сказать о том, что при использовании HSL-цветов в комбинации с CSS-переменными всё ещё можно столкнуться с неоднородным поведением браузеров. Например, вывод вышеприведённого примера в Firefox не приведёт к показу цветного квадратика. Вот как это выглядит в разных браузерах.
Браузеры по-разному работают с переменными
Синий квадратик, выводимый в Safari, демонстрирует вычисленное значение используемого CSS-свойства. Это лучше, чем ничего.
Возможно, вы сейчас задаётесь вопросом о том, зачем нам вообще нужен этот квадратик, представляющий вычисленный цвет и выводимый около CSS-свойства? Дело в том, что без него мы не сможем открыть средства инструментов разработчика для работы с цветом, которые помогают исследовать доступность используемого цветового решения.
Цветовые значения, разделённые пробелами
Обычно функции rgb() и hsl() вызывают, передавая им значения, разделённые запятыми. Существует и другой способ вызова таких функций, достаточно новый, но пользующийся отличной браузерной поддержкой. При его использовании значения, передаваемые функциям, разделяют пробелами.
Учитывайте то, что отделение сведений о прозрачности с помощью косой черты — это лишь дополнительная возможность. Ей стоит пользоваться только тогда, когда нужно настроить прозрачность цвета.
Хочу отметить, что хотя я и порекомендовал пользоваться в функциях цветовыми значениями, разделёнными пробелами, я не применял их в статье, так как это — достаточно новая возможность CSS. А мне не хотелось бы запутывать читателей.
Глобальные значения (inherit, initial, unset)
▍Ключевое слово inherit
Вот HTML-код верхней части страницы, в которой имеется заголовок, описание и ссылка:
Цвет ссылок, используемый по умолчанию, выглядит так:
▍Ключевое слово unset
На MDN можно узнать о том, что ключевое слово unset позволяет сбросить значение свойства до унаследованного значения в том случае, если свойство естественным образом наследует это значение от родительского элемента. В противном случае значение сбрасывается до его исходного значения.
Вернёмся к предыдущему примеру и сделаем так, чтобы ссылка унаследовала бы цвет от родительского элемента:
Здесь со всем этим можно поэкспериментировать.
Сценарии использования и практические примеры
Пожалуй, теории на сегодня хватит. Поэтому предлагаю рассмотреть практические примеры работы с цветами в CSS.
▍Полупрозрачный RGBA-цвет
Мне часто приходилось видеть, как функция rgba() используется в CSS для создания дизайна, вариант которого представлен на следующем рисунке.
Обратите внимание на то, что у окружностей имеются границы, которые темнее, чем фон этих окружностей. Как сделать это динамически? А сделать это можно, воспользовавшись границей, полупрозрачный цвет которой задан с применением функции rgba() :
Ту же идею можно использовать и при работе с элементами, у которых имеется фон, в случае, когда их дочерние элементы являются их более тёмными вариантами. Взгляните на следующий рисунок.
▍Использование HSL-цветов
Это может пригодиться в паре ситуаций. Например, тогда, когда нужно сделать так, чтобы светлота цвета кнопки становилась бы меньше при наведении на эту кнопку мыши.
Кнопка становится темнее при наведении на неё указателя мыши
Эту идею можно развить, скомбинировав функцию hsl() и CSS-переменные для создания цветовой палитры, которая легко поддаётся изменениям.
Указывая основной тон, мы можем использовать его, задавая цвета, позволяющие делать элементы светлее или темнее.
Особенно мне здесь нравится организация работы с оттенками серого цвета. Мне всегда было тяжело запоминать правильные шестнадцатеричные значения для оттенков серого. При использовании hsl() работа с такими цветами значительно упрощается.
Обратите внимание на то, как я создал цветовую палитру, основываясь лишь на одном цветовом тоне и меняя светлоту итогового цвета.
Цвет и изменение светлоты
Полагаю, никто не станет спорить с тем, что при таком подходе очень просто работать с оттенками серого. Мне это очень нравится, я планирую использовать этот приём в своих будущих проектах.
При работе над большими проектами я использовал бы следующий подход, подразумевающий применение CSS-переменных и задействующий изменение светлоты цвета:
Здесь можно найти рабочий пример.
▍Использование ключевого слова currentColor с SVG-иконками
Хороший сценарий использования ключевого слова currentColor представлен ситуациями, когда нужно управлять цветом SVG-иконок. Представим, что у нас имеется иконка, после которой идёт текст. Значок иконки и текст должны быть окрашены в один и тот же цвет.
Значок и текст должны быть одного цвета
Вот применяемый здесь стиль:
При таком подходе значок будет окрашен в цвет, назначенный родительскому элементу.
Настройка иконки, заключённой в цветной полупрозрачный прямоугольник
Вот соответствующий CSS-код:
Итоги
Сегодня мы обсудили некоторые особенности описания цветов в CSS, рассмотрели практические приёмы работы с цветами. Хочется надеяться, вам пригодится то, о чём вы сегодня узнали.
Какие CSS-механизмы вы обычно используете, настраивая цвета в своих проектах?
Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:
Здравствуйте уважаемые начинающие веб-мастера
Мы уже научились создавать фоновые изображения.
В этой статье поговорим о придании прозрачности изображениям, цвету, и тексту.
Для создания эффекта прозрачности в CSS применяются:
1. Формат RGBA — создаёт прозрачный цвет.
Аббревиатура RGBA включает в себя три цвета
б. G — green (зелёный);
г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.
Записывается следующим образом:
2. Свойство CSS opacity — делает прозрачным любой элемент контента.
Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.
Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.
Как видите, при подборе цвета, в правом нижнем углу, в соответствующих окнах, появляются цифры характеризующие выбранный цвет.
Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.
Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.
И добавим в эту вьюгу, прекрасную представительницу холодного царства.
Как видно из результата, получилась какая то аппликация, а не картина.
Чтобы исправить ситуацию, картинке с представительницей холода, нужно задать прозрачность, чтоб она как бы слегка растворилась и слилась с общим фоном.
Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.
Давайте зададим картинке прозрачность равную 0.1
Как видите, у вьюги проявилось лицо.
В продолжение темы, на этом изображении можно поместить какой либо текст, и так же сделать его прозрачным, а можно оставить и не прозрачным, на Ваше усмотрение.
Вот так можно создавать изображения и снабжать их надписями. Принцип думаю понятен, остальное будет зависеть от Вашего творческого воображения и полёта фантазии.
Давайте создадим блок с фоном, и напишем в нём прозрачный текст.
Вместо фона, можно вставить фоновое изображение и задать ему большую прозрачность, получится водяной знак.
Желаю творческих успехов.
Перемена
— Мама, мама! Вовка меня всю обрызгал!
— А ты его тоже обрызгай.
— Но, мама, как? Я же девочка!
— Официант! Почему в моей котлете волосы?
— Понимаете, у нас повар однорукий, он котлеты
на груди лепит, вот и налипли.
— Представляю, чем он у вас перец
фарширует!
Колористика
Цвет воздействует на физиологические процессы человека и на его психологическое состояние. Зная особенности каждого цвета можно сформировать определенный образ, вызвать определенные эмоции, ассоциации.
Красный
Красный цвет (компенсирующий зеленый) наиболее активный. Это насыщенный, тяжелый, горячий, яркий цвет. Он символизирует страстную любовь, власть, огонь, войну. Светлые оттенки красного действуют возбуждающе, темные придают солидность. Красный цвет соответствует планете Марс.
Стимулирует, снабжает очень сильной, но достаточно грубой энергией. Способствует активности, уверенности, дружелюбию. В больших количествах может провоцировать ярость, гнев.
Физиология: стимулирует нервную систему, высвобождает адреналин, улучшает кровообращение, повышает количество красных телец в крови, увеличивает сексуальность и сексуальное влечение.
Психология: наделяет чувством безопасности, уверенностью в завтрашнем дне, помогает проще справиться с неприятностями. Формирует лидера.
Оранжевый
Оранжевый цвет (компенсирующий синий, голубой) малонасыщенный, теплый, легкий, сексуальный. Действует возбуждающе. Оранжевый цвет стимулирует эмоциональную сферу, создает ощущение благополучия и веселья. Он символизирует наслаждение, праздник, благородство. Оранжевый цвет соответствует Меркурию.
Высвобождает эмоции, поднимает самооценку, учит прощать. Отличный антидепрессант, способствует хорошему настроению. Пастельные оттенки (абрикосовый, персиковый) восстанавливают нервные затраты.
Физиология: находится между красным и желтым цветами спектра, поэтому обладает свойствами этих двух цветов. Наделяет энергией как красный и способствует мыслительному процессу, как желтый цвет.
Психология: очищает от неприятных ощущений, помогает принять негативные события в жизни (например, разрыв отношений или потеря близкого человека), помогает простить другого человека, отпустить неразрешимую ситуацию. Если вы находитесь в тупике и боитесь перемен, которые откроют новые горизонты в жизни, обратитесь к оранжевому цвету.
Желтый
Радостный, стимулирующий цвет. Его ассоциируют с интеллектом и выразительностью. Он увеличивает концентрацию, организует, улучшает память, способствует справедливому и быстрому принятию решений.
Желтый помогает принимать новые идеи и точки зрения других людей. Это цвет оптимизма.
Физиология: хорошо лечит пищеварительную систему, обеспечивает ее работу. В основном воздействует на течение желчи, которая играет роль в поглощении и переваривании жиров. Улучшает память.
Психология: приводит чувства в движение, освобождает от негатива, который подрывает уверенность в своих силах. Помогает легче воспринимать новые идеи и принимать различные точки зрения. Он способствует лучшей самоорганизации и концентрации мысли. Для детей: повышает познавательный интерес. Можно использовать для детских комнат, но в ограниченном количестве, иначе дети не смогут спокойно заснуть.
Зеленый
Жизнь, рост, гармония. Он объединяет нас с природой и помогает быть ближе друг к другу.
Физиология: помогает при негативных состояниях: неуравновешенность, злоба, грубость, скованность в эмоциях и чувствах.
Психология: когда вам недостает зеленого цвета, вы лишаетесь гармонии. Не рекомендуется в случае, если вам надо быстро принимать решения, так как зеленый расслабляет.
Голубой
Голубой цвет (компенсирующий оранжевый) слабонасыщенный, легкий, воздушный, прохладный, спокойный, слегка пассивный. Он символизирует чистоту, разум, постоянство и нежность. Если голубого цвета слишком много, это может вызвать лень, апатию.
Голубой цвет считается цветом креативности, его рекомендуют для учебных аудиторий или кабинетов. Бирюзовый оттенок способствует общению.
Синий
Успокаивающий цвет. Он способствует физическому и ментальному расслаблению, создает атмосферу безопасности и доверия.
Физиология: лечит глухоту, катаракту, кровотечения, бессонницу. Является анестетиком. Помогает при ангинах, ревматизмах. Воздействует на эндокринную систему.
Психология: развивает психические способности. Очищает мышление, освобождает от тревог и страхов, позволяет услышать внутренний голос и принять правильное решение (интуиция). С индиго проще переходить на более тонкие уровни сознания. Не рекомендуется людям склонным к сезонным депрессиям.
Фиолетовый
Фиолетовый цвет (компенсирующий желтый) насыщенный, холодный, тяжелый, спокойный, таинственный. Он символизирует мудрость, зрелость, высший разум. Фиолетовый цвет легко подавляется другими цветами, но сам по себе фиолетовый цвет глубокий и выразительный. Он придает одежде торжественный и роскошный вид. В большом количестве фиолетовый цвет вызывает меланхолию. Соответствует планете Уран.
Связан с артистизмом, великими идеями, интуицией и мистистизмом. Он способствует вдохновению, состраданию, чувствительности.
Физиология: лечит физиологические заболевания: сотрясение мозга, эпилепсия, невралгия, рассеянный склероз. Не рекомендуется людям с тяжелыми психическими заболеваниями и страдающим алкоголизмом.
Психология: помогает при негативных психических состояниях: невроз, потеря веры, отчаяние, потеря самоуважения.
Психологическое воздействие цвета
Говоря о психологическом влиянии цвета важно учитывать тот факт, что в различных обществах существуют разные точки зрения. Даже независимые результаты исследований воздействия цвета порой несут отпечаток принадлежности к определенной культурной группе людей, чье мнение формировалось на протяжении веков.
Каждый цвет имеет свою магическую силу. Ведь не просто так свадебное платье должно быть белым, потому что это символ чистоты. Розы, которые мы дарим любимым должны быть красными. В каждом цвете заложен свой магический символ. Мы предлагаем вам прочитать об основных цветах и что они означают.
Магия цвета
Белый
Голубой
Желтый
Коричневый
Цвет и все его оттенки (цвет земли) Предпочитают те, кто твердо и уверенно стал на ноги. Люди, которые имеют слабость к нему, ценят традиции, семью. Когда же он неприятен, то это говорит о самолюбии и эгоизме, о том, что этот человек скрытен, с трудом идет на откровенность.
Красный
Оранжевый
Розовый
Любимый цвет рассудительных и недоверчивых натур, которые долго думают, прежде чем принять какое-нибудь решение. Это также нейтральный цвет, который предпочитают те, кто боится слишком громко заявить о себе. Если же этот цвет не нравится, то это показатель импульсивного, легкомысленного характера.