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

199

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

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

Ли Хаои
источник
1
Вы можете экспериментировать с разными обозначениями, но я не смог. rgb(0xff,\x80,#44)изумительно представление восьмеричной , кажется, йорк немного rgb(0100, 0200,0300)будет#4080C0
yunzen
Вы можете использовать ColorPic, который показывает десятичные цифры для выбранного цвета iconico.com/colorpic
yunzen
2
Как предложил Сломохо, в LESS вы можете сделать background-color: # ff0000 + rgba (0, 0, 0, .8); который преобразует гекс для вас и все еще применяет прозрачность, но это не может быть сделано с использованием нативного CSS.
fl3x7
1
Для полноты, как обсуждают Slomojo и fl3x7, это можно легко сделать в Sass : background-color: opacify(#ff0000, 0.5);или background-color: transparentize(#ff0000, 0.5);вы можете предоставить шестнадцатеричные переменные цвета Sass для этих функций Sass.
Адам Кэвнесс

Ответы:

112

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

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

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

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

Синтаксис a <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 Синтаксис модуля уровня 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 ).

Джеймс Доннелли
источник
1
Я помню, как это поднялось в списках рассылки самое позднее, год назад или около того (идея использования 4- / 8-значного гексагона не нова). Рад видеть, что это вошло в Цвета 4 пока.
BoltClock
@BoltClock, надеюсь, он тоже останется здесь!
Джеймс Доннелли
Firefox Nightly только что реализовал это :)
Florrie
/* Fall... foward? */»Я предлагаю прыжок вперед. Откат и прыжок вперед: ^ p
ВудроШигеру
Просто добавив полезную ссылку. Ссылка содержит список значений непрозрачности в шестнадцатеричном виде. gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Ашиш Кумар
33

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

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
T9b
источник
Не совсем понимаю. Вы имеете в виду #FF00000Cэквивалентно rgba(255,0,0,0.05)?
yunzen
его префикс не суффикс. Значение вы добавляете его в переднюю части 6 цифр шестнадцатеричного значения цвета #000000становится #7F000000.
T9b
8
@ T9b: CSS3 не поддерживает эту нотацию. Конец истории.
PointedEars
@PointedEars неправильно в обоих случаях. В OP конкретно не упоминается CSS3, и я думаю, что этот вопрос скорее связан с конкретными проблемами IE, которые, как мы все знаем, сложны. Тем не менее IE использует значения прозрачности CSS и Hex в своем CSS.
T9b
4
@ T9b Чепуха. У OP есть вопрос CSS о значениях RGBA. В CSS нет поддержки RGBA до CSS3. Если IE / MSHTML поддерживает вашу нотацию, то она является проприетарной , несовместимой и ненадежной по своей природе. И, конечно же, вы не предлагаете использовать сценарии на стороне клиента, чтобы эта нотация работала? Потому что это не будет совместимым и ненадежным.
PointedEars
22
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+')';
Джеймс Алари
источник
var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';
PointedEars
2
Если вы <div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>
Атул Ядав,
14

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

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

Грифон
источник
28
#ffffff(шесть шестнадцатеричных цифр) на самом деле является 24-битным значением цвета; 0xFFFFFFFF фактически равен 2³² − 1 и может быть представлен как 32-разрядное целое число без знака . Я думаю, что причина #ffffffff(восемь шестнадцатеричных цифр) не указана в том, что цвета CSS коренятся в цветовом пространстве sRGB и что восьмизначная шестнадцатеричная запись будет неоднозначной с устройством отображения, которое поддерживает глубину цвета 32 бита. Помните, что это все еще #fffтак, что это означает rgb(100%, 100%, 100%)- белый - как с глубиной цвета 8 бит (256 цветов) и 16 бит (65536 или 64K цветов).
PointedEars
5
На самом деле это именно то, что 32-битное целое число способно хранить. 2 шестнадцатеричные цифры могут содержать столько же значений, сколько 8 двоичных цифр. Или ... 8 шестнадцатеричных цифр могут содержать столько же значений, сколько 32 двоичных цифры.
Пиюсн
Хотя нет основной причины, по которой функция CSS не должна была быть разработана таким образом с самого начала (так же как rgba (0.0, 0.5, 1.0) плавает для нормалей, чтобы соответствовать другим функциям цвета). Что касается 32-битной цветовой поддержки дисплея, этого не существует с 6-значным RGB для начала, и это действительно крайний случай. У меня нет проблем с изучением различных форматов, но бывают случаи, когда вы можете получить динамический цвет в шестнадцатеричном формате и вам потребуется создать CSS из него во время выполнения. Это требует дополнительного шага преобразования из шестнадцатеричного в десятичное, если вы хотите добавить к нему альфа, что неуклюже.
Бежор
13

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

background: #56ff0077;
Одед Брейнер
источник
4
Я был взволнован, чтобы увидеть это, а затем попробовал это в devtools на Chrome 55. Никаких кубиков, он ¯\_(ツ)_/¯
ошибочно
1
Похоже, у него были различные проблемы, вот страница состояния для этой функции.
Билли
В Chrome удалена поддержка, в Safari и Firefox есть поддержка. Не используйте это.
Дело
5
По состоянию на июль 2019 года 84,5% всех браузеров в мире поддерживают эту функцию. caniuse.com/#search=rrggbbaa
Андре Кульманн
10

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

background-color: rgba(red($color), green($color), blue($color), 0.2);
Джереми Линч
источник
4
SASS поддерживает background-color: rgba ($ color, .2);
Джибе
это не действительные методы CSS - вы должны упомянуть об этом
Петр Карбовник
7

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

Призрак Мадары
источник
1
@mdmullinax: Но кто определяет шестнадцатеричные цвета в нотации HSL?
BoltClock
1
Я ассоциирую все в жизни с нотацией HSLA, это версия синестезии :)
MikeM
@mdmullinax: О, это действительно здорово!
BoltClock
6
@mdmullinax: Это может вас порадовать, если вы еще этого не видели: mothereffinghsl.com
BoltClock
@BoltClock Мне нравится этот сайт, Пол Ирландский побеждает
MikeM
5

Если вы можете использовать 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));
Джулиан Манн
источник
и sass / scss имеет эквивалентную функцию:rgba(base-color, 0.5)
LocustHorde
2

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

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

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

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

Лайос Месарос
источник
0

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


источник
-2

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

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

Очаровательный принц
источник
9
-1 Непрозрачность влияет на весь контент, а не только на цвет фона
yunzen
тогда объект может быть удвоен, один должен быть содержащим элемент, другой должен быть тем внутри контейнера, который имеет непрозрачность. потому что из вопроса пользователь хочет другой метод, чем обычный rgba.
Очаровательный принц
1
Он по-прежнему хочет того же результата, и я бы лучше использовал rgba () или любую другую нотацию, чем изменение HTML.
FelipeAls
это ответ, который я искал, оставьте шестнадцатеричные цвета в покое и измените прозрачность, используя opacityсвойство css.
здесь