Darmowy próbnik kolorów HEX: wybierz lub wklej kolor i uzyskaj wartości HEX, RGB, HSL i OKLCH, jaśniejsze i ciemniejsze odcienie oraz kontrast względem bieli i czerni.
Próbnik kolorów HEX
Wybierz kolor lub wklej dowolną wartość HEX, RGB lub HSL, aby uzyskać każdy format potrzebny do projektowania i kodu: HEX, RGB, HSL i OKLCH. Zobacz skalę jaśniejszych i ciemniejszych odcieni i sprawdź, jak czytelny jest na nim tekst względem bieli i czerni.
Użyj próbnika koloru lub wpisz wartość, taką jak #4F98FB, rgb(79, 152, 251) lub hsl(215, 95%, 65%).
Skopiuj dowolny format jednym kliknięciem. OKLCH to nowoczesny format CSS, który utrzymuje spójną jasność w różnych odcieniach.
Kliknij dowolny jaśniejszy lub ciemniejszy odcień, aby uczynić go bieżącym kolorem.
Odczytaj współczynniki kontrastu, aby zdecydować, czy biały czy czarny tekst pasuje do tego koloru.
Dla przycisków celuj w kontrast co najmniej 4.5:1 między etykietą a kolorem przycisku.
Zbuduj paletę z jednego koloru marki: jasny odcień na tła, sam kolor na przyciski, ciemny odcień na stany po najechaniu i tekst.
Ekrany się różnią. Sprawdź kolor marki na telefonie, a nie tylko na laptopie.
Najczęściej zadawane pytania
Czym jest kod koloru hex?
Sześciocyfrowy kod koloru na ekranie, zapisywany jako # po którym następują trzy pary cyfr szesnastkowych dla czerwieni, zieleni i błękitu. #FF0000 to czysta czerwień; #000000 to czerń; #FFFFFF to biel.
Jaka jest różnica między HEX, RGB i HSL?
Opisują te same kolory na różne sposoby. HEX i RGB podają ilość czerwieni, zieleni i błękitu. HSL podaje odcień (kąt na kole barw), nasycenie i jasność, co jest łatwiejsze do ręcznej regulacji.
Czym jest OKLCH i czy powinienem go używać?
OKLCH to nowszy format koloru CSS oparty na tym, jak ludzie postrzegają kolor. Dwa kolory o tej samej wartości L wyglądają na jednakowo jasne, co ułatwia tworzenie spójnych palet. Obsługują go wszystkie aktualne główne przeglądarki.
Jak obliczany jest kontrast?
Według wzoru WCAG 2: względna luminancja jaśniejszego koloru plus 0.05, podzielona przez luminancję ciemniejszego koloru plus 0.05. Do pełnego sprawdzenia dwóch kolorów użyj sprawdzania kontrastu kolorów We.Inc.
Wybór koloru marki, który sprawdza się na stronie
Kolor marki ma kilka zadań: wyróżniać się na przyciskach, pozostawać czytelnym za białym tekstem i nie męczyć oka na całej stronie. Średnie błękity, zielenie i głębokie czerwienie zwykle spełniają wszystkie trzy. Bardzo jasne kolory (żółty, pastelowy róż) dobrze wyglądają w logo, ale są słabymi kolorami przycisków, bo ani biały, ani czarny tekst nie czyta się na nich dobrze bez korekty.
Panel kontrastu pokazuje to od razu. Jeśli biały tekst ma wynik poniżej 4.5:1, użyj czarnego tekstu albo wybierz ciemniejszy odcień ze skali na przyciski.
Jaśniejsze i ciemniejsze odcienie oraz prosta paleta
Jaśniejsze odcienie mieszają Twój kolor z bielą; ciemniejsze mieszają go z czernią. Praktyczna paleta strony potrzebuje tylko kilku: bardzo jasnego odcienia na tła sekcji, głównego koloru na przyciski i linki oraz jednego ciemniejszego odcienia na stany po najechaniu. Dodaj neutralne szarości na tekst i obramowania, a masz kompletny, spójny zestaw.
Aby sprawdzić konkretną parę tekstu i tła (na przykład szary tekst na zabarwionym tle), użyj sprawdzania kontrastu kolorów, które ocenia zarówno WCAG AA, jak i AAA.