Wybrałeś kolor do swojej strony, a teraz projekt mówi HEX, ale Twój kod chce RGB. Albo zrobiłeś ładny przycisk i nie masz pewności, czy ktokolwiek przeczyta na nim tekst. Darmowe CSS i Narzędzia Kolorów GetPlugzz załatwiają jedno i drugie, plus dwie inne rzeczy: budują gradienty i generują CSS dla box-shadow i border-radius. Wszystko jest na jednej stronie, aktualizuje się na żywo podczas pisania i działa w Twojej przeglądarce, więc nie ma konta i nic nie jest wysyłane.
Cztery narzędzia w minutę
Otwórz CSS i Narzędzia Kolorów i wybierz kartę:
- Konwerter Kolorów. Wpisz kolor jako HEX, RGB albo HSL, a pozostałe dwa zaktualizują się od razu. Możesz też kliknąć próbkę, żeby wybrać kolor.
- Gradient. Wybierz kolory (możesz dodać kolejne), zdecyduj, czy liniowy, czy radialny, ustaw kąt i naciśnij Kopiuj CSS.
- Sprawdzanie Kontrastu. Wybierz kolor tekstu i tła i zobacz, czy osoby ze słabym wzrokiem to przeczytają, z wynikiem dla WCAG AA i AAA.
- Cień i Zaokrąglenie. Przesuwaj przesunięcie, rozmycie i rozprzestrzenienie, żeby zbudować box-shadow, a rogi zaokrąglij border-radius. Skopiuj CSS, gdy będzie wyglądać dobrze.
HEX, RGB i HSL: jeden kolor, trzy sposoby, żeby go nazwać
Wyobraź sobie ten sam kolor farby zapisany na trzech różnych etykietach. Farba jest ta sama, tylko przepis jest zapisany inaczej:
- HEX to krótki kod: # i sześć liter lub cyfr, jak #2563EB.
- RGB to przepis: trzy liczby mówiące, ile czerwieni, zieleni i błękitu zmieszać.
- HSL to pokrętła: odcień, nasycenie i jasność. Najłatwiej go regulować ręcznie. Chcesz ten sam kolor trochę jaśniejszy? Wystarczy przekręcić jedno pokrętło.
Projekty zwykle dają Ci jedno z nich, a Twój kod potrzebuje innego, i wtedy właśnie konwerter oszczędza Ci kilka minut.
Jak zamienić HEX na RGB
- Otwórz Konwerter Kolorów. To pierwsza karta.
- Wpisz lub wklej kod HEX w pole HEX.
- Odczytaj wynik. Wartości RGB i HSL wypełnią się same, razem z próbką.
Działa też w drugą stronę. Wpisz w dowolne z trzech pól, a pozostałe dwa pójdą za nim.
Czy Twój tekst da się naprawdę przeczytać? (problem szeptu)
Jasnoszary tekst na białym tle wygląda elegancko na Twoim ekranie. Dla kogoś ze słabym wzrokiem albo z telefonem w ostrym słońcu to szept w hałaśliwym pokoju. Sprawdzanie Kontrastu mierzy, jak bardzo różnią się kolor tekstu i tła, i mówi, czy to przechodzi.
Korzysta z WCAG, czyli Web Content Accessibility Guidelines, które ustalają minimalny kontrast, żeby tekst pozostał czytelny dla osób ze słabym wzrokiem. Są dwa poziomy: AA to standard, do którego dąży większość stron, a AAA jest surowszy. Czego potrzebujesz:
- Zwykły tekst: co najmniej 4,5:1 dla AA i 7:1 dla AAA.
- Duży tekst: 3:1 wystarczy dla AA. Duży to 18pt lub więcej, albo 14pt lub więcej pogrubiony.
Narzędzie pokazuje współczynnik i wynik dla zwykłego i dużego tekstu na obu poziomach, więc nie musisz nic liczyć.
Gradienty i cienie bez ręcznego pisania CSS
Do gradientu wybierz kolory, zdecyduj, czy liniowy, czy radialny, ustaw kąt i naciśnij Kopiuj CSS. To cała robota.
Do cienia wyobraź sobie lampę nad pudełkiem. Przesunięcie zmienia to, gdzie pada cień, większe rozmycie robi go bardziej miękkim, a rozprzestrzenienie większym. Możesz ustawić kolor i przezroczystość cienia albo zrobić go wewnętrznym. Potem zaokrąglij rogi border-radius, wszystkie naraz, i skopiuj CSS, gdy będzie wyglądać dobrze.
Kiedy naprawdę Ci się to przyda
- Projekt daje Ci kod HEX, a Twój kod chce RGB albo HSL.
- Przycisk albo nagłówek, którego czytelność tekstu chcesz sprawdzić.
- Tło strony lub karty, które potrzebuje ładnego gradientu.
- Karta, która ma odróżniać się od strony miękkim cieniem i zaokrąglonymi rogami.
- Sprawdzenie dostępności dla klienta, projektu szkolnego albo własnej strony.
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.
Często zadawane pytania
Tak. Nie ma konta i nic nie trzeba instalować.
Nie. Wszystko jest obliczane na żywo w Twojej przeglądarce.
Wpisz lub wklej kod HEX w pole HEX w Konwerterze Kolorów. Wartości RGB i HSL wypełnią się automatycznie.
Dla zwykłego tekstu celuj w co najmniej 4,5:1 (AA). Dla dużego tekstu wystarczy 3:1. Surowszy poziom AAA wymaga 7:1 dla zwykłego tekstu.
HSL to odcień, nasycenie i jasność. Łatwiej go regulować ręcznie niż HEX czy RGB, na przykład żeby rozjaśnić kolor.
Darmowe CSS i Narzędzia Kolorów — bez wysyłania, bez rejestracji
Zamieniaj kolory, buduj gradienty, sprawdzaj kontrast i generuj CSS dla cieni. Stworzone przez GetPlugzz, przetwarzane w całości w Twojej przeglądarce.
