CodeKitHubCzym jest to narzędzie?
Mieszacz kolorów interpoluje liniowo kanały czerwony, zielony i niebieski dwóch kolorów w wybranej proporcji — to ta sama matematyka, której wewnętrznie używa gradient. Przy 0% wynikiem jest Kolor A, przy 100% Kolor B, a przy 50% jest to arytmetyczna wartość środkowa każdego kanału RGB.
To coś innego niż mieszanie prawdziwej farby (które jest subtraktywne i zależy od pigmentu), i nie jest to też to samo co uśrednianie w przestrzeni HSL — liniowa interpolacja RGB to metoda używana przez gradienty CSS, narzędzia projektowe i większość narzędzi typu „kolor pomiędzy dwoma kolorami”, więc wynik odpowiada temu, co zobaczysz w gradiencie przeglądarki między tymi samymi dwoma kolorami.
Dlaczego warto go używać?
- Znajdź naturalnie wyglądający kolor stanu hover lub aktywnego, który mieści się między kolorem bazowym a akcentem — zamiast zgadywać losową korektę.
- Zobacz dokładny kod HEX przy dowolnej proporcji, zamiast szacować „na oko” ze zrzutu ekranu gradientu.
- 11-stopniowa rampa daje pełną paletę od jednego koloru do drugiego jednym kliknięciem — przydatne przy wizualizacji danych lub gradiencie wielopunktowym.
- Kliknij dowolny krok, aby natychmiast skopiować jego kod HEX.
- Za darmo, natychmiastowo i w pełni lokalnie — bez przesyłania plików, bez konta.
Jak używać
- Wybierz Kolor A i Kolor B za pomocą selektorów kolorów lub wpisując kod HEX.
- Przeciągnij suwak proporcji, aby ustawić, ile Koloru B ma zostać domieszane.
- Odczytaj wynikowe wartości HEX i RGB nad próbką koloru.
- Kliknij dowolną próbkę w 11-stopniowej rampie poniżej, aby skopiować jej kod HEX.
Przykład
Wejście
Kolor A #3B82F6 (niebieski), Kolor B #F59E0B (bursztynowy), proporcja 50%Wynik
#9B9E7D — rgb(155, 158, 125)Dokładnie przy 50% każdy kanał RGB jest arytmetyczną średnią odpowiednich kanałów dwóch kolorów wejściowych.
Najczęściej zadawane pytania
Dlaczego to się różni od tego, co uzyskałbym, mieszając prawdziwą farbę?
Mieszanie farb jest subtraktywne (pigmenty pochłaniają światło) i zależy od konkretnych użytych pigmentów — na przykład zmieszanie niebieskiej i żółtej farby daje zielony. To narzędzie miesza światło (kanały RGB) addytywnie/liniowo, w sposób, w jaki ekrany, gradienty CSS i większość cyfrowych narzędzi projektowych mieszają kolory. Te dwa systemy dają naprawdę różne wyniki z założenia, nie przez błąd.
Czy to to samo co CSS linear-gradient między dwoma kolorami?
Tak — CSS linear-gradient(kolorA, kolorB) interpoluje kanały RGB dokładnie tak samo jak to narzędzie, więc kolor widoczny w połowie takiego gradientu odpowiada wynikowi przy 50% tutaj.
Dlaczego zmieszany kolor czasem wygląda mętnie lub szaro?
Mieszanie dwóch nasyconych, ale bardzo różnych odcieni (np. niebieskiego i pomarańczowego, które są niemal komplementarne) w przestrzeni RGB często daje mało nasycony, szarawo-brązowy punkt środkowy — to naturalna cecha interpolacji RGB, a nie błąd. Jeśli zależy Ci na bardziej żywej mieszance, spróbuj mieszać kolory bliższe sobie na kole barw albo mieszaj w przestrzeni HSL, zmieniając odcień i zachowując wysokie nasycenie (czego to proste narzędzie RGB nie robi).
Czy mogę zmieszać więcej niż dwa kolory naraz?
Nie w jednym kroku — narzędzie miesza dokładnie dwa kolory. Aby połączyć trzy, zmieszaj najpierw dwa przy wybranej proporcji, skopiuj wynik i wklej go jako nowy Kolor A względem trzeciego koloru. Robienie tego etapami daje też kontrolę nad wagą, której nie zapewni proste uśrednienie trzech kolorów naraz.
Użyć tego narzędzia czy generatora odcieni kolorów?
Jeśli potrzebujesz koloru leżącego między dwoma różnymi kolorami — na przykład odcienia przejściowego między niebieskim kolorem marki a bursztynowym akcentem — użyj tego mieszacza. Jeśli potrzebujesz jaśniejszych i ciemniejszych wariantów jednego koloru (stany hover, tła, rampa w stylu Tailwind 50-900), użyj zamiast tego Generatora Odcieni Kolorów: zachowuje on stały odcień i nasycenie, zmieniając tylko jasność, dzięki czemu każdy wynik wyraźnie pozostaje w tej samej rodzinie kolorystycznej.
Jakie formaty kolorów mogę wpisać w pola tekstowe?
Pola tekstowe akceptują 6-cyfrowe kody HEX, z wiodącym # lub bez niego (np. 3B82F6 lub #3B82F6). Skrócony 3-cyfrowy zapis hex, notacja rgb() ani nazwy kolorów CSS nie są tam obsługiwane — ale każdy kolor możesz wybrać wizualnie za pomocą natywnego selektora kolorów obok pola, a pole HEX zaktualizuje się automatycznie.