Konwerter kolorów za darmo
Konwertuj kolory między formatami HEX, RGB, HSL, HSV i CMYK natychmiastowo. Zawiera skalę jasności i gotowe próbki kolorów.
Konwertuj kolor między formatami HEX, RGB, HSL, HSV i CMYK — z podglądem na żywo i kopią jednym dotknięciem. Wszystko działa w Twojej przeglądarce.
Akceptuje: HEX (#fff lub #ffffff), RGB (255, 255, 255) lub HSL (360, 100%, 50%)
Kontrast WCAG
Na białym tle
2,49:1
Na czarnym tle
8,44:1
Skala jasności
Kliknij próbkę, aby przełączyć na ten odcień
Typowe zastosowania
- Konwertuj Kolory dla Projektowania StronUzyskaj wartości HEX, RGB i HSL dla każdego koloru — gotowe do wklejenia do CSS lub Tailwind.
- Konwertuj Kolory do Druku (CMYK)Konwertuj kolory ekranu (HEX/RGB) na wartości CMYK do użytku w projektach druku i profesjonalnym drukowaniu.
- Buduj Palety Kolorów dla Systemów ProjektowaniaKonwertuj kolory marki na wszystkie formaty i generuj spójne skale jasności dla kompletnego systemu projektowania.
- Sprawdzaj Kontrast Kolorów dla DostępnościKonwertuj kolory, aby uzyskać wartości RGB do użytku w narzędziach współczynnika kontrastu - zgodność WCAG dla dostępnego projektowania.
- Konwertuj Kolory do FigmaUzyskaj dokładne wartości HEX i RGB do wklejenia w selektor kolorów Figma i systemach tokenów projektowania.
Jak to działa
Cała logika konwersji to ręcznie napisany JavaScript działający w całości w przeglądarce — bez biblioteki i wywołań serwera. Narzędzie parsuje dane wejściowe, przepuszcza je przez łańcuch czystych funkcji matematycznych i jednocześnie tworzy jedenaście formatów wyjściowych, w tym nowoczesne przestrzenie CSS Color 4 oklch() i lab().
- 1Elastyczne parsowanie danychWłasny parser akceptuje hex (3, 4, 6 lub 8 cyfr), rgb()/rgba(), hsl()/hsla() zarówno w starszej składni z przecinkami, jak i nowoczesnej ze spacjami, oraz same trójki liczb. Wartości alfa podane jako ułamki dziesiętne lub procenty są normalizowane do zakresu 0–1 przed rozpoczęciem konwersji.
- 2RGB jako centrum konwersjiKażdy akceptowany format jest najpierw sprowadzany do kanonicznej trójki RGB. Z tej jednej reprezentacji narzędzie rozchodzi się dalej: HSL i HSV korzystają ze standardowych wzorów min/max/chroma; CMYK wyznacza się przez znalezienie kanału kluczowego; a linearyzacja sRGB (odcinkowa krzywa gamma zdefiniowana w IEC 61966-2-1) jest stosowana przed obliczeniami w przestrzeniach percepcyjnych.
- 3Percepcyjne przestrzenie barw obliczane od podstawoklch() jest obliczane z użyciem referencyjnych macierzy 3×3 Björna Ottossona (przestrzeń LMS z pierwiastkiem sześciennym). lab() i lch() używają adaptacji chromatycznej Bradforda do przejścia z punktu bieli D65 na D50, co odpowiada definicji lab() w CSS Color 4. To te same wzory, których używają silniki renderujące przeglądarek — zaimplementowane tu bez żadnych zewnętrznych zależności.
- 4Kontrast WCAG i skala jasnościLuminancja względna jest obliczana według wzoru WCAG 2.1 (zlinearyzowane R, G, B ważone 0,2126/0,7152/0,0722), a współczynnik kontrastu względem bieli i czerni jest oceniany jako AA-duży, AA, AAA lub niezgodny. Dziewięciostopniowy pasek jasności powstaje przez zmianę kanału jasności HSL od 10% do 90% — kliknij dowolną próbkę, aby przeliczyć ten odcień.
Powiązane narzędzia
Selektor kolorów i generator palet
Wybieraj kolory, konwertuj HEX/RGB/HSL i generuj harmonijne palety.
Generator losowych kolorów
Generuj losowe kolory pojedynczo lub jako paletę pięciu, zablokuj te, które Ci się podobają, kopiuj wartości HEX, RGB lub HSL i eksportuj paletę jako PNG lub CSS.
Generator palet kolorów
Generuj komplementarne, analogiczne, triadyczne i monochromatyczne palety kolorów z dowolnego koloru bazowego. Kopiuj kody hex jednym kliknięciem.