CSS шестнадцатеричный RGBA?

Я знаю, что ты можешь писать …

background-color: #ff0000; 

… если вы хотите что-то красное.

И вы можете написать …

 background-color: rgba(255, 0, 0, 0.5); 

… если вы хотите что-то красное и полупрозрачное.

Есть ли какой-нибудь сложный способ написания частично прозрачных цветов в шестнадцатеричном формате? Я хочу что-то вроде:

 background-color: #ff000088; <--- the 88 is the alpha 

… или …

 background-color: #ff0000 50%; 

Я получаю все мои цвета в шестнадцатеричном формате, и преобразовать их все в десятичную шкалу 0-255 раздражает.

Цветной модуль CSS уровня 4, вероятно, поддерживает четырех- и восьмизначные шестнадцатеричные обозначения RGBA!

Три недели назад (18 декабря 2014 года) проект редактора CSS Color Module Level 4 был представлен рабочей группе CSS W3C. Хотя в состоянии, которое сильно подвержено изменениям, текущая версия документа подразумевает, что в несколько ближайшем будущем CSS будет поддерживать шестнадцатеричную шестнадцатеричную RGBA-нотацию 4 и 8 цифр.

Примечание: в приведенной ниже цитате вырезаны нерелевантные fragmentы, и источник может быть сильно изменен к тому моменту, когда вы читаете это (как упоминалось выше, это проект редактора, а не окончательный документ).
Если что-то сильно изменилось, оставьте комментарий, сообщив мне, чтобы я мог обновить этот ответ!

§ 4.2. Шестнадцатеричные обозначения RGB: #RRGGBB

Синтаксис – это , значение которого состоит из 3, 4, 6 или 8 шестнадцатеричных цифр . Другими словами, шестнадцатеричный цвет записывается как hash-символ, «#», за которым следует некоторое количество цифр 0-9 или буквы af (случай букв не имеет значения – #00ff00 идентичен #00FF00 ).

8 цифр

Первые 6 цифр интерпретируются идентично шестизначной нотации. Последняя пара цифр, интерпретируемая как шестнадцатеричное число, указывает альфа-канал цвета, где 00 представляет полностью прозрачный цвет, а ff представляет собой полностью непрозрачный цвет.

Пример 3.
Другими словами, #0000ffcc представляет тот же цвет, что и rgba(0, 0, 100%, 80%) (слегка прозрачный синий).

4 цифры

Это более короткий вариант восьмизначной нотации, «расширенный» так же, как и трехзначное обозначение. Первая цифра, интерпретируемая как шестнадцатеричное число, указывает красный канал цвета, где 0 представляет минимальное значение, а f представляет максимум. Следующие три цифры представляют собой зеленый, синий и альфа-каналы соответственно.

Что это значит для будущего цвета CSS?

Это означает, что если предположить, что это не полностью удалено из документа уровня 4, мы скоро сможем определить наши цвета RGBA (или цвета HSLA, если вы один из этих ребят) в шестнадцатеричном формате в браузерах, которые поддерживают цвет Синтаксис модуля уровня 4.

