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

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, ймовірно, підтримуватиме 4-х та 8-значні шістнадцяткові позначення RGBA!

Три тижні тому (18 грудня 2014 р.) Проект редактора CSS Color Module Level 4 був поданий до робочої групи 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, якщо ви один із цих хлопців) у шістнадцятковому форматі у браузерах, які підтримують колір Синтаксис рівня модуля 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>елемента, ми побачимо наступне:

Шестицифрове шестизначне зворотнє зворотнє відношення переосмислюється rgba()значеннями, а наші 8-значні шістнадцяткові значення ігноруються, оскільки вони CSS-аналізатором CSS Chrome зараз вважають недійсними. Щойно наш браузер підтримує ці 8-значні значення, вони перевершать ці rgba().

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

Я знайшов відповідь після публікації розширення до питання. Вибачте!

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

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;

Використовуйте red, green, blueщоб перетворити в RGBA:

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

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

Якщо ви можете використовувати менше, існує функція зникнення.

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

Чарівний принц:

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

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

Де реж може бути: 1 (горизонтальний) або 0 (вертикальний), а кольорові рядки можуть бути шістнадцятковими кольорами (# FFAAD3) або шестигранними кольорами argb (# 88FFAAD3).

Що ж, різні кольорові позначення - це те, що вам доведеться навчитися.
Кулер дає кращі шанси знайти колір і в декількох позначеннях.
Hex не відрізняється від RGB, FF = 255 і 00 = 0, але це те, що ви знаєте. Таким чином, вам доведеться візуалізувати це.
Я використовую Hex, RGBA та RGB. Якщо не потрібно масового перетворення, це вручну допоможе вам запам'ятати кілька незвичайних 100 кольорів та їх коди.
Для масової конверсії напишіть такий сценарій, як той, який дав Аларі. Провести вибух із кольорами.

У Sass ми можемо написати:

background-color: rgba(#ff0000, 0.5);

як було запропоновано в Hex-зображенні кольору з альфа-каналом?

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

якщо ви орієнтуєтесь на колір тексту чи, можливо, елемент, це зробити набагато простіше.