Mieszalnik kolorów

Generuj postrzegalnie jednolite skale gradientów między dwoma kolorami lub mieszaj z semantyką subtraktywną.

Kolor A

Kolor B

Kroki7

Skala mieszania

#E639460%#CD4D6617%#B3588133%#995E9950%#7E61AF67%#5F60C583%#3B5BDB100%

linear-gradient(90deg, #E63946 0%, #CD4D66 17%, #B35881 33%, #995E99 50%, #7E61AF 67%, #5F60C5 83%, #3B5BDB 100%)

Interpolacja w przestrzeni OKLab: odcień podąża za wizualnie jednolitą ścieżką — czerwony + niebieski daje fiolet zamiast błotnistej szarości, bez martwej strefy pośredniej.

Miksuj w trzech krokach: wybierz dwa kolory, wybierz algorytm, odczytaj skalę.

Percepcyjnie jednolity ramp między dowolnymi dwoma kolorami — regulowana gęstość, gradient CSS jednym kliknięciem.

01
Ustaw oba punkty końcowe
Wybierz kolor dla A i B (przy użyciu selektora kolorów lub bezpośredniego wpisu HEX); przycisk zamiany wymienia punkty końcowe jednym kliknięciem.
02
Wybierz algorytm
Tryb percepcyjny interpoluje w OKLab, więc nawet pary komplementarne zachowują przejście odcienia; tryb RGB odtwarzaje naiwne mieszanie z większości oprogramowania — porównaj oba, aby zobaczyć różnicę.
03
Skopiuj lub kontynuuj eksplorację
Przeciągnij suwak kroków, aby dostosować gęstość skali (3-15), skopiuj pełny gradient CSS lub kliknij dowolny kolor pośredni, aby otworzyć jego profil.

FAQ dotyczące mieszania kolorów

Trzy najczęstsze pytania dotyczące algorytmów mieszania.

Mieszanie percepcyjne vs RGB – na czym polega różnica?: Mieszanie RGB interpoluje kanały czerwony/zielony/niebieski liniowo, więc pary komplementarne (czerwony+cyjan, niebieski+żółty) przechodzą przez szarą martwą strefę pośrodku. Mieszanie percepcyjne interpoluje w OKLab, gdzie jasność i odcień podążają wizualnie jednolitym ścieżką – czerwony + niebieski daje fiolet zamiast matowej szarości.
Co oznacza odejmowanie A−B?: Każdy kanał A minus odpowiadający kanał B (ograniczony do 0), naśladując sposób, w jaki pigmenty ciemnieją po zmieszaniu – ta sama semantyka co notacja a−b w ColorHexa. Zwraca pojedynczy wynik, a nie skalę.
Co oznacza #b= w adresie URL?: Każda regulacja synchronizuje się z linkiem (oba punkty końcowe, liczba kroków i algorytm). Skopiuj pasek adresu, aby udostępnić dokładne mieszanie; każdy, kto go otworzy, zobaczy tę samą skalę.

Po mieszaniu

Przenieś skalę do studia gradientów, aby dodać więcej przystanków, lub otwórz koło kolorów, aby budować harmonie z wymieszanego koloru.

Kreator gradientów

Percepcyjnie jednolite gradienty OKLCH, bez szarych pasm, eksport CSS jednym kliknięciem.

Koło kolorów

Przeciągnij koło, aby wybrać bazę, otrzymaj na żywo sześć schematów harmonii, otwórz w tablicy lub eksportuj PNG.

Generator odcieni

Dowolny kolor na skalę systemu projektowego z 11 krokami, perceptualnie równomierną w OKLCH, kontrast WCAG na każdym kroku, eksport do Tailwind/CSS/SCSS/JSON.

Miksuj w trzech krokach: wybierz dwa kolory, wybierz algorytm, odczytaj skalę.

Percepcyjnie jednolity ramp między dowolnymi dwoma kolorami — regulowana gęstość, gradient CSS jednym kliknięciem.

Ustaw oba punkty końcowe

Wybierz kolor dla A i B (przy użyciu selektora kolorów lub bezpośredniego wpisu HEX); przycisk zamiany wymienia punkty końcowe jednym kliknięciem.

Wybierz algorytm

Tryb percepcyjny interpoluje w OKLab, więc nawet pary komplementarne zachowują przejście odcienia; tryb RGB odtwarzaje naiwne mieszanie z większości oprogramowania — porównaj oba, aby zobaczyć różnicę.

Skopiuj lub kontynuuj eksplorację

Przeciągnij suwak kroków, aby dostosować gęstość skali (3-15), skopiuj pełny gradient CSS lub kliknij dowolny kolor pośredni, aby otworzyć jego profil.

FAQ dotyczące mieszania kolorów

Trzy najczęstsze pytania dotyczące algorytmów mieszania.

Mieszanie percepcyjne vs RGB – na czym polega różnica?

Mieszanie RGB interpoluje kanały czerwony/zielony/niebieski liniowo, więc pary komplementarne (czerwony+cyjan, niebieski+żółty) przechodzą przez szarą martwą strefę pośrodku. Mieszanie percepcyjne interpoluje w OKLab, gdzie jasność i odcień podążają wizualnie jednolitym ścieżką – czerwony + niebieski daje fiolet zamiast matowej szarości.

Co oznacza odejmowanie A−B?

Każdy kanał A minus odpowiadający kanał B (ograniczony do 0), naśladując sposób, w jaki pigmenty ciemnieją po zmieszaniu – ta sama semantyka co notacja a−b w ColorHexa. Zwraca pojedynczy wynik, a nie skalę.

Co oznacza #b= w adresie URL?

Każda regulacja synchronizuje się z linkiem (oba punkty końcowe, liczba kroków i algorytm). Skopiuj pasek adresu, aby udostępnić dokładne mieszanie; każdy, kto go otworzy, zobaczy tę samą skalę.