Mikser kolorów — Mieszanie dwóch kolorów

Połącz dwa kolory ekranowe

Mieszanie kolorów przydaje się, gdy potrzebujesz stanu hover pomiędzy dwoma tokenami, środka gradientu, koloru przejściowego na wykresie albo szybkiego sprawdzenia, jak dwa kolory marki do siebie pasują. Ten mikser kolorów łączy dwa wybrane kolory, interpolując ich kanały czerwony, zielony i niebieski. Przesuń suwak proporcji w stronę koloru B, aby zwiększyć jego udział, a następnie skopiuj wynik jako HEX, RGB lub HSL do CSS, dokumentacji albo design tokenów.

Mieszanie RGB opisuje sposób, w jaki ekrany łączą światło. Dzięki temu świetnie sprawdza się w pracy przy stronach internetowych, ale nie jest tym samym co mieszanie farb czy tuszów: środek między niebieskim a żółtym na ekranie nie zachowuje się jak ta sama mieszanka fizycznych pigmentów. W projektowaniu interfejsów mieszanie RGB jest jednak praktyczne, ponieważ przeglądarka ostatecznie wyświetla kolory jako wartości ekranowe. Podgląd aktualizuje się natychmiast, więc możesz ocenić wynik przed skopiowaniem.

Proporcje w projektowaniu interfejsów

Proporcja określa równowagę między dwoma kolorami wejściowymi. Przy 0 procent wynikiem jest kolor A, przy 100 procent — kolor B. Wartości w okolicach 10–25 procent są często przydatne dla subtelnych stanów hover lub zabarwionych powierzchni, ponieważ oryginalny kolor nadal dominuje. Wartości zbliżone do 50 procent lepiej sprawdzają się w paletach przejściowych, środkach gradientów i skalach kolorów na wykresach. Jeśli wynik wygląda blado, zwiększ później nasycenie w HSL lub wybierz kolory źródłowe o większej różnicy.

Kopiowanie niezawodnych tokenów kolorów

Gdy znajdziesz przydatną mieszankę, skopiuj format najlepiej pasujący do Twojego procesu pracy. HEX jest zwięzły przy przekazywaniu projektu, RGB przydaje się, gdy potrzebujesz wartości kanałów lub nakładek z alfą, a HSL łatwiej dostosować pod względem odcienia, nasycenia lub jasności po zmieszaniu. Ponieważ narzędzie działa lokalnie, możesz bezpiecznie eksperymentować z niepublikowanymi paletami marki lub kolorami klientów. Zawsze testuj finalny kolor w kontekście, zwłaszcza gdy ma znaleźć się za tekstem lub obok ważnych kolorów statusu.