Konwerter kolorów

Jeden kolor, trzy dialekty

W normalny dzień pracy ten sam kolor przychodzi w trzech przebraniach: przewodnik marki daje Ci kod HEX, biblioteka canvas albo do wykresów chce liczb RGB, a nowoczesny CSS najprzyjemniej dostraja się w HSL. Ta strona utrzymuje wszystkie trzy w zgodzie — wpisz w dowolne pole, które pasuje do tego, co dostałeś, a pozostałe dwa przepisują się same w trakcie pisania, z próbką pokazującą, jak te liczby faktycznie wyglądają. Skrócony HEX też działa: wklej #f80, a rozwinie się do #ff8800, dokładnie tak, jak odczytałaby to przeglądarka. Nie ma tu żadnego selektora kolorów, z którym trzeba walczyć; chodzi o precyzyjne przetłumaczenie wartości, którą już masz.

Budowanie palety za pomocą HSL

HSL zarabia na siebie w chwili, gdy potrzebujesz odmian koloru, a nie samego koloru. Zostaw odcień bez zmian i przesuwaj tylko jasność: obniż ją o dziesięć punktów dla stanu hover, podnieś o czterdzieści dla przyciemnionego tła, a każdy wariant pozostanie rozpoznawalnie tym samym kolorem — coś niemal niemożliwego do zrobienia przez bezpośrednią edycję cyfr HEX. Obniżenie nasycenia daje stonowaną, wyszarzoną wersję, która sprawdza się w wyłączonych przyciskach i subtelnych obramowaniach. Ponieważ pola aktualizują się nawzajem na żywo, szybkim sposobem pracy jest wklejenie HEX-a swojej marki, odczytanie HSL, drobne przesunięcie jednej liczby i skopiowanie świeżego HEX-a z powrotem — mała paleta w niecałą minutę, bez żadnego programu do projektowania.

Szczere ograniczenia i sąsiadująca sztuczka

Są dwie rzeczy, których ten konwerter celowo nie robi. Nie ma kanału alfa — pole RGB mówi rgb(), nie rgba() — więc przezroczystość dodajesz później w swoim CSS, gdzie jest jej miejsce. A wartości HSL są zaokrąglane do liczb całkowitych dla czytelności, co oznacza, że przejście HEX na HSL i z powrotem na HEX może przesunąć się o jeden punkt; niewidoczne na ekranie, ale warto o tym wiedzieć, jeśli porównujesz pliki stylów. Narzędzie jest bezpłatne bez limitów, tak jak wszystkie nasze narzędzia deweloperskie. Warto zapamiętać jedno zestawienie: gdy ta strona powie Ci dokładnie, jakiego koloru jest tło logo, nasze narzędzie do przezroczystości obrazu może usunąć z obrazu dokładnie ten kolor — przydatny dwuetapowy sposób przy przygotowywaniu grafik na stronę internetową.

Trzy sposoby opisania tego samego koloru

HEX i RGB opisują kolor poprzez natężenie światła czerwonego, zielonego i niebieskiego (tylko w różnych notacjach) — HSL opisuje go zamiast tego przez odcień, nasycenie i jasność, co często jest bardziej intuicyjne przy ręcznym dobieraniu lub dostosowywaniu barwy.