Opis
To narzedzie przydaje sie wtedy, gdy jeden kolor trzeba sprawdzic w kilku formatach bez przelaczania sie miedzy programami. Pokazuje ten sam odcień jako HEX, RGB i HSL, dzieki czemu latwiej wybrac zapis pasujacy do arkusza CSS, specyfikacji komponentu albo notatki projektowej. Sprawdza sie przy uzgadnianiu koloru marki, przygotowaniu przekazania dla developera i weryfikacji tokenow w motywie. Wartosci aktualizuja sie razem, co ulatwia porownanie odcieni i zachowanie spójnych referencji kolorystycznych.
Zastosowania
- Przeglad tokenow motywuSprawdz kolor tokena w HEX, RGB i HSL przed dodaniem go do systemu projektowego lub stylow.
- Uzgadnianie palety markiZweryfikuj, czy kolor marki pozostaje taki sam w plikach projektowych, dokumentacji i na stronie.
- Stylowanie stanow komponentuOdczytaj kolor hover, active lub focus i zapisz dokladny format uzyty w kodzie.
Jak to dziala
- 1
Wybierz kolor z palety albo wpisz wartosc HEX.
- 2
Narzedzie przeliczy kolor na odpowiadajace wartosci RGB i HSL.
- 3
Skopiuj format potrzebny do CSS, dokumentacji albo stylow komponentu.
Przyklady
Niebieski przycisku glownego
Wejscie: #2563EB
Wynik: HEX #2563EB, RGB 37, 99, 235, HSL 221, 83%, 53%
Dla wyraznego koloru interfejsu, ktory trzeba zapisac w specyfikacji i stylach.
Ciemny neutralny dla powierzchni
Wejscie: rgb(17, 24, 39)
Wynik: HEX #111827, RGB 17, 24, 39, HSL 220, 39%, 11%
Pomaga sprawdzic ciemny odcien uzywany w kartach, overlayach albo tekście.
Delikatna zielen sukcesu
Wejscie: hsl(142, 72%, 29%)
Wynik: HEX #14913E, RGB 20, 145, 62, HSL 142, 72%, 29%
Przydatne, gdy projekt zapisuje kolor jako HSL, a CSS wymaga HEX lub RGB.
FAQ
Czy moge wpisac kolor w innym formacie niz HEX?
Tak. Jesli wklejony zapis jest obslugiwany, narzedzie pokazuje odpowiadajace wartosci HEX, RGB i HSL.
Dlaczego wartosci zmieniaja sie po lekkim przesunieciu suwaka?
Kazde drobne przesuniecie wybiera inny odcien, wiec liczby aktualizuja sie od razu. To normalne i pozwala uchwycic dokladny punkt koloru.
Jaka jest roznica miedzy RGB i HSL w tym narzedziu?
RGB opisuje mieszanke czerwieni, zieleni i blekitu. HSL pokazuje ten sam kolor jako odcien, nasycenie i jasnosc, co bywa wygodniejsze przy porownywaniu tonow.
Dlaczego skopiowane wartosci moga wygladac inaczej w innej aplikacji?
Niektore aplikacje zaokraglaja kanal lub inaczej interpretują alfa i wyswietlanie. Porownuj przede wszystkim wartosci liczbowe, nie sam podglad.