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

Question

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

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 раздражает.

Answer 1

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

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

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

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

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

8 цифр

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

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

4 цифры

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

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

Это означает, что, предполагая, что это не полностью удалено из документа уровня 4, мы скоро сможем определить наши цвета RGBA (или цвета HSLA, если вы один из этих парней) в шестнадцатеричном формате в браузерах, которые поддерживают синтаксис Color Module Level 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. */
}

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

Все шутки в стороне: В настоящее время это только начало 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 */
}

<figure>Hello, world!</figure>

Пока вы просматриваете этот ответ в браузере, который поддерживает свойства background и color в CSS, элемент <figure> в результате выполнения приведенного выше фрагмента будет выглядеть примерно так:

Используя самую последнюю версию Chrome для Windows (v39.0.2171) для проверки нашего элемента <figure>, мы увидим следующее:

6-значное шестнадцатеричное отступление переопределяется значениями rgba(), а наши 8-значные шестнадцатеричные значения игнорируются, поскольку в настоящее время они считаются недействительными синтаксическим анализатором Chrome CSS.Как только наш браузер поддерживает эти 8-значные значения, они переопределяют значения rgba().

ОБНОВЛЕНИЕ 2018-07-04: Firefox, Chrome и Safari теперь поддерживают эту запись, Edge все еще отсутствует, но, вероятно, последует (https://caniuse.com/#feat=css-rrggbbaa).

Answer 2

Я нашел ответ после публикации улучшения вопроса.Извините!

MS Excel помог!

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

(в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

Answer 3

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+')';

Answer 4

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

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

Answer 5

Chrome 52+ поддерживает альфа-гекс:

background: #56ff0077;

Answer 6

Используйте red, green, blue для преобразования в RGBA:

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

Answer 7

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

Answer 8

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

@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));

Answer 9

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

Только интернет-обозреватель допускает 4-байтовый шестнадцатеричный цвет в формате ARGB, где A - альфа-канал.Он может использоваться в градиентных фильтрах, например:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

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

Answer 10

Мне нужно было использовать ответ выше:

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

Но я хотел бы добавить немного, потому что OP хотел CSS + HEX, поэтому ответ ниже показывает, как вы можете использовать шестнадцатеричные значения без необходимостипредварительная обработка или любые дополнительные миксины:

background-color: rgba(red(#4d238c), green(#4d238c), blue(#4d238c), 0.2);

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