Konwerter kolorów

Konwerter kolorów przyjmuje jedną wartość koloru i pokazuje ją naraz we wszystkich innych popularnych formatach. Wpisz albo wklej kod HEX, wartość rgb()/rgba() lub hsl()/hsla(), a narzędzie automatycznie ją rozpozna i wylistuje odpowiadające jej wartości HEX, RGB, HSL, HSV i CMYK. Duża próbka pokazuje kolor, z szachownicą w tle, gdy kolor ma przezroczystość, a natywny selektor kolorów przeglądarki zostaje zsynchronizowany z tym, co wpiszesz.

Jakie formaty rozumie narzędzie?

Pole wejściowe akceptuje HEX w formie 3, 4, 6 lub 8-cyfrowej (więc działa zarówno #f0f, jak i #ff00ff, a formy 4 i 8-cyfrowe niosą kanał alfa), a do tego rgb()/rgba() i hsl()/hsla() zarówno w klasycznej składni z przecinkami, jak i w nowoczesnej, oddzielanej spacjami, jak rgb(255 0 0 / 0.5). Cokolwiek wklejasz, narzędzie zamienia to na cztery pozostałe formaty: HEX, RGB, HSL, HSV i CMYK. HSV i CMYK są zawsze pokazywane jako wartości nieprzezroczyste, bo żaden z tych formatów nie ma standardowego sposobu na wyrażenie przezroczystości, natomiast HEX, RGB i HSL zachowują kanał alfa i przełączają się na nazwy funkcji z końcówką „a” (rgba(), hsla()), gdy kolor nie jest w pełni nieprzezroczysty.

Oprócz konwersji narzędzie generuje też dziesięciostopniową rampę odcieni, od bardzo jasnego do bardzo ciemnego, budowaną przez zachowanie barwy i nasycenia koloru wejściowego i równomierne obniżanie jasności. To przydatne, żeby szybko wyciągnąć paletę rozjaśnień i przyciemnień z jednego koloru marki, bez otwierania programu graficznego.

Czy moje dane są gdzieś przesyłane?

Nie. Rozpoznawanie i konwersja działają w całości w przeglądarce, na zwykłej matematyce w JavaScripcie, bez żadnego kontaktu z serwerem. Kolor, który wpisujesz albo wybierasz, nigdy nie opuszcza twojego urządzenia, więc można spokojnie konwertować kolory marki z wewnętrznego systemu projektowego albo z księgi znaku klienta, nie wklejając ich do zewnętrznej strony.

Użyj go, żeby zamienić kod HEX od projektanta na wartości RGB albo HSL potrzebne w pliku CSS, sprawdzić, jak wygląda kolor z częściową przezroczystością, albo uzyskać procenty CMYK do druku z koloru wybranego na ekranie. Zobacz dokumentację typu <color> MDN, żeby poznać pełną listę notacji kolorów CSS, albo specyfikację CSS Color Module Level 4, żeby zobaczyć, jak zdefiniowana jest składnia oddzielana spacjami.