Konwerter kolorów — HEX, RGB, HSL
Wklej kolor w dowolnym z trzech zapisów i otrzymaj pozostałe, razem z kanałem alfa i podglądem, żeby zobaczyć, co właściwie konwertujesz.
Kolor
Zapisy
O tym narzędziu
Hex to zapis, który podaje narzędzie projektowe, rgb() chce płótno albo biblioteka graficzna, a po hsl() sięga się, gdy kolor ma być odrobinę jaśniejszy albo odcień ma się obrócić. Przeliczanie między nimi na piechotę to arytmetyka, której nikt nie lubi. Wklej dowolny z trzech — z kanałem alfa albo bez — a pozostałe się pojawią, razem z podglądem, bo samą wartość łatwo przekręcić przy pisaniu i trudno sprawdzić okiem.
Jak używać
- 1Wklej kolor: #3fb984, rgb(63 185 132) albo hsl(157, 49%, 49%).
- 2Odczytaj po prawej pozostałe zapisy i sprawdź podgląd nad nimi.
- 3Skopiuj potrzebny wiersz albo gotową właściwość niestandardową CSS.
Częste pytania
›Jakie zapisy mogę wkleić?
Hex 3-, 4-, 6- albo 8-cyfrowy (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() i rgba() oraz hsl() i hsla(). Przyjmowana jest zarówno składnia z przecinkami, jak i nowoczesna ze spacjami i ukośnikiem przed kanałem alfa.
›Dlaczego HSL wraca z ułamkami?
Bo odcień, nasycenie i jasność są ciągłe, a hex ma 8 bitów na kanał. Przeliczenie hexa na HSL rzadko trafia w liczby całkowite, a zaokrąglenie przesunęłoby kolor przy powrocie.
›Do czego służy czwarta para szesnastkowa?
Do kanału alfa. #3fb984cc to ten sam kolor przy 80% krycia. Jest już obsługiwany wszędzie tam, gdzie to się liczy, i krótszy niż przechodzenie na rgba().
›Czy obsługiwane są kolory nazwane, jak „tomato”?
Nie. Rozwiązanie 148 słów kluczowych CSS wymaga pełnej tablicy przy bardzo małym zysku — wklej zamiast tego wartość szesnastkową. Da Ci ją dowolny panel narzędzi deweloperskich w przeglądarce.
›Dlaczego projektanci ciągle mówią o OKLCH?
Bo jasność w HSL nie pokrywa się z jasnością postrzeganą: dwa kolory o tym samym L mogą wyglądać zupełnie inaczej. OKLCH to naprawia, przez co znacznie lepiej nadaje się do budowania palet. Ta strona zostaje przy trzech zapisach, które wkleja się na co dzień.