Konwerter kolorów

Konwerter kolorów to bezpłatne narzędzie, które przekształca kolor podany w formacie HEX, HEX alpha, RGB, RGBA, HSV, HSL lub HSLA na odpowiadające mu wartości w wielu innych formatach.

Jakie formaty kolorów mogę konwertować?

Możesz wprowadzić wartość HEX, HEX alpha, RGB, RGBA, HSV, HSL lub HSLA, a następnie odczytać jej odpowiedniki we wszystkich obsługiwanych formatach. Przydaje się to, gdy specyfikacja projektu, arkusz stylów lub zewnętrzny interfejs API zapisuje ten sam kolor w inny sposób.

• HEX przedstawia kanały czerwony, zielony i niebieski za pomocą par liczb szesnastkowych, zwykle w postaci #RRGGBB.
• HEX Alfa dodaje kanał przezroczystości. We współczesnej składni CSS często ma postać #RRGGBBAA.
• RGB używa wartości kanałów czerwonego, zielonego i niebieskiego, zwykle w zakresie od 0 do 255.
• RGBA rozszerza RGB o kanał alfa.
• HSV opisuje barwę, nasycenie i wartość. Jest często stosowany w selektorach kolorów, ale nie stanowi standardowej funkcji koloru w CSS.
• HSL opisuje barwę, nasycenie i jasność. CSS obsługuje HSL bezpośrednio.
• HSLA to HSL uzupełniony o wartość alfa.

RGB i HSL to różne matematyczne sposoby opisywania tego samego koloru, a nie różne kolory. Konwersja pozwala zmienić zapis, zachowując zamierzony kolor tak dokładnie, jak umożliwia to format docelowy.

Jak używać konwertera kolorów?

Wpisz pełną wartość koloru w polu Color, używając jednego z obsługiwanych formatów, a następnie odczytaj lub skopiuj wygenerowane wartości z pól wynikowych.

1. Skopiuj wartość źródłową dokładnie, wraz z początkowym znakiem hash, przecinkami, nawiasami, znakami procentu lub składnikiem alfa, jeśli występuje.
2. Wklej ją w polu Color.
3. Odczytaj odpowiadające jej wartości wyświetlone w polach HEX, HEX Alfa, RGB, RGBA, HSV, HSL i HSLA.
4. Wybierz jeden z obsługiwanych formatów, który akceptuje system docelowy. W regułach CSS często stosuje się HEX, RGB, RGBA, HSL i HSLA. HSV jest częściej używany w interfejsach edycyjnych i obliczeniach dotyczących kolorów.

Konwersja odbywa się na serwerze. Wprowadzona wartość jest przesyłana na serwer przez HTTPS i nie jest przechowywana. Pojedynczy kolor rzadko stanowi informację poufną, ale przed przesłaniem niewydanej jeszcze palety lub zestawu tokenów projektowych do dowolnej usługi internetowej zastanów się, czy takie dane nie są poufne.

Spacje i znaki interpunkcyjne są częścią składni RGB, HSL i formatów pokrewnych, a znaki procentu wskazują wartości procentowe. Sama liczba, puste pole lub dowolny tekst nie określają koloru. Tekst ze znakami diakrytycznymi lub zapisany alfabetem innym niż łaciński również nie ma zdefiniowanego znaczenia w tych formatach liczbowych.

Jak interpretować przekonwertowane wartości?

Każdy wynik jest innym zapisem tego samego koloru. Zwróć szczególną uwagę na zakresy kanałów, wartości procentowe i przezroczystość alfa. To, które pole należy skopiować, zależy od zapisu kolorów obsługiwanego przez system docelowy.

W sześciocyfrowym zapisie HEX pierwsza para oznacza kolor czerwony, druga zielony, a trzecia niebieski. Na przykład #336699 zawiera szesnastkowe wartości kanałów 33, 66 i 99, odpowiadające dziesiętnym wartościom RGB 51, 102 i 153.

Barwa jest zwykle wyrażana jako kąt na kole barw. Nasycenie oraz jasność lub wartość są zazwyczaj podawane w procentach. Jasność HSL i wartość HSV oblicza się inaczej, dlatego ich wartości procentowych nie należy porównywać tak, jakby określały tę samą właściwość.

Kanał alfa określa krycie. Kolor w pełni kryjący nie wymaga formatu obsługującego kanał alfa, ale kolor półprzezroczysty już tak. Jeśli skopiujesz kolor RGBA lub HSLA do zwykłego RGB, HSL albo sześciocyfrowego HEX, format docelowy nie będzie miał gdzie zapisać kanału alfa.

Ten konwerter nie jest opisany jako walidator składni wyświetlający szczegółowe komunikaty diagnostyczne. Nie zakładaj więc, że wskaże konkretny błędny znak. Do typowych błędów składni kolorów należą brak znaku hash w HEX, niedomknięte nawiasy, pominięte znaki procentu, wartość alfa spoza oczekiwanego zakresu oraz łączenie zasad zapisu kanałów HSL i RGB.

