Ответ 1

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

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

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

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

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

8 цифр

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

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

4 цифры

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

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

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

Ответ 2

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

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

Ответ 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+')';

Ответ 4

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

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

Ответ 5

Chrome 52+ поддерживает alpha hex:

background: #56ff0077;

Ответ 6

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

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

Ответ 7

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

Ответ 8

Если вы можете использовать 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));

Ответ 9

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

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

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

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

Ответ 10

Ну, разные цветные обозначения - это то, что вам нужно будет изучить.
Kuler дает вам больше шансов найти цвет и в нескольких обозначениях.
Шестигранник не отличается от RGB, FF = 255 и 00 = 0, но это то, что вы знаете. Таким образом, вы должны визуализировать его.

Я использую Hex, RGBA и RGB. Если массовое преобразование не требуется, вручную это поможет вам запомнить некоторые нечетные 100 цветов и их коды.

Для массового преобразования напишите некоторый script как тот, который дал Алари. Сделайте взрыв с цветами.

Ответ 11

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

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

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

Ответ 12

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

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