Konwerter kolorów

Konwertuj między HEX, RGB, HSL, HSV i CMYK. Podgląd na żywo. Narzędzie sprawdzania kontrastu WCAG dla dostępności. Nic nie opuszcza przeglądarki.

Jak działa Konwerter kolorów

Konwerter kolorów natychmiast tłumaczy dowolny kolor między formatami HEX, RGB, HSL, HSV i CMYK podczas pisania. Przeprowadza też sprawdzenie kontrastu WCAG między dowolnymi dwoma wybranymi kolorami, pokazując współczynnik kontrastu i wynik zaliczenia/niezaliczenia AA/AAA dla normalnego tekstu, dużego tekstu i komponentów interfejsu. Wszystkie obliczenia wykonywane są w przeglądarce bez przesyłania danych; nic z tego co wpisujesz, nie opuszcza Twojego urządzenia.

Zrozumienie, jak ten sam kolor wygląda w różnych modelach kolorów, jest przydatne przy przekazywaniu projektów. Projektant może podać kolor marki jako HEX #1A4F8C; programista CSS potrzebuje odpowiednika HSL do tworzenia motywów; zespół druku potrzebuje dekompozycji CMYK. To narzędzie wykonuje konwersję we wszystkich kierunkach jednocześnie, dzięki czemu nie musisz uruchamiać wielu oddzielnych konwerterów.

Napisał Bastien Sulyan

Konwerter kolorów: instrukcja krok po kroku

Wpisz wartość HEX, kliknij próbkę koloru lub wprowadź wartości RGB, HSL, HSV lub CMYK w odpowiednich polach.
Wszystkie inne reprezentacje formatów aktualizują się natychmiast, pokazując równoważny kolor.
Aby uruchomić sprawdzenie kontrastu, wybierz kolor pierwszego planu i tła za pomocą dwóch selektorów kolorów.
Odczytaj współczynnik kontrastu WCAG i odznaki zaliczenia/niezaliczenia dla poziomów zgodności AA i AAA.
Skopiuj dowolną wartość koloru za pomocą ikony kopiowania obok każdego pola.

Typowe zastosowania

Projektant interfejsu konwertuje kod HEX marki na HSL, aby napisać niestandardową właściwość CSS dla systemu motywów.
Programista webowy sprawdza współczynnik kontrastu między kolorem tekstu a tłem przed wysłaniem komponentu, aby potwierdzić zgodność z WCAG AA.
Projektant graficzny otrzymuje kolor HEX ze strony internetowej i potrzebuje odpowiednika CMYK, aby dopasować go w drukowanej broszurze.
Programista potrzebuje rozkładu RGB tokena projektu, aby przekazać wartości poszczególnych kanałów do funkcji rysowania na canvas.

Często zadawane pytania

Czy narzędzie obsługuje wartości alfa (przezroczystość)?

Bieżący konwerter pracuje z w pełni nieprzezroczystymi kolorami (alfa = 1). HEXA (8-cyfrowy hex) i RGBA nie są jeszcze w zakresie. Dla przezroczystości ustaw kanał alfa w CSS osobno, używając notacji rgba() lub oklch().

Czy kolory, które wprowadzam, są gdzieś przechowywane lub wysyłane?

Nie. Konwersja kolorów to czysta arytmetyka (przemapowanie kanałów i skalowanie zakresu) działająca całkowicie w silniku JavaScript przeglądarki. Nic z tego co tu wpisujesz, nie trafia na żaden serwer ani zewnętrzną usługę.

Jakie poziomy kontrastu WCAG obsługuje sprawdzarka?

Narzędzie sprawdza względem kryteriów sukcesu WCAG 2.1: AA wymaga minimalnego współczynnika kontrastu 4,5:1 dla normalnego tekstu (poniżej 18pt lub 14pt pogrubionego) i 3:1 dla dużego tekstu i komponentów interfejsu. AAA wymaga 7:1 dla normalnego tekstu i 4,5:1 dla dużego tekstu.

Dlaczego wartości CMYK różnią się między tym narzędziem a profesjonalnym oprogramowaniem projektowym?

Konwersja RGB na CMYK wykonywana przez to narzędzie to wzór matematyczny bez profilu kolorów. Profesjonalne aplikacje projektowe stosują profile kolorów ICC uwzględniające przyrost punktu rastrowego i właściwości podłoża. Wartości CMYK tu podane są przydatne do przybliżeń; do produkcji drukarskiej zawsze należy zastosować profil prasy w dedykowanym oprogramowaniu.

Czy mogę tu konwertować nazwę koloru CSS, taką jak „cornflowerblue”?

Nazwane kolory CSS nie są bezpośrednio wpisywane do pól konwertera. Aby przekonwertować nazwany kolor, najpierw znajdź jego wartość HEX w referencji CSS (cornflowerblue to #6495ED), a następnie wklej ten HEX do pola HEX, aby zobaczyć wszystkie inne formaty.

Czy narzędzie działa offline po załadowaniu strony?

Tak. Konwersja kolorów to arytmetyka bez zewnętrznych zależności. Po załadowaniu strony do pamięci podręcznej przeglądarki możesz otworzyć ją bez połączenia sieciowego i wszystkie konwersje będą działać normalnie.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia dla programistów