Darmowe Narzędzie Online

Darmowe CSS i Narzędzia Kolorów

Wybieraj kolory, buduj gradienty, sprawdzaj kontrast i generuj CSS dla cieni i zaokrągleń — wszystko w jednym miejscu. Nic nie jest wysyłane, wszystko aktualizuje się na żywo podczas pisania.

Kliknij próbkę, żeby wybrać kolor

HEX

RGB

HSL

Wpisz w dowolne pole — HEX, RGB albo HSL — a pozostałe dwa zaktualizują się automatycznie, razem z próbką koloru.

Co możesz zrobić z tymi narzędziami CSS i kolorów

Konwerter Kolorów — wpisz kolor jako HEX, RGB lub HSL, a dwa pozostałe zaktualizują się od razu. Przydatne, gdy projekt daje Ci jeden zapis, a kod potrzebuje innego.
Gradient — wybierz kolory, zdecyduj się na Liniowy lub Radialny, ustaw kąt, a potem kliknij Kopiuj CSS.
Sprawdzanie Kontrastu — wybierz kolor tekstu i tła, żeby zobaczyć, czy przeczytają go także osoby ze słabym wzrokiem (WCAG AA i AAA).
Cień i Zaokrąglenie — przesuwaj przesunięcie, rozmycie i rozszerzenie, żeby zbudować box-shadow, a rogi zaokrąglij za pomocą border-radius. Skopiuj CSS, gdy wygląda dobrze.

Pojęcia związane z kolorem, wyjaśnione

HEX — kolor zapisany jako # i sześć liter lub cyfr, np. #2563EB.
RGB — ten sam kolor jako trzy liczby: czerwony, zielony i niebieski.
HSL — odcień, nasycenie i jasność. Łatwiej go dostosować ręcznie, np. żeby rozjaśnić kolor.
Kontrast WCAG — zasada mówiąca, jak bardzo tekst i tło muszą się różnić, żeby tekst był czytelny. AA to poziom, do którego dąży większość stron, AAA jest ostrzejszy.

Warto wiedzieć, zanim zaczniesz

Kolory są w pełni nieprzezroczyste: nie ma przezroczystości (alfa) ani 8-cyfrowych kodów hex.
Wartości HSL są zaokrąglane do liczb całkowitych, więc przy przeliczeniu z powrotem kanał koloru może się różnić o 1.
Zaliczenie lub oblanie kontrastu liczy się na dokładnych kolorach; pokazany stosunek jest zaokrąglony do dwóch miejsc, więc 4,496 wyświetla się jako 4.50:1, ale nie przechodzi 4,5.
Gradienty przyjmują do 6 kolorów, rozmieszczonych równomiernie, jako liniowy kąt lub kołowy radialny.