Przykłady konwersji kolorów

Prosty przykład pokazuje zależności między HEX, RGB, HSL i HSV. Czystą czerwień można zapisać w następujących równoważnych postaciach.

• Wartość wejściowa HEX #ff0000
• Odpowiednik RGB rgb(255, 0, 0)
• Odpowiednik HSL hsl(0, 100%, 50%)
• Odpowiednik HSV hsv(0, 100%, 100%)

W przypadku mniej nasyconego koloru #336699 odpowiada wartości rgb(51, 102, 153). Jego zapis HSL to hsl(210, 50%, 40%), natomiast w HSV ma barwę równą 210 stopni, nasycenie około 66,7% i wartość 60%. Interfejs może zaokrąglać wartości dziesiętne lub stosować inne odstępy bez zmiany praktycznego znaczenia wyniku.

Równie prosty przykład dotyczy przezroczystości. rgba(255, 0, 0, 0.5) i hsla(0, 100%, 50%, 0.5) opisują czerwień o połowie pełnego krycia. Zgodnie z powszechnie stosowaną ośmiocyfrową konwencją HEX w CSS odpowiada im wartość #ff000080, w której 80 jest skwantowanym bajtem alfa.

Kiedy warto konwertować kolor?

Konwersja ma sens, gdy aplikacja docelowa wymaga innego zapisu albo gdy inna reprezentacja ułatwia debugowanie. Typowe zastosowania to przekształcenie wartości z Figmy na niestandardową właściwość CSS, sprawdzenie wartości RGBA znalezionej w Chrome DevTools, przygotowanie pól kolorów do danych wysyłanych do interfejsu API lub weryfikacja danych motywu pochodzących od innego dostawcy przed wdrożeniem.

Konwersja jest zwykle zbędna, jeśli system docelowy już obsługuje istniejący zapis koloru. Zamiana sześciocyfrowego HEX na RGB wyłącznie na potrzeby CSS odczytywanego maszynowo daje niewiele korzyści, a wielokrotne konwertowanie w obie strony może powodować zaokrąglenia wartości HSL lub HSV. Nie dodawaj też kanału alfa, jeśli wszystkie kolory są w pełni kryjące.

Jeśli chcesz wybrać kolor wizualnie, zamiast przekształcać znaną wartość, skorzystaj z narzędzia Selektor kolorów. Konwersja nie zastępuje również testowania kontrastu, symulowania zaburzeń rozpoznawania barw ani zarządzania profilami kolorów. Równoważne wartości liczbowe nie dowodzą, że tekst na pierwszym planie spełnia wymagania WCAG dotyczące kontrastu.

Najczęściej zadawane pytania

Czy konwerter obsługuje nazwy kolorów z CSS?

Nie. Udokumentowane formaty wejściowe to HEX, HEX alpha, RGB, RGBA, HSV, HSL i HSLA, dlatego nazwy takie jak red, rebeccapurple czy transparent nie figurują na liście obsługiwanych danych. Przed wprowadzeniem nazwanego koloru przekształć go na liczbową wartość CSS.

Czy mogę wpisać trzycyfrową wartość HEX?

HEX jest obsługiwanym formatem wejściowym, ale dozwolone długości zapisu nie zostały udokumentowane. Aby uzyskać przewidywalny wynik, rozwiń skrócony zapis, na przykład #369 do #336699. Ta sama zasada dotyczy czterocyfrowego skrótu zawierającego kanał alfa.

Czy zamiast wartości koloru mogę wkleić całą deklarację CSS?

Wprowadź samą wartość koloru, a nie pełną deklarację. Użyj na przykład #336699 zamiast color: #336699;, ponieważ nazwa właściwości i średnik nie są częścią koloru. Jeśli kopiujesz wartość z JSON lub pliku konfiguracyjnego, usuń otaczające ją cudzysłowy.

Czy wynik zachowa informacje o szerokiej gamie barw lub profilu kolorów?

Na liście obsługiwanych danych nie ma formatów szerokiej gamy barw ani osadzonych profili kolorów. Display P3, Lab, LCH i dane profilu ICC zawierają informacje, których nie można zapisać w dostępnych polach HEX, RGB, HSL i HSV. Jeśli konwersja musi uwzględniać profil kolorów, użyj aplikacji z funkcją zarządzania kolorami.

Dlaczego przekonwertowane wartości czasem zawierają liczby dziesiętne?

Obliczenia HSL i HSV mogą dawać ułamkowe wartości procentowe, nawet gdy źródłowe kanały RGB są liczbami całkowitymi. Zaokrąglenie tych wartości może nieznacznie zmienić wynik późniejszej konwersji z powrotem na RGB. Podczas zapisywania tokenów projektowych zachowaj dostępną precyzję, a wartości zaokrąglaj tylko wtedy, gdy wymaga tego format docelowy lub przyjęty standard kodowania.