Konwerter kolorów

Jak korzystać z konwertera kolorów

1. 1. Wpisz kolor. Wklej lub wpisz go w dowolnym zapisie, który przyjmuje pole — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) albo nazwę CSS, na przykład rebeccapurple. Sama trójka 51 102 153 jest odczytywana jako RGB.
2. 2. Albo użyj pickera. Picker ustawia kolor i zachowuje przezroczystość, którą już wpisałeś.
3. 3. Skopiuj to, czego potrzebujesz. Każdy zapis ma własny przycisk kopiowania, a Kopiuj CSS daje wartości HEX, RGB, HSL i OKLCH jako właściwości niestandardowe do arkusza stylów.
4. 4. Sprawdź nazwę. Narzędzie pokazuje słowo kluczowe CSS, gdy twój kolor jest dokładnie jednym z nich (rebeccapurple to #663399), a najbliższe słowo kluczowe, gdy nie jest.

Jak działają przeliczenia

Wszystko przelicza się przez sRGB, przestrzeń barw, w której przeglądarka maluje. Kod HEX to po prostu RGB zapisane w systemie szesnastkowym: #336699 to czerwony 0x33 = 51, zielony 0x66 = 102, niebieski 0x99 = 153. Pozostałe zapisy porządkują te same trzy liczby.

• HSL opisuje kolor jako odcień (kąt na kole barw, 0–360°), nasycenie i jasność. Przy największym kanale max i najmniejszym min (każdy podzielony przez 255) jasność to (max + min) ÷ 2, a nasycenie to (max − min) ÷ (1 − |2L − 1|). Odcień zależy od tego, który kanał jest największy.
• HSV (zwany też HSB) zachowuje ten sam odcień, ale mierzy wartość jako max, a nasycenie jako (max − min) ÷ max. To model, który rysuje większość pickerów kolorów.
• HWB to biel (min) i czerń (1 − max) dodane do czystego odcienia; łatwiej nim rozumować niż HSL, gdy chcesz uzyskać jaśniejszy lub ciemniejszy wariant. Jeśli biel i czerń razem dają 100%, wynikiem jest szarość.
• CMYK pokazywany jest jako prosta konwersja urządzeniowa: K = 1 − max, a każdy z C, M i Y to (1 − kanał − K) ÷ (1 − K). Nie uwzględnia farb, papieru ani profilu.
• OKLCH to jasność, chroma i odcień w przestrzeni OKLab Björna Ottossona, którą CSS Color 4 obsługuje jako oklch(). Równe kroki w L wyglądają znacznie bliżej równym krokom jasności niż w RGB czy HSL.

Dlaczego CMYK tutaj nie jest kolorem druku

Ekrany dodają światło w barwach czerwonej, zielonej i niebieskiej; drukarki nanoszą na papier farby cyjan, magenta, żółtą i czarną. Gamuty obu są różne, a farba na stronie zależy od papieru, prasy i profilu ICC, który je opisuje. Formuła oparta wyłącznie na RGB nie może znać żadnej z tych rzeczy, więc CMYK powyżej jest zapisem, a nie przewidywaniem: czysty ekranowy niebieski #0000ff staje się 100% cyjanu i 100% magenty, co drukuje się jako bardziej matowy fiolet. Przy plakacie lub drukowanym rysunku przekaż drukarni grafikę w RGB i poproś o ich profil albo przelicz z tym profilem w aplikacji graficznej.

Zaokrąglanie, przycinanie i przezroczystość

• Zaokrąglanie. HEX i rgb() przechowują liczby całkowite od 0 do 255, więc kolor wpisany jako hsl(210 50% 41%) zostaje zaokrąglony do najbliższej wartości 8-bitowej. Przeliczenie tej wartości z powrotem daje nieco inny HSL — siatka 8-bitowa jest grubsza niż siatka HSL.
• Kanały poza zakresem. Wartości spoza zakresu są przycinane, tak jak robią to przeglądarki: rgb(300 0 0) to #ff0000, a ujemny kanał staje się 0.
• Jednostki odcienia. Akceptowane są deg, grad, rad i turn, a odcień zawija się: −150° to to samo co 210°.
• Kanał alfa. #rrggbbaa, #rgba i / 50% działają. Alfa jest zapisywana na 8 bitach w 8-cyfrowym HEX, więc 50% staje się 80 i odczytuje się jako 50,2%.

Najczęstsze pytania

Jak przeliczyć HEX na RGB?

Podziel sześć cyfr na trzy pary i odczytaj każdą parę jako liczbę szesnastkową: #336699 to 33, 66 i 99, czyli 51, 102 i 153. Wklej kod HEX do pola, a wartość RGB pojawi się od razu, wraz z HSL, HWB, HSV, CMYK i OKLCH.

Czym różni się HSL od HSV?

Oba używają tego samego kąta odcienia. HSL daje biel przy pełnej jasności niezależnie od nasycenia, więc jego środek to czysty kolor; HSV daje czysty kolor przy pełnej wartości i nasyceniu, a biel przy zerowym nasyceniu. HSL to to, co CSS obsługuje jako hsl(), a HSV (lub HSB) to to, co wyświetla większość pickerów kolorów.

Czy wartość CMYK jest dokładna do druku?

Nie. To naiwna konwersja z RGB bez farb, papieru i profilu ICC, więc opisuje te same liczby inaczej, zamiast przewidywać, co wydrukuje prasa. Kolory spoza gamutu drukarki, na przykład jaskrawe ekranowe niebieskie i zielone, wydrukują się bardziej matowo. Do wszystkiego, co jest ważne, użyj profilu swojej drukarni.

Co oznacza najbliższa nazwa CSS?

CSS definiuje 148 słów kluczowych kolorów. Jeśli twój kolor jest dokładnie jednym z nich, narzędzie pokazuje go bez zastrzeżeń. W przeciwnym razie pokazuje słowo kluczowe najbliższe w OKLab — przestrzeni zbudowanej tak, aby odległość odpowiadała postrzeganej różnicy. To przydatne do nazwania koloru w komentarzu, a nie jako zamiennik kodu.

Dlaczego moja wartość HSL nieznacznie zmienia się po przeliczeniu w obie strony?

HEX i RGB przechowują każdy kanał jako jedną z 256 wartości, a HSL nie odwzorowuje się jeden do jednego na tę siatkę. Kolor wpisany w HSL jest zaokrąglany do najbliższej wartości RGB, a pokazywany HSL jest obliczany z zaokrąglonej wartości. Startując od kodu HEX, każde przeliczenie jest dokładne do wyświetlanej precyzji.

Czy dane o kolorze są gdzieś wysyłane?

Nie. Przeliczenie to zwykła arytmetyka w przeglądarce; nic, co wpiszesz, nie jest przesyłane ani zapisywane.