TF

Projektowanie i CSS

Konwerter kolorów i sprawdzanie kontrastu

Przeliczaj kolory między HEX, RGB, HSL, HSV, HWB, CMYK i OKLCH oraz sprawdzaj kontrast WCAG dla dostępnego tekstu.

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch() lub nazwa CSS, np. tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Jaśniejsze i ciemniejsze odcienie

Czym jest to narzędzie?

Wklej kolor w dowolnym formacie — #ff6347, rgb(255 99 71), hsl(9 100% 64%) albo po prostu tomato — i skopiuj go w każdym innym formacie. Przejdź do sprawdzania kontrastu, aby przetestować kolory tekstu i tła według WCAG 2 i otrzymać najbliższy kolor spełniający wymagania, gdy para nie przechodzi.

Ekrany mieszają światło czerwone, zielone i niebieskie, więc HEX i RGB opisują kolory tak, jak pokazują je monitory. HSL i HSV łatwiej dostosować ręcznie, CMYK przybliża farby drukarskie, a OKLCH to nowoczesna, percepcyjnie równomierna przestrzeń obsługiwana w CSS.

Współczynniki kontrastu WCAG wynoszą od 1:1 do 21:1. Zwykły tekst wymaga co najmniej 4,5:1 dla AA i 7:1 dla AAA; duży tekst (24px lub 18,66px pogrubiony) i elementy interfejsu wymagają 3:1. Półprzezroczyste kolory są przed pomiarem mieszane z tłem.

Jak używać: Konwerter kolorów i kontrastu

  1. Wpisz lub wklej kolor albo wybierz go próbnikiem.
  2. Skopiuj potrzebny format: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH lub nazwę koloru CSS.
  3. Kliknij jaśniejszy lub ciemniejszy odcień, aby poznać warianty tego samego koloru.
  4. Otwórz sprawdzanie kontrastu, ustaw kolor tekstu i tła i zobacz, czy spełniają WCAG AA i AAA.
  5. Jeśli para nie przechodzi, użyj proponowanego koloru — zachowuje odcień i zmienia jasność.

Przykłady

Tomato w innych formatach

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Najczęstsze pytania

Jak przeliczyć HEX na RGB?

Wklej kod HEX, np. #3366cc, i skopiuj wiersz RGB: rgb(51 102 204). Każda para cyfr szesnastkowych to jeden kanał od 0 do 255.

Jakiego kontrastu potrzebuję?

Dla tekstu głównego co najmniej 4,5:1 (WCAG AA). Duże nagłówki i ikony wymagają 3:1. Przy długim czytaniu lub dla osób słabowidzących celuj w 7:1 (AAA).

Czy konwersja do CMYK jest dokładna dla druku?

To przybliżenie niezależne od urządzenia. Rzeczywisty wynik zależy od papieru i profilu drukarki, więc w plikach końcowych użyj profilu kolorów drukarni.

Czym jest OKLCH?

OKLCH opisuje kolor jasnością, nasyceniem (chroma) i odcieniem w percepcyjnie równomiernej przestrzeni. Obsługuje go nowoczesny CSS i ułatwia tworzenie spójnych palet.

Potrzebujesz w przyszłości więcej możliwości?

Narzędzia premium, wyższe limity i dostęp przez API są w planach. Wersja 1 pozostaje darmowa i prywatna w Twojej przeglądarce.