Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Działa lokalnie w Twojej przeglądarce
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
Konwerter kolorów tłumaczy pojedynczy kolor pomiędzy HEX, RGB, HSL i HSV i pokazuje współczynnik kontrastu WCAG w stosunku do czerni i bieli, dzięki czemu można od razu sprawdzić, czy tekst w tym kolorze jest czytelny. HEX i RGB to formaty, które kopiujesz między narzędziami, ale HSL jest tym, który jest faktycznie przydatny w pracach projektowych: oddziela odcień od jasności, dzięki czemu możesz uzyskać odcień lub odcień, który zachowuje ten sam odcień, zamiast dryfować w kierunku szarości, jak robi to naiwna matematyka RGB. Ośmiocyfrowe wartości szesnastkowe i rgba zawierają kanał alfa, a konwerter również je obsługuje.
Where people use the
- Zamiana wartości szesnastkowej marki na składnię RGB, jakiej oczekuje narzędzie do projektowania.
- Produkcja spójnego zestawu odcieni z odcieni jednej marki przy użyciu HSL.
- Sprawdzenie czy kolor linku jest czytelny na ciemnym tle.
- Dopasowanie koloru wybranego ze zrzutu ekranu do najbliższej wartości szesnastkowej.
How to use the
- 1
Wprowadź kolor w dowolnym formacie
Wklej wartość szesnastkową, taką jak 2f6fed, funkcję rgb lub hsl, albo użyj selektora. Pozostałe formaty są aktualizowane w miarę pisania.
- 2
Przeczytaj wszystkie reprezentacje na raz
Hex, RGB, HSL i HSV są pokazane razem z oddzielonym kanałem alfa.
- 3
Sprawdź współczynniki kontrastu
Stosunki czerni i bieli informują, czy dany kolor nadaje się do wykorzystania jako kolor tekstu, czy jako tło. Tekst podstawowy wymaga proporcji 4,5 do 1, duży tekst i obramowania interfejsu wymagają proporcji 3 do 1.
- 4
Skopiuj formularz, którego potrzebuje Twój kod
Każde pole ma swój własny przycisk kopiowania, dzięki czemu otrzymujesz dokładnie taką składnię, jakiej oczekuje arkusz stylów, a nie ręczne formatowanie.
Wskazówki i najlepsze praktyki
- Dostosuj jasność w HSL zamiast dodawać biel lub czerń w RGB; odcień pozostaje nienaruszony.
- Przetestuj kontrast przy najmniejszym rozmiarze, w jakim tekst będzie faktycznie używany, a nie przy rozmiarze nagłówka.
- Zachowaj udokumentowaną paletę pięciu lub sześciu wartości zamiast wymyślać nową dla każdego komponentu.
Często zadawane pytania
W jaki sposób kolor szesnastkowy jest konwertowany na RGB?
Każda para cyfr szesnastkowych to jeden kanał, odczytywany jako podstawa 16. W 2f6fed 2f to 47 czerwonych, 6f to 111 zielonych, a ed to 237 niebieskich. Trzycyfrowy skrót, taki jak f0a, podwaja każdą cyfrę, więc staje się ff00aa.
Dlaczego lekkość HSL to nie to samo, co postrzegana jasność?
Ponieważ oko jest znacznie bardziej wrażliwe na kolor zielony niż na niebieski. Czysty niebieski i czysty żółty mogą mieć tę samą wartość jasności, podczas gdy żółty wydaje się znacznie jaśniejszy. Dlatego kontrast należy mierzyć za pomocą wzoru luminancji, a nie oceniać na podstawie liczby HSL.
Co oznacza czwarta para cyfr w kolorze szesnastkowym?
Alfa, od 00 całkowicie przezroczysty do ff całkowicie nieprzezroczysty. Ośmiocyfrowy format szesnastkowy jest obsługiwany we wszystkich obecnych przeglądarkach i jest szesnastkowym odpowiednikiem RGB.
Czy konwersja CMYK jest odpowiednia do druku?
Nie i żadne narzędzie przeglądarki nie może być. CMYK zależy od atramentu, papieru i profilu drukarki. Użyj tej wartości jako punktu wyjścia i przekonwertuj profil ICC swojego dostawcy usług druku na wszystko, co ma znaczenie.
Jak wybrać czytelny tekst na kolorowym tle?
Porównaj współczynnik kontrastu między kolorem tekstu a tłem. Jeżeli ani czerń, ani biel nie osiągają współczynnika 4,5 do 1, tło jest zbyt nasycone dla tekstu podstawowego i należy je przyciemnić lub rozjaśnić przed użyciem go za kopią.
Dlaczego ten sam heks wygląda inaczej na dwóch ekranach?
Ponieważ wyświetlacze różnią się gamą, kalibracją i jasnością. Szerokogamutowy ekran pokazuje nasycone kolory, których nie jest w stanie odtworzyć standardowy panel sRGB. Pracuj w trybie sRGB, chyba że masz konkretny powód, aby tego nie robić.