Szesnastkowy CSS RGBA?


199

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.


1
Możesz eksperymentować z różnymi zapisami, ale mi się nie udało. rgb(0xff,\x80,#44)zadziwiająco reprezentacja Octal wydają Jorku trochę rgb(0100, 0200,0300)jest#4080C0
yunzen

Możesz użyć ColorPic, który pokazuje liczby dziesiętne dla wybranego koloru iconico.com/colorpic
yunzen 23.11.11

2
Jak zasugerował Slomojo, w MNIEJ możesz zrobić kolor tła: # ff0000 + rgba (0, 0, 0, .8); które przekonwertują dla ciebie hex i nadal stosują przezroczystość, ale nie można tego zrobić przy użyciu natywnego CSS.
fl3x7,

1
Dla kompletności, jak dyskutują Slomojo i fl3x7, można to łatwo zrobić w Sass : background-color: opacify(#ff0000, 0.5);lub background-color: transparentize(#ff0000, 0.5);Możesz podać zmienne heksadecymalne Sass również do tych funkcji Sass.
Adam Caviness,

Odpowiedzi:


112

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?

Tumble Chwast to jedyna prawdziwa reakcja ...

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:

Obraz wyniku fragmentu kodu

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

Przykład Inspektora Elementów

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


1
Pamiętam, jak widziałem to na listach dyskusyjnych najpóźniej rok temu (pomysł posiadania 4- / 8-cyfrowego znaku szesnastkowego nie jest niczym nowym). Cieszę się, że na razie wprowadzono kolory 4.
BoltClock

@BoltClock mam nadzieję, że też tu zostanie!
James Donnelly,

Firefox Nightly właśnie to zaimplementował :)
Florrie

/* Fall... foward? */»Proponuję przeskoczyć do przodu. Powrót i skok do przodu: ^ p
WoodrowShigeru

Wystarczy dodać przydatny link. Link zawiera listę wartości krycia w postaci szesnastkowej. gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Ashish Kumar

33

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

Nie polegajcie na tym. Czy masz na myśli #FF00000Cto, że jest równoważne rgba(255,0,0,0.05)?
Junzen

jest to przedrostek, a nie przyrostek. Znaczenie dodasz go do przodu 6 cyfra wartość hex kolor #000000staje #7F000000.
T9b

7
@ T9b: CSS3 nie obsługuje tej notacji. Koniec opowieści.
PointedEars,

@PointedEars źle w obu przypadkach. PO nie wspomina konkretnie o CSS3, a to pytanie, które, jak sądzę, prawdopodobnie będzie bardziej związane z konkretnymi problemami IE, które wszyscy wiemy, że jest trudne. Niemniej jednak IE używa zarówno CSS, jak i Hex wartości przezroczystości w swoim CSS.
T9b

4
@ T9b Bzdury. OP ma pytanie CSS o wartości RGBA. Nie ma obsługi RGBA w CSS przed CSS3. Jeśli IE / MSHTML obsługuje twoją notację, jest to zastrzeżone , niekompatybilne i z natury zawodne. I na pewno nie sugerujesz używania skryptów po stronie klienta, aby ta notacja działała, prawda? Ponieważ nie byłoby to zgodne i byłoby również zawodne.
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
Jeśli pochodzisz ze świata React:<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>
Atul Yadav

14

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


28
#ffffff(sześć cyfr szesnastkowych) jest w rzeczywistości 24-bitową wartością koloru; 0xFFFFFFFF ma w rzeczywistości 2³² − 1 i może być reprezentowany jako 32-bitowa liczba całkowita bez znaku . Myślę, że powodem, dla którego #ffffffff(osiem cyfr szesnastkowych) nie podano, jest zarówno to, że kolory CSS są zakorzenione w przestrzeni kolorów sRGB, jak i to, że ośmiocyfrowa notacja byłaby niejednoznaczna z urządzeniem wyświetlającym, które obsługuje głębię kolorów 32-bitową. Pamiętaj, że nadal jest #ffftak, że oznacza to rgb(100%, 100%, 100%)- biały - zarówno z głębią kolorów 8 bitów (256 kolorów), jak i 16 bitów (65536 lub 64K kolorów).
PointedEars,

5
W rzeczywistości jest to dokładnie to, co może pomieścić 32-bitowa liczba całkowita. 2 cyfry szesnastkowe mogą zawierać tyle wartości, ile 8 cyfr binarnych. Lub ... 8 cyfr szesnastkowych może pomieścić tyle wartości, co 32 cyfry binarne.
Pijusn

Chociaż nie ma żadnego ważnego powodu, że funkcja CSS nie powinna była być zaprojektowana w ten sposób od samego początku (podobnie jak zmienne rgba (0,0, 0,5, 1,0) dla normalnych pasujących do innych funkcji koloru). Jeśli chodzi o 32-bitową obsługę kolorów wyświetlacza, nie ma go na początku w przypadku 6-cyfrowego RGB i jest to naprawdę przypadek na krawędzi. Nie mam problemu z nauką różnych formatów, ale są przypadki, w których możesz uzyskać dynamiczny kolor w trybie szesnastkowym i musisz utworzyć z niego CSS w czasie wykonywania. Wymaga to dodatkowego kroku konwersji z szesnastkowego na dziesiętny, jeśli chcesz dodać do niego alfa, co jest niezgrabne.
Beejor

13

Chrome 52+ obsługuje alpha hex:

background: #56ff0077;

4
Byłem podekscytowany, gdy to zobaczyłem, a potem wypróbowałem to w devtools na Chrome 55. Brak kości, to błąd jako niepoprawna wartość właściwości ...¯\_(ツ)_/¯
ericsoco

1
Wygląda na to, że wystąpiły różne problemy, oto strona stanu tej funkcji.
Billy,

Chrome usunął wsparcie, Safari i Firefox mają wsparcie. Nie używaj tego.
Sprawa

5
Od lipca 2019 r. Na całym świecie jest 84,5% wszystkich przeglądarek obsługujących tę funkcję. caniuse.com/#search=rrggbbaa
André Kuhlmann

10

Zastosowanie red, green, bluekonwertować do RGBA:

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

4
SASS obsługuje kolor tła: rgba ($ color, .2);
djibe

to nie są poprawne metody css - należy wspomnieć
Piotr Karbownik

7

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


1
@mdmullinax: Ale kto określa kolory szesnastkowe w notacji HSL?
BoltClock

1
Wszystko w życiu kojarzy mi się z notacją HSLA, jest to wersja synestezji :)
MikeM

@mdmullinax: Och, to naprawdę niesamowite!
BoltClock

6
@mdmullinax: To może cię zachwycić, jeśli jeszcze tego nie widziałeś: mothereffinghsl.com
BoltClock

@BoltClock Podoba mi się ta strona, Paul Irish wygrał
MikeM

5

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

a sass / scss ma równoważną funkcję:rgba(base-color, 0.5)
LocustHorde

2

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


0

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.



-2

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.


9
Nieprzezroczystość -1 wpływa na całą treść, a nie tylko na kolor tła
Junnen

wtedy obiekt może zostać podwojony, jeden powinien być elementem zawierającym, drugi powinien być tym wewnątrz pojemnika, który ma krycie. ponieważ z pytania użytkownik chce innej metody niż konwencjonalna rgba.
Uroczy Książę

1
Nadal chce tego samego rezultatu i lepiej użyć rgba () lub innej notacji niż modyfikacja HTML.
FelipeAls,

to jest odpowiedź, której szukałem, zostaw kolory heksadecymalne w spokoju i zmień krycie za pomocą opacitywłaściwości css.
tutaj
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.