пример

 elem { background: rgb(0, 0, 0); /* RGB notation (no alpha). */ background: #000; /* 3-digit hexadecimal notation (no alpha). */ background: #000000; /* 6-digit hexadecimal notation (no alpha). */ background: rgba(0, 0, 0, 1.0); /* RGBA notation. */ /* The new 4 and 8-digit hexadecimal notation. */ background: #0000; /* 4-digit hexadecimal notation. */ background: #00000000; /* 8-digit hexadecimal notation. */ } 

Когда я смогу использовать это в своих продуктах, ориентированных на клиента?

Tumble weed - единственный реальный ответ ...

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

Просмотр текущей поддержки браузера для обозначения цвета #RRGGBBAA

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

 figure { margin: 0; padding: 4px; /* Fall back (...to browsers which don't support alpha transparency). */ background: #FEFE7F; color: #3F3FFE; /* Current 'modern' browser support. */ background: rgba(255, 255, 0, 0.5); color: rgba(0, 0, 255, 0.75); /* Fall... foward? */ background: #ffff007F; /* Or, less accurately, #ff08 */ color: #0000ffbe; /* Or #00fc */ } 
 
Hello, world!
 RGB='#ffabcd'; A='0.5'; RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')'; 

См. Здесь http://www.w3.org/TR/css3-color/#rgba-color

Это невозможно, скорее всего, потому, что 0xFFFFFFFF больше максимального значения для 32-битных целых чисел

Chrome 52+ поддерживает альфа-шестнадцатеричный:

 background: #56ff0077; 

Я нашел ответ после публикации вопроса об усилении. Сожалею!

MS Excel помог!

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

(в rbga процентная непрозрачность выражается в виде десятичной дроби, как указано выше)

 Opacity % 255 Step 2 digit HEX prefix 0% 0.00 00 5% 12.75 0C 10% 25.50 19 15% 38.25 26 20% 51.00 33 25% 63.75 3F 30% 76.50 4C 35% 89.25 59 40% 102.00 66 45% 114.75 72 50% 127.50 7F 55% 140.25 8C 60% 153.00 99 65% 165.75 A5 70% 178.50 B2 75% 191.25 BF 80% 204.00 CC 85% 216.75 D8 90% 229.50 E5 95% 242.25 F2 100% 255.00 FF 

Боюсь, это невозможно. формат rgba который вы знаете, является единственным.

Если вы можете использовать LESS, есть функция fade.

 @my-opaque-color: #a438ab; @my-semitransparent-color: fade(@my-opaque-color, 50%); background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); // result: background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5)); 

Очаровательный принц:

Только Internet Explorer позволяет использовать 4-байтовый шестицветный формат в формате ARGB, где A – это альфа-канал. Его можно использовать в фильтрах gradleиента, например:

 filter : ~"progid:DXImageTransform.Microsoft.Gradient([email protected]{dir},[email protected]{color1},[email protected]{color2})"; 

Где dir может быть: 1 (по горизонтали) или 0 (по вертикали) И цветные строки могут быть шестнадцатеричными (# FFAAD3) или argb hex цветами (# 88FFAAD3).

Ну, разные цветовые обозначения – это то, что вам нужно будет изучить.
Kuler дает вам лучший шанс найти цвет и в нескольких обозначениях.
Hex не отличается от RGB, FF = 255 и 00 = 0, но это то, что вы знаете. Таким образом, вы должны визуализировать его.
Я использую Hex, RGBA и RGB. Если массовое преобразование не требуется, вручную это поможет вам запомнить некоторые нечетные 100 цветов и их коды.
Для массового преобразования напишите какой-нибудь скрипт, подобный тому, который дал Алари. Сделайте взрыв с цветами.

Используйте red , green , blue чтобы преобразовать в RGBA:

 background-color: rgba(red($color), green($color), blue($color), 0.2); 

почему бы не использовать background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */ background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

если вы нацеливаете цвет текста или, возможно, элемент, это намного проще сделать.

  • Как заполнить geom_polygon разными цветами выше и ниже y = 0?
  • Алгоритм добавления смешанного цвета для значений RGB
  • Как автоматически генерировать N "разных" цветов?
  • Цветовой индекс Star BV до уровня RGB
  • Учитывая значение RGB, как мне создать оттенок (или оттенок)?
  • Как преобразовать целое число цвета в шестнадцатеричную строку в Android?
  • Как печатать цвет в консоли с помощью System.out.println?
  • navbar color в Twitter Загрузочный
  • Выбор правильных верхних и нижних границ HSV для определения цвета с помощью `cv :: inRange` (OpenCV)
  • Распознавание латинских знаков - определение цветового диапазона для сравнения пикселей
  • конвертировать шестнадцатеричный код в имя цвета
  • Давайте будем гением компьютера.