DevToolPal
PL

Konwerter kolorów (HEX, RGB, HSL)

Konwertuj kolory między HEX, RGB, HSL, HSV i CMYK, z podglądem na żywo i kontrastem względem bieli i czerni.

Działa lokalnie, nic nie jest wysyłane

Opcje

Kolor

Rezultat

Tutaj pojawi się wynik

Do czego służy

Konwerter kolorów przyjmuje kolor w dowolnym popularnym zapisie CSS i pokazuje go jednocześnie we wszystkich pozostałych: HEX, RGB, HSL, HSV i CMYK. Wyświetla też próbkę koloru, nazwę koloru CSS, gdy istnieje dokładne dopasowanie, oraz współczynnik kontrastu względem bieli i czerni, abyś mógł sprawdzić czytelność.

Jak używać

  1. Wpisz lub wklej kolor w polu Kolor albo użyj próbnika kolorów obok.
  2. Wszystkie zapisy aktualizują się w trakcie pisania. Kliknij Kopiuj obok tego, którego potrzebujesz.
  3. Włącz HEX wielkimi literami, jeśli twój przewodnik stylu zapisuje HEX wielkimi literami.
  4. Sprawdź wiersze kontrastu, zanim użyjesz koloru do tekstu: zielona plakietka oznacza, że kolor spełnia WCAG AA.

Przykład

#1e90ff to kolor CSS dodgerblue. Po konwersji daje:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Jego kontrast na białym tle wynosi 3.24:1, co wystarcza dla dużych nagłówków, ale nie dla tekstu głównego.

Modele kolorów w skrócie

  • HEX i RGB opisują, ile światła czerwonego, zielonego i niebieskiego emituje ekran. Tego używają wewnętrznie przeglądarki i narzędzia graficzne.
  • HSL opisuje odcień (kąt na kole barw), nasycenie i jasność, co ułatwia tworzenie jaśniejszych lub ciemniejszych wariantów tego samego koloru.
  • HSV (zwany też HSB) jest używany przez większość próbników kolorów w programach graficznych.
  • CMYK opisuje farby cyjan, magenta, żółtą i czarną do druku.

Kolory z przezroczystością, takie jak #1e90ff80 lub rgb(30 144 255 / 50%), są pokazywane z kanałem alfa w HEX, RGB i HSL.

FAQ

› Jak przekonwertować HEX na RGB?

Podziel sześć cyfr szesnastkowych na trzy pary i odczytaj każdą parę jako liczbę od 0 do 255. Dla #1e90ff to 1e = 30, 90 = 144 i ff = 255, czyli rgb(30, 144, 255). To narzędzie robi to za ciebie w trakcie pisania.

› Jakie formaty mogę wkleić?

HEX z # lub bez (3, 4, 6 lub 8 cyfr), rgb() i rgba(), hsl() i hsla() w składni z przecinkami i ze spacjami, wartości procentowe, jednostki kąta takie jak deg i turn oraz wszystkie 148 nazw kolorów CSS.

› Co oznacza współczynnik kontrastu?

To kontrast według WCAG 2 między kolorem a białym lub czarnym tłem. Tekst główny wymaga co najmniej 4.5:1 dla poziomu AA; duży tekst (około 24px lub 19px pogrubiony) wymaga 3:1.

› Dlaczego CMYK jest tylko przybliżony?

Drukarki używają profili farb zależnych od papieru i maszyny drukarskiej. Pokazany tu CMYK to standardowy wzór niezależny od urządzenia — dobry punkt wyjścia, ale nie zastąpi profilu druku.