Dodaj przezroczystość do dowolnego koloru hex. Wybierz krycie, skopiuj 8-cyfrowy hex, rgba, hsla lub wartość dla Androida i zobacz kolor na jasnym i ciemnym tle oraz na szachownicy. Pełna tabela alfa od 0 do 100%.
Aby kolor hex był przezroczysty, dodaj dwie kolejne cyfry szesnastkowe dla kanału alfa: #RRGGBBAA. Ta para to krycie pomnożone przez 255 i zapisane szesnastkowo, więc 50% to 80, 75% to BF, a 25% to 40. Wybierz kolor i krycie poniżej, aby otrzymać 8-cyfrowy hex oraz odpowiadające mu wartości rgba i hsla.
Najczęściej używane wartości krycia
Krycie
Para alfa
Przykład na #4F98FB
BF
Wybierz kolor, przesuń suwak krycia i skopiuj format, którego potrzebuje Twój kod. Podgląd pokazuje kolor na bieli, czerni i szachownicy, a także pełny kolor, jaki powstaje po zmieszaniu z każdym z tych teł.
Wpisz lub wybierz kolor bazowy. Działa hex trzy-, sześcio- i ośmiocyfrowy; istniejąca para alfa ustawia suwak.
Przesuń suwak lub wpisz wartość procentową od 0 do 100.
Skopiuj 8-cyfrowy hex, rgba(), nowoczesny zapis rgb() z ukośnikiem, hsla() lub androidowy format #AARRGGBB.
Sprawdź kolor wynikowy na bieli i na czerni, jeśli potrzebujesz pełnego koloru zapasowego albo chcesz przetestować kontrast tekstu.
Pary alfa są zaokrąglane, więc wartość procentowa nie zawsze wraca do tej samej liczby. 80 w hex to 128 z 255, czyli 50.2%, co na każdym ekranie wystarczy.
Zasoby kolorów w Androidzie stawiają alfę na początku (#AARRGGBB), odwrotnie niż CSS. Zamiana kolejności to częsty powód, dla którego kolor w aplikacji wygląda źle.
W przypadku tekstu sprawdzaj kontrast względem koloru wynikowego, a nie przezroczystego. Czerń z kryciem 60% na bieli wygląda zupełnie inaczej niż czerń z kryciem 60% na zdjęciu.
Używaj właściwości opacity tylko wtedy, gdy cały element, razem z dziećmi, ma być wyblakły. Jeśli chcesz półprzezroczyste tło z pełnym tekstem, umieść alfę w kolorze tła.
Najczęściej zadawane pytania
Czy wszystkie przeglądarki obsługują 8-cyfrowe kolory hex?
Tak. Formy #RRGGBBAA i #RGBA pochodzą z CSS Color Level 4 i działają w każdej aktualnej wersji Chrome, Edge, Firefox i Safari. Bardzo stare przeglądarki je ignorują, więc dodaj zapasowe rgba() tylko wtedy, gdy nadal je wspierasz.
Jak przeliczyć krycie na hex?
Pomnóż krycie (od 0 do 1) przez 255, zaokrąglij do liczby całkowitej i zapisz jako dwie cyfry szesnastkowe. Dla 30%: 0.3 razy 255 to 76.5, co po zaokrągleniu daje 77, czyli 4D w hex. Pełna tabela na tej stronie zawiera każdy krok co 5%.
Czy #RRGGBBAA to to samo co rgba()?
Opisują ten sam kolor. rgba(79, 152, 251, 0.5) i #4F98FB80 wyglądają identycznie, pomijając drobne zaokrąglenie alfy w hex. Wybierz ten zapis, którego już używa Twój kod.
A co z 4-cyfrowym hex?
Jak czytać parę alfa
Para szesnastkowa liczy od 00 do FF, czyli od 0 do 255. Para alfa używa tej samej skali: 00 oznacza pełną przezroczystość, a FF pełne krycie. Dlatego popularne wartości na początku wyglądają dziwnie: połowa z 255 to 127.5, więc 50% zaokrągla się do 128, czyli 80 w hex.
Projektanci często eksportują kolory z pliku projektu z osobną wartością krycia. Zamiana tego na jedną 8-cyfrową wartość ułatwia wstawienie jej do design tokena lub konfiguracji Tailwind.
Przezroczyste kolory w Tailwind
Tailwind dodaje krycie przez ukośnik po nazwie koloru, na przykład bg-sky-500/50, co działa dla każdego koloru w motywie. Dla własnego koloru wartość arbitralna, taka jak bg-[#4F98FB80], przyjmuje 8-cyfrowy hex bezpośrednio.
Pod spodem Tailwind 4 miesza kolor z przezroczystością za pomocą color-mix(), a starsze wersje używają rgb() z alfą. Efekt na ekranie jest taki sam jak wartość hex z tego narzędzia.