Co oznaczają te wszystkie formaty kolorów?

Kolor wyświetlany 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 — kąta na kole barw — oraz nasycenia i jasności, co ułatwia ręczne dostosowywanie. CMYK określa ilości cyjanu, magenty, żółtego i czarnego tuszu używane do druku. LAB, LCH, OKLab i OKLCH zaprojektowano tak, aby równe zmiany wartości wyglądały dla oka na jednakowe, co pomaga w tworzeniu palet i gradientów; nowoczesny CSS obsługuje wszystkie cztery formaty. Terminale używają kodów kolorów ANSI, a CSS ma też nazwane kolory, takie jak tomato.

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

Format Przykład Znaczenie wartości
HEX #ff6600 Czerwony, zielony i niebieski, każdy zapisany dwiema cyframi szesnastkowymi
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 nazywany też HSB
HWB hwb(24 0% 0%) Odcień, udział bieli i udział czerni
CMYK cmyk(0%, 60%, 100%, 0%) Cyjan, magenta, żółty i czarny tusz
LAB lab(62.31, 55, 71.33) Jasność CIE, oś od zieleni do czerwieni oraz 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 barw w nowszym modelu niż LAB
OKLCH oklch(69.58% 0.2043 43.49) Jasność, chroma i odcień w modelu OKLab
XYZ xyz(46, 30.77, 3.52) Przestrzeń barw CIE 1931, na której opiera się LAB
HCG hcg(24, 100%, 0%) Odcień, chroma i udział szarości
Nazwa koloru orangered Najbliższy nazwany kolor CSS
ANSI 16 91 Kod terminala jednego z 16 podstawowych kolorów
ANSI 256 208 Kod terminala jednego z 256 kolorów
AppleScript RGB {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. Każdy dostępny tu konwerter kolorów działa tak samo — zarówno ogólny Konwerter kolorów, jak i narzędzia do konwersji pojedynczej pary, takie jak HEX na RGB, RGB na CMYK czy HEX na nazwę koloru: domyślnie ustawione są formaty wskazane w nazwie, a menu Źródło i Cel pozwalają wybrać dowolne inne. Wklej kolor, a wynik pojawi się podczas pisania i będzie gotowy do skopiowania. Jeśli jako źródło ustawiono Automatyczne wykrywanie — tak jak domyślnie w Konwerterze kolorów — narzędzie rozpozna 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 zawierające 3, 4, 6 lub 8 cyfr, z # lub bez niego. Czwarta cyfra albo ostatnia para określa krycie.
  • Funkcje takie jak rgb(), hsl() lub oklch(), z przecinkami albo spacjami między wartościami i opcjonalnym kryciem podanym jako czwarta wartość lub po ukośniku: rgba(37, 99, 235, 0.5) albo rgb(37 99 235 / 50%).
  • Wartości procentowe dla czerwonego, zielonego i niebieskiego, jak w rgb(100%, 40%, 0%), oraz odcienie zapisane w deg, rad, grad lub turn, jak w hsl(0.5turn, 100%, 50%).
  • Zwykłe liczby bez nazwy funkcji, takie jak 255, 102, 0. Automatyczne wykrywanie interpretuje trzy liczby jako RGB albo 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ą wielkością liter, ze spacjami lub bez nich: Rebecca Purple również zadziała.
  • Wartości HSB zapisane jako hsb() oraz kolory AppleScript w nawiasach klamrowych, na przykład {65535, 26214, 0}.

Jak to działa

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

  • Krycie jest zachowywane w formatach HEX, RGB, HSL, HWB, OKLab i OKLCH, które umożliwiają jego zapis. Pozostałe formaty je pomijają.
  • LAB, LCH i XYZ używają wartości CIE z białym punktem D65. Funkcje CSS lab() i lch() korzystają z białego punktu 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ć. Po konwersji do HEX, RGB lub innego formatu ekranowego kanały takiego koloru są ograniczane do zakresu od 0 do 255, więc oklch(70% 0.3 145) zmienia się w #00c800.
  • Wynikiem jest najbliższy nazwany kolor CSS, dlatego jest dokładny tylko w przypadku kolorów mających nazwę: #ff6600 daje orangered, czyli #ff4500.
  • Wyniki ANSI 16 i ANSI 256 są przybliżone, ponieważ te palety zawierają odpowiednio tylko 16 lub 256 kolorów. Wyniki ANSI 16 to kody kolorów tekstu, od 30 do 37 oraz od 90 do 97; kody tła od 40 do 47 oraz 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 podane przez drukarnię mogą się różnić.
  • Skala szarości to średnia wartości czerwonego, zielonego i niebieskiego.

Wskazówki

  • Wyniki HEX, RGB, HSL, HWB, OKLab, OKLCH i nazwy koloru są prawidłowymi wartościami CSS, więc można wkleić je bez zmian do arkusza stylów.
  • Automatyczne wykrywanie interpretuje 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.