Co oznaczają te wszystkie formaty kolorów?

Kolor na ekranie to mieszanka czerwonego, zielonego i niebieskiego światła, a każdy format zapisuje tę mieszankę na swój sposób. CSS i narzędzia do projektowania używają kodów HEX i wartości RGB. HSL, HSV i HWB opisują kolor za pomocą jego odcienia, czyli kąta na kole barw, oraz nasycenia i jasności, co ułatwia ręczne dostosowywanie. CMYK określa ilości tuszu cyjanowego, magentowego, żółtego i czarnego używane w druku. LAB, LCH, OKLab i OKLCH zaprojektowano tak, by równe zmiany ich wartości wyglądały dla oka na mniej więcej jednakowe. Ułatwia to tworzenie palet i gradientów, a nowoczesny CSS obsługuje wszystkie cztery formaty. Terminale używają kodów kolorów ANSI, a CSS ma również nazwy kolorów, takie jak tomato.

Oto ten sam pomarańczowy kolor w każdym formacie:

Format Przykład Co oznaczają wartości
HEX #ff6600 Czerwony, zielony i niebieski, każdy zapisany jako dwie cyfry szesnastkowe
RGB rgb(255, 102, 0) Czerwony, zielony i niebieski w zakresie od 0 do 255
HSL hsl(24, 100%, 50%) Odcień, nasycenie i jasność
HSV hsv(24, 100%, 100%) Odcień, nasycenie i wartość; format znany również jako HSB
HWB hwb(24 0% 0%) Odcień, udział bieli i udział czerni
CMYK cmyk(0%, 60%, 100%, 0%) Tusz cyjanowy, magentowy, żółty i czarny
LAB lab(62.31, 55, 71.33) Jasność CIE, oś od zieleni do czerwieni i oś od niebieskiego do żółtego
LCH lch(62.31, 90.07, 52.36) Jasność CIE, chroma i odcień
OKLab oklab(69.58% 0.1482 0.1406) Jasność i dwie osie koloru, podobnie jak w LAB
OKLCH oklch(69.58% 0.2043 43.49) Jasność, chroma i odcień w OKLab
XYZ xyz(46, 30.77, 3.52) Przestrzeń barw CIE XYZ, na której opiera się LAB
HCG hcg(24, 100%, 0%) Odcień, chroma i poziom szarości
Nazwa koloru orangered Najbliższy kolor z nazwą CSS
ANSI 16 91 Kod terminala odpowiadający jednemu z 16 podstawowych kolorów
ANSI 256 208 Kod terminala odpowiadający jednemu z 256 kolorów
RGB AppleScript {65535, 26214, 0} Czerwony, zielony i niebieski w zakresie od 0 do 65535, zgodnie z zapisem AppleScript
Skala szarości gray(46.7%) Jasność w zakresie od 0% do 100%

Opis narzędzia

To narzędzie konwertuje kolory między tymi 17 formatami i wyświetla próbkę koloru pod wynikiem. Wszystkie dostępne tu konwertery kolorów działają tak samo — od ogólnego konwertera kolorów po konwertery dla pojedynczej pary formatów, takie jak HEX na RGB, RGB na CMYK czy HEX na nazwę koloru. Narzędzie otwiera się z formatami wskazanymi w jego nazwie, a menu Źródło i Cel pozwalają wybrać dowolne inne formaty. Wklej kolor, a wynik pojawi się podczas pisania i będzie gotowy do skopiowania. Gdy jako źródło wybrano opcję Wykryj automatycznie — domyślne ustawienie konwertera kolorów — narzędzie rozpoznaje format na podstawie sposobu zapisu koloru. Przycisk zamiany odwraca kierunek konwersji.

Przykłady

Dane wejściowe Cel Wynik
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Nazwa koloru tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Co można wkleić

  • Kody HEX składające się z 3, 4, 6 lub 8 cyfr, z # lub bez. Czwarta cyfra lub ostatnia para określa krycie.
  • Funkcje, takie jak rgb(), hsl() lub oklch(), z wartościami oddzielonymi przecinkami lub spacjami i opcjonalnym kryciem podanym jako czwarta wartość albo po ukośniku: rgba(37, 99, 235, 0.5) lub rgb(37 99 235 / 50%).
  • Wartości procentowe czerwieni, zieleni i niebieskiego, jak w rgb(100%, 40%, 0%), oraz odcienie w jednostkach deg, rad, grad lub turn, jak w hsl(0.5turn, 100%, 50%).
  • Zwykłe liczby bez nazwy funkcji, takie jak 255, 102, 0. Funkcja Wykryj automatycznie interpretuje trzy liczby jako RGB lub jako HSL, jeśli dwie ostatnie są wartościami procentowymi, a cztery liczby jako CMYK, chyba że wyglądają na wartości RGB z kryciem.
  • Nazwy kolorów zapisane dowolną kombinacją wielkich i małych liter, ze spacjami lub bez: działa na przykład Rebecca Purple.
  • Wartości HSB zapisane jako hsb() oraz kolory AppleScript w nawiasach klamrowych, na przykład {65535, 26214, 0}.

Jak to działa

Obliczenia wykonuje color-convert, biblioteka JavaScript służąca do konwersji kolorów.

  • Krycie jest zachowywane w formatach HEX, RGB, HSL, HWB, OKLab i OKLCH, które mogą je zapisywać. Pozostałe formaty je pomijają.
  • LAB, LCH i XYZ to wartości CIE z bielą odniesienia D65. CSS lab() i lch() używają bieli odniesienia D50, dlatego ich wartości nieco się różnią.
  • LAB, LCH, OKLab i OKLCH mogą opisywać kolory, których ekrany nie są w stanie wyświetlić. Przy konwersji do HEX, RGB lub innego formatu ekranowego składowe koloru są ograniczane do zakresu od 0 do 255, dlatego oklch(70% 0.3 145) zmienia się w #00c800.
  • Wynik w postaci nazwy koloru to najbliższy kolor spośród tych, które mają nazwy w CSS, więc jest dokładny tylko dla kolorów posiadających nazwę: #ff6600 daje orangered, czyli #ff4500.
  • Wyniki ANSI 16 i ANSI 256 są przybliżone, ponieważ te palety obejmują tylko 16 lub 256 kolorów. Wyniki ANSI 16 to kody kolorów pierwszego planu z zakresów od 30 do 37 i od 90 do 97. Kody tła z zakresów od 40 do 47 i od 100 do 107 są interpretowane jako te same kolory.
  • Wartości CMYK są obliczane według podstawowego wzoru, bez profilu kolorów drukarki, dlatego wartości CMYK dla tego samego koloru mogą różnić się w drukarni.
  • Skala szarości to średnia wartości czerwieni, zieleni i niebieskiego.

Wskazówki

  • Wyniki w formatach HEX, RGB, HSL, HWB, OKLab i OKLCH oraz wyniki w postaci nazw kolorów są poprawnym kodem CSS, więc można je bez zmian wkleić do arkusza stylów.
  • Funkcja Wykryj automatycznie odczytuje trzycyfrową liczbę, taką jak 208, jako krótki kod HEX, dlatego w przypadku kodów terminala wybierz jako źródło ANSI 256 lub ANSI 16.
  • HSV i HSB to dwie nazwy tego samego modelu.