Konwersja kolorów
Wklej kolor w dowolnym formacie CSS i otrzymaj wszystkie pozostałe, a do tego jego kontrast.
Wklej HEX, rgb(), hsl(), hwb() lub nazwę koloru CSS albo wybierz kolor
Jaśniejsze i ciemniejsze odcienie
Wartości
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Wartość przybliżona. Kolor wydruku zależy od farb i papieru, więc o dokładne wartości zapytaj drukarnię.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Najbliższa nazwa CSS
- royalblue
Kontrast (WCAG)
Tekst w tym kolorze na każdym tle. Zwykły tekst wymaga 4,5:1 dla AA i 7:1 dla AAA; duży tekst (18 pt lub 14 pt pogrubiony) wymaga 3:1 i 4,5:1.
Na białym
Duży tekst
Pchnąć w tę łódź jeża lub ośm skrzyń fig
5.71:1
- AA zwykły spełnia
- AAA zwykły nie spełnia
- AA duży spełnia
- AAA duży spełnia
Na czarnym
Duży tekst
Pchnąć w tę łódź jeża lub ośm skrzyń fig
3.68:1
- AA zwykły nie spełnia
- AAA zwykły nie spełnia
- AA duży spełnia
- AAA duży nie spełnia
Na #ffffff
Duży tekst
Pchnąć w tę łódź jeża lub ośm skrzyń fig
5.71:1
- AA zwykły spełnia
- AAA zwykły nie spełnia
- AA duży spełnia
- AAA duży spełnia
Następny: Przezroczyste tło · Kreator wykresów
Zgłoś problem z tym narzędziem
Jak używać narzędzia Konwerter kolorów
Wpisz kolor
Wklej kod HEX, rgb(), hsl(), hwb() lub nazwę, np. tomato, albo wybierz kolor próbnikiem.
Skopiuj potrzebny format
Każdy format aktualizuje się podczas pisania. Skopiuj dowolny jego przyciskiem albo wybierz swój ulubiony format dla dużego przycisku Kopiuj.
Sprawdź kontrast
Zobacz współczynnik kontrastu WCAG na białym, na czarnym i na wybranym tle, z wynikami AA i AAA dla zwykłego i dużego tekstu.
Dlaczego warto korzystać z Utils365
Czyta każdy kolor CSS
HEX z 3, 4, 6 i 8 cyframi, rgb() i hsl() w starej składni z przecinkami lub nowej ze spacjami, hwb(), wartości procentowe, jednostki odcienia i wszystkie 148 nazw kolorów.
Także nowoczesne formaty
Otrzymaj OKLCH dla systemów projektowych i CSS z szeroką gamą kolorów, HWB i HSV dla próbników oraz HEX z kanałem alfa dla półprzezroczystych kolorów.
Dostępność w standardzie
Współczynniki kontrastu dokładnie odpowiadają WCAG 2 i nigdy nie są zaokrąglane w górę do zaliczenia, więc 4,49:1 nie przechodzi jako 4,5:1.
Jaśniejsze i ciemniejsze odcienie
Pod próbką znajduje się pięć jaśniejszych i pięć ciemniejszych stopni. Kliknij jeden, aby ustawić go jako bieżący kolor.
Często zadawane pytania
Czym różni się HEX od RGB?
Sam kolor jest ten sam. Oba podają czerwony, zielony i niebieski w zakresie od 0 do 255. HEX zapisuje każdy jako dwie cyfry szesnastkowe, więc rgb(58, 91, 217) to #3a5bd9. HEX jest krótszy, a rgb() łatwiej czytać i zmieniać ręcznie.
Czym jest HSL?
Odcień, nasycenie i jasność. Odcień to pozycja na kole barw w stopniach (0 to czerwony, 120 zielony, 240 niebieski), nasycenie określa intensywność, a jasność biegnie od czerni przy 0% do bieli przy 100%. Dzięki temu łatwo zapisać jaśniejsze, ciemniejsze lub stonowane wersje koloru.
Dlaczego CMYK nie pasuje do mojego wydruku?
Ekrany mieszają światło, a drukarki farby, a wynik zależy od farb, papieru i profilu drukarki. Pokazany CMYK korzysta z prostego standardowego wzoru, więc traktuj go jako punkt wyjścia i o dokładne wartości zapytaj drukarnię.
Czym jest współczynnik kontrastu WCAG?
Miarą tego, jak bardzo dwa kolory różnią się jasnością, od 1:1 (identyczne) do 21:1 (czarny na białym). WCAG AA wymaga co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego; AAA wymaga 7:1 i 4,5:1.
Czym jest OKLCH?
Nowszym sposobem zapisu kolorów w CSS przez jasność, chromę i odcień, opartym na tym, jak ludzie postrzegają kolor. Zmiana jasności nie zmienia wyglądu odcienia, dlatego jest popularny w systemach projektowych i skalach kolorów.
Jak działa nazwa koloru?
Jeśli kolor dokładnie odpowiada jednej ze 148 nazw kolorów CSS, wyświetlana jest ta nazwa. W przeciwnym razie otrzymasz najbliższą pod względem wyglądu – przydatne, gdy chcesz opisać kolor słowami.