Wiem, że możesz pisać ...

background-color: #ff0000;

... jeśli chcesz czegoś, co jest czerwone.

I możesz pisać ...

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

... jeśli chcesz czegoś czerwonego i półprzezroczystego.

Czy istnieje jakiś zwięzły sposób zapisywania częściowo przezroczystych kolorów w systemie szesnastkowym? Chcę coś takiego:

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

... lub ...

background-color: #ff0000 50%;

Dostaję wszystkie moje kolory w systemie szesnastkowym, a konwersja ich wszystkich na dziesiętną skalę 0–255 jest denerwująca.

Moduł kolorów CSS poziom 4 prawdopodobnie będzie obsługiwał 4 i 8 cyfr szesnastkową notację RGBA!

Trzy tygodnie temu (18 grudnia 2014 r.) Szkic edytora CSS Color Module poziomu 4 został przesłany do grupy roboczej CSS W3C. Chociaż w stanie, który jest bardzo podatny na zmiany, obecna wersja dokumentu sugeruje, że w nieco niedalekiej przyszłości CSS będzie obsługiwał zarówno 4, jak i 8-cyfrowy szesnastkowy zapis RGBA.

Uwaga: w poniższym cytacie wycięto niepotrzebne fragmenty, a źródło mogło być mocno zmodyfikowane do czasu, gdy to czytasz (jak wspomniano powyżej, jest to szkic redaktora, a nie sfinalizowany dokument).
Jeśli coś się bardzo zmieniło, zostaw komentarz, aby poinformować mnie, żebym mógł zaktualizować tę odpowiedź!

§ 4.2 Notacje szesnastkowe RGB: #RRGGBB

Składnia a <hex-color>to <hash-token>token, którego wartość składa się z 3, 4, 6 lub 8 cyfr szesnastkowych . Innymi słowy, kolor szesnastkowy jest zapisany jako znak krzyżyka „#”, po którym następuje pewna liczba cyfr 0-9lub liter a-f(wielkość liter nie ma znaczenia - #00ff00jest identyczna #00FF00).

8 cyfr

Pierwsze 6 cyfr jest interpretowane identycznie jak zapis 6-cyfrowy. Ostatnia para cyfr, interpretowana jako liczba szesnastkowa, określa kanał alfa koloru, gdzie 00reprezentuje całkowicie przezroczysty kolor i ffreprezentuje całkowicie nieprzezroczysty kolor.

Przykład 3
Innymi słowy, #0000ffccreprezentuje ten sam kolor co rgba(0, 0, 100%, 80%)(lekko przezroczysty niebieski).

4 cyfry

Jest to krótszy wariant 8-cyfrowej notacji, „rozwinięty” w taki sam sposób, jak notacja 3-cyfrowa. Pierwsza cyfra, interpretowana jako liczba szesnastkowa, określa czerwony kanał koloru, gdzie 0reprezentuje wartość minimalną i fmaksimum. Następne trzy cyfry oznaczają odpowiednio zielony, niebieski i kanał alfa.

Co to oznacza dla przyszłości kolorów CSS?

Oznacza to, że zakładając, że nie zostanie to całkowicie usunięte z dokumentu poziomu 4, wkrótce będziemy mogli zdefiniować nasze kolory RGBA (lub kolory HSLA, jeśli jesteś jednym z nich ) w formacie szesnastkowym w przeglądarkach obsługujących kolor Składnia modułu poziomu 4.

Przykład

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. */
}

Kiedy będę mógł użyć tego w moich produktach skierowanych do klientów?

Wszystkie dowcipy na bok: to dopiero początek 2015 roku, więc nie będą one jeszcze obsługiwane w żadnej przeglądarce przez dłuższy czas - nawet jeśli twój produkt jest zaprojektowany tylko do pracy z najnowszymi przeglądarkami, prawdopodobnie będziesz nie zobaczymy tego w akcji w przeglądarce produkcyjnej w najbliższym czasie.

Zobacz bieżącą obsługę przeglądarki dla notacji kolorów #RRGGBBAA

Jednak powiedziawszy, sposób działania CSS oznacza, że ​​możemy zacząć korzystać z nich już dziś! Jeśli naprawdę chcesz zacząć z nich korzystać teraz, o ile dodasz awarię, wszelkie nieobsługiwane przeglądarki po prostu zignorują nowe właściwości, dopóki nie zostaną uznane za ważne:

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>

Tak długo, jak przeglądasz tę odpowiedź w przeglądarce, która obsługuje CSS backgroundi colorwłaściwości, <figure>element wyniku powyższego fragmentu będzie wyglądał bardzo podobnie do tego:

Korzystając z najnowszej wersji Chrome na Windows (v39.0.2171), aby sprawdzić nasz <figure>element, zobaczymy:

Sześciocyfrowe cofanie szesnastkowe jest zastępowane przez rgba()wartości, a nasze 8-cyfrowe wartości szesnastkowe są ignorowane, ponieważ obecnie są analizowane przez parser CSS Chrome. Gdy tylko nasza przeglądarka obsługuje te 8-cyfrowe wartości, zastąpią one rgba()te.

AKTUALIZACJA 2018-07-04: Firefox, Chrome i Safari obsługują teraz tę notację, Edge wciąż brakuje, ale prawdopodobnie nastąpi ( https://caniuse.com/#feat=css-rrggbbaa ).

Znalazłem odpowiedź po opublikowaniu rozszerzenia do pytania. Przepraszam!

MS Excel pomógł!

po prostu dodaj prefiks Szesnastkowy do wartości koloru heksadecymalnego, aby dodać alfa, które ma krycie równoważne jak wartość%.

(w rbga procentowe krycie jest wyrażone w postaci dziesiętnej, jak wspomniano powyżej)

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

Zobacz tutaj http://www.w3.org/TR/css3-color/#rgba-color

Nie jest to możliwe, prawdopodobnie dlatego, że 0xFFFFFFFF jest większa niż maksymalna wartość dla 32-bitowych liczb całkowitych

Chrome 52+ obsługuje alpha hex:

background: #56ff0077;

Zastosowanie red, green, bluekonwertować do RGBA:

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

Obawiam się, że to niemożliwe. rgbaFormat wiesz, jest tylko jeden.

Jeśli możesz użyć opcji LESS, dostępna jest funkcja przenikania.

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

Czarujący Książę:

Tylko przeglądarka internetowa zezwala na 4-bajtowy kolor heksadecymalny w formacie ARGB, gdzie A jest kanałem alfa. Może być stosowany na przykład w filtrach gradientowych:

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

Gdzie katalog może być: 1 (poziomy) lub 0 (pionowy), a ciągi kolorów mogą być kolorami szesnastkowymi (# FFAAD3) lub kolorami szesnastkowymi argb (# 88FFAAD3).

Cóż, musisz się nauczyć różnych oznaczeń kolorów.
Kuler daje większą szansę na znalezienie koloru i wielu notatek.
Hex nie różni się od RGB, FF = 255 i 00 = 0, ale to wiesz. W pewnym sensie musisz to sobie wyobrazić.
Używam Hex, RGBA i RGB. O ile nie jest wymagana konwersja masy, ręczne wykonanie tej czynności pomoże zapamiętać 100 dziwnych kolorów i ich kodów.
Do masowej konwersji napisz jakiś skrypt jak ten podany przez Alarie. Baw się dobrze z kolorami.

W Sass możemy napisać:

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

jak sugerowano w reprezentacji szesnastkowej koloru z kanałem alfa?

dlaczego nie użyć background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

jeśli celujesz w kolor tekstu lub prawdopodobnie elementu, powinno to być o wiele łatwiejsze.