CodeKitHubCzym jest to narzędzie?
Kolory w sieci są zapisywane w kilku równoważnych formatach. HEX (#4f46e5) to zwięzła forma stosowana powszechnie w CSS i dokumentacji projektowej. RGB (rgb(79, 70, 229)) określa bezpośrednio składowe czerwieni, zieleni i błękitu, co często jest wymagane w kodzie. HSL (hsl(243, 75%, 59%)) opisuje odcień, nasycenie i jasność — jest to najbardziej intuicyjny format do dostosowywania koloru, np. w celu jego przyciemnienia lub zmniejszenia nasycenia.
Wszystkie te nazwy opisują ten sam kolor; to narzędzie pozwala na dokładną konwersję między nimi i wyświetla podgląd, dzięki czemu możesz sprawdzić, czy jest to rzeczywiście ten kolor, o którym myślałeś.
Dlaczego warto go używać?
- Obsługuje dowolny format wejściowy — HEX (3- lub 6-cyfrowy), RGB lub HSL — i generuje wyniki we wszystkich tych formatach.
- Próbka z podglądem na żywo, dzięki której widzisz kolor, a nie tylko liczby.
- Wizualny selektor kolorów, gdy wolisz wybierać na oko.
- Kopiowanie jednym kliknięciem w wybranym formacie, gotowe do użycia w CSS lub kodzie.
- Bezpłatnie, natychmiastowo, bez konieczności przesyłania plików.
Jak używać
- Wpisz lub wklej kod koloru: #4f46e5, rgb(79, 70, 229) lub hsl(243, 75%, 59%) – wszystkie te opcje są poprawne.
- Możesz też kliknąć narzędzie do wyboru koloru i wybrać kolor na podstawie wyglądu.
- Zapoznaj się ze wszystkimi trzema formatami w wynikach i sprawdź próbkę podglądu.
- Kliknij przycisk „Kopiuj” obok wybranego formatu.
Przykład
Wejście
#4f46e5Wynik
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Trzy oznaczenia, jeden identyczny kolor.
Który format wybrać?
Wszystkie trzy określenia dokładnie opisują ten sam kolor — wybór zależy od tego, które z nich jest najwygodniejsze w danym zadaniu, a nie od dokładności.
| Format | Najlepsze dla | Dlaczego |
|---|---|---|
| Szesnastkowy kod koloru | CSS, przekazywanie projektów, szybkie kopiowanie i wklejanie | Najłatwiejszy do wpisania i wklejenia; uniwersalny format stosowany w narzędziach do projektowania, takich jak Figma. |
| Czerwony, zielony, niebieski (79, 70, 229) | Kod bezpośrednio manipulujący kanałami, operacje na płótnie/obrazach | Odzwierciedla sposób, w jaki interfejsy API grafiki oraz dane pikseli obrazu faktycznie przechowują informacje o kolorze. |
| HSL (hsl(243,75%,59%)) | Regulacja koloru — jaśniejszy, ciemniejszy, bardziej/mniej nasycony | Jasność i nasycenie to odrębne wartości, które można regulować bezpośrednio, w przeciwieństwie do systemów HEX/RGB, w których zmieniają się wszystkie kanały. |
Typowe zastosowania
- Wybieranie koloru wizualnie w narzędziu do projektowania, a następnie przekształcanie go na dokładną wartość HEX lub RGB wymaganą w CSS lub kodzie.
- Tworzenie zestawu powiązanych odcieni (jaśniejszych/ciemniejszych wariantów) poprzez konwersję do przestrzeni HSL, dostosowanie jasności oraz ponowną konwersję.
- Dopasowanie koloru marki w różnych narzędziach, z których każde wymaga innego formatu — plik z logo w przestrzeni RGB, przewodnik stylistyczny w systemie HEX, zmienna CSS wymagająca formatu HSL do tworzenia motywów.
- Sprawdzanie, czy kolor pobrany ze zrzutu ekranu lub pliku projektowego (często podawany w formacie RGB) odpowiada wartości HEX w arkuszu stylów.
Najczęściej zadawane pytania
Kiedy należy używać HSL zamiast HEX lub RGB?
Kiedy chcesz dokonać analizy koloru. Przyciemnienie koloru o 10% w przestrzeni HSL oznacza obniżenie jasności o 10 punktów; w systemach HEX lub RGB trzeba by było ponownie obliczyć wszystkie kanały. Systemy projektowe często definiują palety w przestrzeni HSL właśnie z tego powodu.
Czy narzędzie obsługuje 3-cyfrowe wartości szesnastkowe, takie jak #fff?
Tak. #fff to skrót od #ffffff — każda cyfra jest podwojona. Obie formy są akceptowane, a wynik wyświetla się w pełnej, 6-cyfrowej postaci.
A co z alfa (przezroczystością)?
To narzędzie konwertuje kolory nieprzezroczyste (wartości RGB/HSL). Jeśli potrzebujesz przezroczystości, dodaj wartość alfa samodzielnie: rgba(79, 70, 229, 0,5) lub #4f46e580 — sama barwa pozostaje bez zmian.
Dlaczego moje wartości HSL różnią się o 1 od wyników uzyskane przy użyciu innego narzędzia?
Zaokrąglanie. Konwersja HSL↔RGB daje w wyniku wartości ułamkowe, a poszczególne narzędzia zaokrąglają je w różny sposób. Różnica rzędu ±1 w odcieniu lub wartości procentowej jest niewidoczna i stanowi normalne zjawisko.
Czy obsługiwane są nazwy kolorów, takie jak „czerwony”?
Nie w fazie 1 — narzędzie skupia się na trzech formatach liczbowych, które programiści konwertują najczęściej. Wprowadź wartość koloru w formacie HEX/RGB/HSL lub wybierz go wizualnie za pomocą selektora.