Konwerter kolorów (Hex, RGB, HSL)
Podgląd koloru
#6366f1
Przewodnik użytkownika
Color Converter to narzędzie online do konwersji wartości kolorów między formatami HEX, RGB, HSL, HSV i CMYK — z całym przetwarzaniem wykonywanym lokalnie w przeglądarce. Konwersja formatów kolorów jest codziennym zadaniem dla projektantów i deweloperów front-end: narzędzia projektowe jak Figma eksportują kody HEX; CSS używa zarówno HEX, jak i RGB/HSL; przepływy pracy drukowania wymagają wartości CMYK; biblioteki przetwarzania obrazów mogą używać HSV lub znormalizowanych float RGB; narzędzia do sprawdzania dostępności używają wartości sRGB do obliczania kontrastu. Ręczne konwertowanie między tymi formatami za pomocą wzorów jest żmudne i podatne na błędy. To narzędzie akceptuje dowolną prawidłową wartość koloru i natychmiastowo wyświetla odpowiedniki we wszystkich obsługiwanych formatach. Wprowadź kod HEX, wklej trojkę RGB, wprowadź wartości HSL lub wybierz kolor z natywnego selektora kolorów — wszystkie reprezentacje są aktualizowane w czasie rzeczywistym. Duża próbka koloru zapewnia natychmiastowe potwierdzenie wizualne. Konwerter poprawnie obsługuje pełną gamę sRGB i elegancko radzi sobie z wartościami poza zakresem. Możesz również wprowadzać nazwy kolorów CSS (takie jak "rebeccapurple", "tomato"), aby zobaczyć wszystkie ich odpowiedniki liczbowe.
- Wprowadź wartość koloru — Wpisz lub wklej dowolną wartość koloru w pole wejściowe: kod HEX (#6366f1 lub #fff), wartość RGB (rgb(99, 102, 241)), wartość HSL (hsl(239, 84%, 67%)) lub nazwę koloru CSS. Konwerter automatycznie wykrywa format.
- Użyj selektora kolorów — Kliknij próbkę koloru lub przycisk selektora, aby otworzyć natywny selektor kolorów przeglądarki. Wizualnie wybierz dowolny kolor, a wszystkie wartości formatów są natychmiast aktualizowane.
- Wyświetl wszystkie odpowiedniki formatów — Narzędzie wyświetla wybrany kolor jednocześnie w HEX, RGB (0–255), RGB (0–1 znormalizowany), HSL (stopnie, procenty), HSV i CMYK. Wszystkie wartości są aktualizowane razem za każdym razem, gdy zmieniasz jakiekolwiek dane wejściowe.
- Dostosuj pojedyncze kanały — Doprecyzuj kolor, modyfikując wartości poszczególnych kanałów — na przykład zmień tylko kanał alfa w RGBA lub dostosuj odcień w HSL, aby uzyskać nieco cieplejszy lub chłodniejszy wariant tego samego koloru.
- Skopiuj dowolny format — Kliknij przycisk "Kopiuj" obok dowolnej linii formatu, aby skopiować tę konkretną wartość do schowka. Na przykład skopiuj kod HEX dla CSS, wartość RGB dla narzędzi projektowych lub wartość CMYK dla specyfikacji druku.
- Zweryfikuj przez próbkę — Duża próbka podglądu koloru zawsze pokazuje faktycznie renderowany kolor. Użyj jej, aby wizualnie potwierdzić, że przekonwertowane wartości odpowiadają oczekiwanemu kolorowi przed ich skopiowaniem.
Często zadawane pytania
Jakie formaty kolorów obsługuje to narzędzie?
Narzędzie konwertuje między trzema najczęściej używanymi formatami kolorów CSS: HEX (#RRGGBB), RGB (rgb(r, g, b) z wartościami 0–255) i HSL (hsl(h, s%, l%) z kątem 0–360° i nasyceniem/jasnością 0–100%). Akceptuje również nazwy kolorów CSS (takie jak "tomato" lub "deepskyblue") jako dane wejściowe.
Jaka jest różnica między RGB a HSL?
RGB opisuje kolory poprzez intensywność czerwonego, zielonego i niebieskiego światła (każde 0–255). HSL opisuje kolory poprzez odcień (pozycja na kole kolorów, 0–360°), nasycenie (żywość, 0–100%) i jasność (jaskrawość, 0–100%). HSL jest często bardziej intuicyjny dla projektantów, ponieważ łatwiej jest dostosować jasność lub nasycenie.
Czy konwersja kolorów odbywa się na serwerze?
Nie. Cała logika konwersji odbywa się w przeglądarce za pomocą natywnych obliczeń kolorów JavaScript — żadne dane nie są wysyłane na żaden serwer.
Czy mogę używać tego narzędzia offline?
2Kit to PWA. Po pierwszej wizycie narzędzie jest buforowane i działa całkowicie offline.
Dlaczego muszę konwertować między formatami kolorów?
Różne narzędzia i przepływy pracy używają różnych formatów kolorów. Narzędzia projektowe często generują HEX, podczas gdy animacje CSS i systemy motywów mogą używać HSL dla łatwiejszej programowej manipulacji. To narzędzie pozwala szybko tłumaczyć między formatami bez obliczeń w głowie.
Implementacja techniczna
Całe przetwarzanie odbywa się wyłącznie w Twojej przeglądarce — żadne dane nie są nigdy wysyłane na serwery. To narzędzie działa w pełni offline jako Progresywna Aplikacja Webowa (PWA): po pierwszej wizycie wszystkie strony i zasoby są buforowane przez Service Worker i pozostają dostępne bez połączenia z internetem. Twoje dane wejściowe nigdy nie opuszczają urządzenia, co czyni je bezpiecznym dla wrażliwych treści, takich jak klucze API, hasła, prywatne konfiguracje i poufne dokumenty.