Narzędzia kolorów

Próbnik: duży kwadrat to mapa nasycenie–jasność przy bieżącym odcieniu — od lewej do prawej rośnie nasycenie, od góry do dołu maleje jasność. Kliknij w dowolnym miejscu, aby wybrać kolor. Cienki pionowy pasek po prawej to suwak odcienia (0° do 360°) — przesuń go, aby zmienić odcień bazowy, a kwadrat przerysuje się odpowiednio. Po prawej stronie wybrany kolor jest pokazany w formatach HEX, RGB i HSL — kliknij dowolną wartość, aby ją skopiować.

Paleta: lewy próbnik i prawe pole edycji przechowują ten sam kolor bazowy — są zsynchronizowane w obie strony (wybierz kolor lub wpisz wartość hex, a oba się zaktualizują). Pięć wierszy palety poniżej jest wyprowadzonych z tego koloru bazowego przez obrót jego odcienia na kole barw: Dopełniające (odcień +180°, najsilniejszy kontrast), Triadyczne (+120° / +240°, zrównoważona triada), Tetradyczne (+90° / +180° / +270°, prostokątne cztery kolory), Analogiczne (-30° / baza / +30° / +60°, harmonijni sąsiedzi) oraz Dopełniające dzielone (+150° / +210°, łagodniejsze niż czyste dopełnienie). Pierwsza próbka w każdym wierszu to zawsze sam kolor bazowy, a reszta to jego warianty z obróconym odcieniem.

Konwersja: wpisz dowolny poprawny kolor — HEX (#3b82f6), funkcję CSS (rgb(59,130,246) / hsl(217,90%,60%)) lub nazwę koloru (dodgerblue) — i natychmiast otrzymaj konwersję do wszystkich głównych formatów. Lista formatów opcjonalnie podpowiada parser, gdy automatyczne wykrywanie wybierze zły format. Wynik pokazuje HEX, RGB (0-255), HSL (stopnie, %, %), HSV i CMYK. Kliknij dowolną wartość, aby ją skopiować.

Daltonizm: wgraj obraz i wybierz typ zaburzenia widzenia barw do symulacji. Narzędzie stosuje do każdego piksela transformację macierzą odpowiedzi czopków, przemapowując wartości RGB, aby przybliżyć sposób, w jaki osoby z różnymi formami daltonizmu widzą obraz. Lewe płótno pokazuje oryginał, prawe widok symulowany. Lista rozwijana obejmuje trzy dwuchromatyzmy (brak jednego barwnika czopków: protanopia, deuteranopia, tritanopia), pełną achromatopsję (brak widzenia barw) oraz trzy anomalne trójchromatyzmy (osłabiona odpowiedź czopków). Obrazy o niższej rozdzielczości ładują się szybciej.

Gradient: to wizualny kreator gradientów CSS. Wybierz liniowy (kierunkowy) lub radialny (od środka na zewnątrz), ustaw kąt (0° = od dołu do góry, 90° = od lewej do prawej) i zdefiniuj punkty kolorów. Każdy punkt ma próbnik koloru i jest równomiernie rozmieszczony (0%, 50%, 100% dla trzech punktów). Kliknij + Zatrzymaj, aby dodać pośrednie punkty kolorów przy bardziej złożonych gradientach. Podgląd aktualizuje się na żywo, a wygenerowany CSS jest gotowy do skopiowania poniżej.

Kontrast: oblicza współczynnik kontrastu WCAG 2.1 między tekstem pierwszego planu a kolorem tła, używając wzoru względnej luminancji z wartości sRGB (z korekcją gamma). Współczynnik waha się od 1:1 (identyczne kolory) do 21:1 (czerń na bieli). Wyniki pokazują zaliczenie/niezaliczenie na trzech poziomach zgodności: AA tekst zwykły (współczynnik ≥ 4,5:1), AAA tekst duży (współczynnik ≥ 4,5:1 dla tekstu ≥ 18 pkt lub pogrubionego ≥ 14 pkt) oraz AAA tekst zwykły (współczynnik ≥ 7:1). Podgląd tekstu aktualizuje się na bieżąco przy zmianie kolorów.

Wyodrębnianie: wgraj dowolny obraz, a narzędzie wyznaczy jego dominującą paletę kolorów metodą kwantyzacji. Obraz zostaje zmniejszony do 100×100 px, a każdy piksel trafia do histogramu 4 bity na kanał (16 poziomów na R/G/B = 4096 przedziałów). Piksele przezroczyste są pomijane. Najczęstsze przedziały są sortowane według liczby pikseli, a środkowy kolor każdego przedziału staje się próbką. Każda próbka pokazuje wartość HEX i procent pikseli obrazu, który reprezentuje. Suwak liczby (2–12) steruje tym, ile dominujących kolorów zostanie wyodrębnionych.

Mieszacz: miesza dwa kolory w przestrzeni RGB przez interpolację liniową. Suwak proporcji określa mieszankę: 0% to czysty Kolor 1, 100% to czysty Kolor 2, a 50% to równomierne zmieszanie. Każdy kanał R, G, B jest interpolowany niezależnie (np. czerwony + niebieski przy 50% daje fiolet). Podgląd wyniku oraz wartości HEX/RGB aktualizują się na bieżąco przy przesuwaniu suwaka lub zmianie któregokolwiek koloru.

Temperatura: konwertuje temperaturę barwową ciała doskonale czarnego w kelwinach na odpowiadający mu widzialny kolor, używając przybliżenia Tannera Hellanda. Niskie temperatury (1000–3000 K) dają ciepłe pomarańczowo-czerwone tony jak świeca i żarówka; średni zakres (4000–6500 K) daje neutralną biel do światła dziennego; wyższe temperatury (8000–40000 K) przesuwają się w chłodny błękit jak pochmurne niebo i głęboka woda. Etykieta poniżej wskazuje najbliższe rzeczywiste źródło światła dla każdej temperatury.

Nazwane: przeglądaj zbiorczą kolekcję 80 chińskich tradycyjnych kolorów (胭脂, 朱砂, 黛蓝 itp. — nazwy zaczerpnięte z klasycznej literatury, malarstwa i tradycji barwienia) oraz ponad 140 nazwanych kolorów CSS (standardowa paleta sieci). Użyj pola wyszukiwania, aby filtrować po nazwie lub wartości HEX, albo przełączaj kategorie listą rozwijaną. Kliknij dowolny kolor, aby zobaczyć duży podgląd z nazwą i kodem HEX — kliknij kod, aby go skopiować.