HEX, RGB i HSL
Wpisz kolor w dowolnym zapisie, a pozostałe pola uzupełnią się same. Wszystkie trzy pola są ze sobą zsynchronizowane.
Jak to wygląda
Tekst na białym · 3,89
Tekst na czarnym · 5,39
- HEX#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanały
- Czerwony224
- Zielony82
- Niebieski31
- Barwa16°
- Nasycenie76%
- Jasność50%
Skala jasności
Ta sama barwa i nasycenie, z jasnością od 10 do 90%. Kliknij próbkę, aby ją wybrać.
Jak to działa
HEX to to samo co RGB, tylko zapisane szesnastkowo. Każda para znaków to jeden kanał, od 00 do ff, czyli od 0 do 255.
Trzyznakowy skrót podwaja każdy znak. #f30 oznacza #ff3300, dlatego w ten sposób da się zapisać tylko 4096 z 16,7 mln kolorów.
HSL opisuje te same kolory za pomocą barwy, nasycenia i jasności zamiast trzech źródeł światła. Barwa to kąt na kole barw, gdzie 0 to czerwień, 120 zieleń, a 240 niebieski.
Z HSL łatwiej się pracuje, gdy potrzebujesz wariantów jednego koloru. Zachowaj barwę i nasycenie, zmieniaj tylko jasność, a dostaniesz spójną skalę.
Przeliczenie między RGB a HSL jest dokładne w obie strony, ale zaokrąglanie HSL do pełnych stopni i procentów może przesunąć kanał o jeden stopień przy przeliczaniu tam i z powrotem.
Jak przelicza narzędzie
Przy przejściu z RGB na HSL każdy kanał jest najpierw dzielony przez 255. Jasność L to średnia największego i najmniejszego kanału. Nasycenie S to różnica między nimi podzielona przez 1 − |2L − 1|. Barwa H zależy od tego, który kanał jest największy, i jest podawana w stopniach. Przeliczenie w drugą stronę korzysta z tego samego koła barw podzielonego na sześć wycinków, a kanały są zaokrąglane do liczb całkowitych. Wiersze HEX, RGB i HSL pokazują liczby całkowite, a odcienie na dole są liczone z wartości niezaokrąglonych.
Przykład
#1e90ff to czerwony 30, zielony 144 i niebieski 255, czyli 0,118, 0,565 i 1. Największa wartość to 1, a najmniejsza 0,118, więc L = (1 + 0,118) / 2 = 0,559, czyli 55,9%. Różnica 0,882 podzielona przez 1 − |2 × 0,559 − 1| = 0,882 daje S = 1, czyli 100%. Największy jest niebieski, więc H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 stopnia.
Narzędzie zapisuje ten kolor jako hsl(210, 100%, 56%). Wpisz ten tekst, a dostaniesz #1f8fff, a nie #1e90ff, bo zaokrąglenie do pełnych stopni i procentów przesunęło czerwony i zielony o jeden krok.
Jasność HSL to nie jasność postrzegana
CSS Color 4 zwraca uwagę, że żółty i niebieski mają jasność HSL 50%, a mimo to żółty wygląda na znacznie jaśniejszy. Pokazują to też współczynniki kontrastu w samym narzędziu: hsl(60, 100%, 50%) daje względem bieli 1,07, a hsl(240, 100%, 50%) daje 8,59. Odcienie pod kolorem zachowują barwę i nasycenie i zmieniają tylko jasność, co 10 punktów procentowych. Pasują do siebie barwą, ale kolejne kroki nie wyglądają na równe.
Co narzędzie odczytuje
Pola działają według CSS Color 4: HEX z trzema, czterema, sześcioma lub ośmioma znakami, rgb() z liczbami albo procentami, gdzie 100% to 255, oraz hsl() z barwą w stopniach albo w jednostkach deg, rad, grad i turn. Wartości można oddzielać przecinkami lub spacjami. Zapis rgb(50%, 50%, 50%) staje się więc rgb(128, 128, 128), a hsl(0.5turn, 100%, 50%) dostaje barwę 180 stopni, czyli #00ffff.
Przezroczystość, zapisana w HEX z czterema lub ośmioma znakami, jako czwarta wartość albo po ukośniku, jest pomijana: narzędzie pracuje na kolorach kryjących i podaje, ile jej było. Wartości spoza zakresu, np. rgb(300, 0, 0), są odrzucane, żeby literówka była widoczna, choć CSS by je przyciął.