Próbnik kolorów (Color Picker)

Wybieraj kolory i kopiuj gotowe do użycia wartości

Niezawodny próbnik kolorów powinien robić więcej niż pokazywać ładny kwadrat. Projektanci, programiści i twórcy treści często potrzebują tego samego koloru w kilku formatach, zależnie od miejsca użycia. CSS obsługuje HEX, RGB i HSL, systemy projektowe mogą dokumentować tokeny jako HEX, a szybkie zmiany w prototypach są często łatwiejsze w HSL, bo barwę, nasycenie i jasność można zmieniać niezależnie. To narzędzie pokazuje te formaty obok siebie, więc wybierasz kolor raz i kopiujesz wartość pasującą do Twojego sposobu pracy.

Wszystko dzieje się lokalnie w przeglądarce. Wybór koloru, obliczenia konwersji i przyciski kopiowania działają dzięki JavaScriptowi po stronie klienta, więc nie potrzeba konta, przesyłania plików ani zdalnego przetwarzania. Dzięki temu narzędzie sprawdza się przy prywatnych paletach marki, niepublikowanych motywach produktów, pracy dla klientów i szybkich eksperymentach z interfejsem, które nie powinny opuszczać Twojego komputera.

Jak używać odcieni jaśniejszych i ciemniejszych w interfejsach

Jaśniejsze i ciemniejsze odcienie pozwalają jednemu kolorowi marki zbudować cały interfejs. Jaśniejsze odcienie sprawdzają się w subtelnych tłach, stanach najechania, panelach powiadomień i zaznaczonych wierszach. Ciemniejsze odcienie mogą służyć jako obramowania, stany wciśnięcia, akcenty trybu ciemnego lub tekst o dużym nacisku, gdy oryginalny kolor jest zbyt jaskrawy. Próbki tutaj zachowują stałą barwę i nasycenie, zmieniając tylko jasność, co daje prostą skalę spójną z kolorem bazowym.

Traktuj wygenerowaną skalę jako punkt wyjścia, a nie gotowy system projektowy. Ludzki odbiór barw nie jest idealnie liniowy, a niektóre barwy wymagają ręcznej korekty, by wyglądały na równomiernie rozmieszczone. Niebieskie i fioletowe zwykle znoszą szeroki zakres jasności, natomiast żółte mogą wymagać ciemniejszych odcieni, aby tekst był czytelny. Skopiuj wartości, przetestuj je w prawdziwym komponencie i dopracuj te kroki, które mają największe znaczenie.

Wybór między HEX, RGB i HSL

HEX jest zwięzły i powszechny przy przekazywaniu projektów, dlatego to dobry domyślny wybór do dokumentacji. RGB przydaje się, gdy narzędzie wymaga liczbowych kanałów czerwonego, zielonego i niebieskiego albo gdy myślisz bezpośrednio o świetle ekranu. HSL jest zwykle najwygodniejszy przy drobnych zmianach: przesuń barwę, by obrócić się po kole kolorów, zmniejsz nasycenie dla spokojniejszego tonu albo zmień jasność, by uzyskać jaśniejszy lub ciemniejszy odcień. Wyświetlanie wszystkich trzech formatów zmniejsza liczbę błędów przy przechodzeniu między narzędziami projektowymi, plikami CSS i bibliotekami komponentów.