Jak używać
- Wpisz lub wklej kolor, na przykład #1e90ff, rgb(30 144 255) lub oklch(65% 0.18 250). Możesz też kliknąć próbnik kolorów.
- Sprawdź próbkę, aby upewnić się, że kolor jest zgodny z oczekiwaniami.
- Skopiuj z listy potrzebny format. Wartości z przezroczystością zachowują kanał alfa.
Jak to działa
Akceptowane dane wejściowe: HEX zawierający 3, 4, 6 lub 8 cyfr (4. i 8. cyfra oznaczają kanał alfa), rgb() i rgba() z liczbami lub wartościami procentowymi, hsl() i hsla(), hwb(), oklch() oraz cmyk() z wartościami procentowymi lub liczbami od 0 do 100. Działa zarówno klasyczna składnia z przecinkami, jak i nowoczesna składnia ze spacjami oraz „/ alpha”. Kąt barwy może być podany w deg, turn, rad lub grad. Nazwy kolorów, takie jak „tomato”, nie są obsługiwane — użyj próbnika lub kodu.
Wszystkie konwersje odbywają się w przestrzeni sRGB. HSL i HWB to proste przekształcenia wartości RGB, dlatego konwersje między nimi są dokładne. OKLCH to percepcyjna przestrzeń barw: równe zmiany jasności są postrzegane jako w przybliżeniu jednakowe różnice, co ułatwia tworzenie palet. Wartości są obliczane przy użyciu opublikowanych macierzy OKLab. Niektórych kolorów OKLCH nie da się wyświetlić w sRGB — narzędzie informuje o tym i pokazuje najbliższy kolor możliwy do wyświetlenia.
CMYK jest obliczany za pomocą popularnego uproszczonego wzoru (K = 1 − największy kanał RGB). Rzeczywisty efekt druku zależy od papieru, tuszu i profilu ICC, dlatego traktuj te wartości jako punkt wyjścia, a nie specyfikację do druku.
Przykłady
Od kodu HEX marki do CSS
W przewodniku po stylu podano kolor #0b5d1e. Wklej go, aby uzyskać rgb(11, 93, 30) do starszych wersji CSS, hsl(133.9, 78.8%, 20.4%) do ręcznej zmiany jasności oraz wartość oklch() do nowoczesnych funkcji kolorów CSS.
Odczytywanie koloru z przezroczystością
rgba(0, 0, 0, 0.5) zostaje przekształcone na #00000080. Ostatnie dwie cyfry kodu HEX (80) oznaczają kanał alfa: 128 z 255, czyli około 50%.
Sprawdzanie wartości OKLCH z pliku projektu
oklch(70% 0.4 150) to bardzo nasycona zieleń, której nie mogą wyświetlić ekrany sRGB. Narzędzie oznacza taki kolor i podaje najbliższy kolor sRGB, dzięki czemu wiesz, że na większości ekranów projekt będzie wyglądać inaczej.
Często zadawane pytania
Dlaczego konwersja do HSL i z powrotem czasami zmienia kod HEX o jeden?
HEX zapisuje każdą składową jako liczbę całkowitą z zakresu od 0 do 255. Wartości w innych formatach są zaokrąglane na potrzeby wyświetlania (HSL do jednego miejsca po przecinku), więc po ponownej konwersji zaokrąglonej wartości wynik może różnić się o jeden. Jeśli potrzebujesz dokładnej wartości początkowej, skopiuj HEX.
Czy wartość CMYK nadaje się do druku?
Nie, nie bez dodatkowych informacji. Wartość jest obliczana za pomocą uproszczonego wzoru, bez profilu kolorów. Drukarki korzystają z profili, takich jak FOGRA lub GRACoL, które dają inne wartości. Zapytaj drukarnię lub wykonaj konwersję w aplikacji zarządzającej kolorami.
Czym jest OKLCH i czy można go używać w CSS?
OKLCH opisuje kolor za pomocą postrzeganej jasności, chromy (intensywności koloru) i kąta barwy. Obecne wersje głównych przeglądarek obsługują oklch() w CSS. Jeśli obsługujesz starsze przeglądarki, dodaj wartość zastępczą HEX lub rgb().
Co oznacza 8-cyfrowy kod HEX?
#RRGGBBAA: ostatnie dwie cyfry oznaczają krycie, od 00 (całkowicie przezroczysty) do ff (całkowicie nieprzezroczysty). W 4-cyfrowym zapisie #RGBA działa to tak samo, ale każda składowa ma jedną cyfrę.
Prywatność
Kolory są konwertowane w przeglądarce. Wprowadzone dane nie są nigdzie wysyłane ani przechowywane.