Blender kolorów HEX
Mieszaj dwa lub więcej kolorów HEX z kontrolą proporcji. Interpolacja w przestrzeni RGB, HSL lub LAB. Generuj palety przejść (gradients). Kopiuj wyniki HEX/RGB. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Kolor wynikowy
HEX zmieszany silnikiem z kolorów A i B
Proporcja
0% = kolor A, 100% = kolor B (silnik: t = proporcja / 100)
Tryb mieszania
sposób wcinania koloru B w kolor A przed zmieszaniem wg proporcji
Przestrzeń
liniowa = gamma-correct, jaśniejszy i naturalniejszy środek mieszanki
Kolor tekstu na tle
kontrast WCAG: 2,54:1 do bieli, 8,28:1 do czerni
| Proporcja koloru B (%) | Kolor A | Kolor B | Wynik HEX | Wynik RGB |
|---|---|---|---|---|
| 0 | #FF0000 | #0000FF | #FF0000 | rgb(255 0 0) |
| 25 | #FF0000 | #0000FF | #BF0040 | rgb(191 0 64) |
| 50 | #FF0000 | #0000FF | #800080 | rgb(128 0 128) |
| 75 | #FF0000 | #0000FF | #4000BF | rgb(64 0 191) |
| 100 | #FF0000 | #0000FF | #0000FF | rgb(0 0 255) |
Przestrzeń RGB a percepcja: sRGB miesza wartości kanałów „po gamma”, więc środek drogi między czystą czerwienią a niebieskim wygląda ciemniej, niż podpowiada intuicja. Opcja „Liniowa” dekoduje kanały do światła fizycznego (gamma 2,4 z progiem 12,92 w kodzie silnika), uśrednia i koduje z powrotem — stąd jaśniejszy, naturalniejszy środek gradientu. To perceptualna nierównomierność RGB jest też powodem, dla którego projektanci gradientów sięgają po HSL lub LAB.
Warto wiedzieć — mieszanie kolorów w praktyce
Jak liczone jest mieszanie
Silnik najpierw wcina kolor B w kolor A wybranym trybem (kanał po kanale w zakresie 0–1), a potem miesza wynik trybu z bazą według proporcji: baza × (1 − t) + tryb × t. Kanał alfa miesza się osobno, a przy „Liniowej” wszystko dzieje się w przestrzeni światła fizycznego.
Tryby jak w edytorze grafiki
Multiply przyciemnia (iloczyn kanałów), Screen rozjaśnia (1 − (1−b)(1−s)), Overlay łączy oba zależnie od jasności bazy, Darken/Lighten wybierają min/max, a Difference/Exclusion dają efekty inwersji — to te same formuły co w trybach mieszania CSS i Photoshopa.
Paleta kroków 2–20
Oprócz pojedynczego wyniku narzędzie generuje paletę interpolacji: krok i z N ma proporcję t = i / (N − 1), czyli równe odstępy od koloru A do B. To gotowy ramp do wykresów, statusów i map cieplnych — każdy kafelek palety możesz skopiować osobno, a całość jako .txt.
Dostępność: kontrast przed publikacją
Dla wyniku liczony jest stosunek kontrastu WCAG względem bieli i czerni (luminancja względna 0,2126 R + 0,7152 G + 0,0722 B), a kafelek sugeruje bezpieczny kolor tekstu. Tekst na tle wyniku powinien mieć co najmniej 4,5:1 (duże litery 3:1) — sprawdź to zanim kolor trafi do interfejsu.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćBlender kolorów HEX – mieszanie barw w RGB, HSL i LAB
Mieszanie kolorów HEX to więcej niż średnia wartości – wynik zależy od przestrzeni kolorów, w której mieszasz. RGB daje inne wyniki niż HSL czy perceptualnie jednolita przestrzeń LAB. Narzędzie pozwala mieszać dowolne kolory w wybranej przestrzeni i generuje paletę przejść między nimi.
Przestrzenie kolorów przy mieszaniu
RGB (Red, Green, Blue): prosta średnia arytmetyczna wartości składowych. Może dawać szary "mud" przy mieszaniu kolorów dopełniających. HSL (Hue, Saturation, Lightness): mieszanie odcieni na kole – bardziej naturalne, ale problem przy 0°/360°. LAB/OKLab: perceptualnie równomierny – mieszane kolory wyglądają naturalnie, "żywe" przejścia.
Proporcje mieszania
Ratio 50/50: klasyczne zmieszanie po połowie. Ratio 30/70: lekkie przesunięcie ku drugiemu kolorowi. Multi-stop blend: 3-10 kolorów ze swobodnym rozmieszczeniem stopów (jak gradient CSS). Narzędzie wyświetla podgląd paska z intermedialnymi kolorami.
Zastosowania w projekcie
Generowanie palet monochromatycznych (1 kolor + biały/czarny). Tworzenie kolorów pośrednich dla stanu hover/active (blend z czarnym 15%). Harmonizacja różnych brandingowych kolorów. Palety dla wykresów (blend między 2-3 kolorami bazowymi). Sprawdzenie jak kolory "wyglądają razem".
Eksport wyników
Lista HEX: #A1B2C3, #D4E5F6. CSS gradient: linear-gradient(to right, #start, #end). JSON: {stop0: "#hex", stop50: "#hex", stop100: "#hex"}. SCSS variables: $color-blend-1: #hex. Paleta Figma: kopiuj HEX wartości do Figma Color Styles.
Jak liczony jest blender kolorów HEX – interpolacja krok po kroku
Narzędzie zamienia każdy wpisany kolor HEX na trzy liczby całkowite z zakresu 0-255 (R, G, B), a następnie wykonuje interpolację liniową między nimi. Dla dwóch kolorów A i B oraz udziału t z przedziału od 0 do 1 wynikowy kanał liczy się według wzoru C = (1 - t) * C_A + t * C_B, osobno dla R, G i B. Udział 50/50 sprowadza się więc do zwykłej średniej arytmetycznej, a 30/70 to przesunięcie wyniku bliżej drugiego koloru.
Przy trzech i więcej kolorach narzędzie nie liczy jednej wspólnej średniej, tylko skleja przejścia odcinkami – interpolacja jest odcinkami liniowa. Każdy stop ma swoje położenie, a między sąsiednimi stopami liczona jest osobna interpolacja. Dokładnie tak samo działa gradient CSS z wieloma przystankami, dlatego samo rozmieszczenie stopów zmienia wygląd palety częściej niż liczba dodanych kolorów.
W trybie HSL i LAB/OKLab kolejność jest inna: kolor jest najpierw rozkładany na składowe tej przestrzeni, interpolacja odbywa się na tych składowych, a wynik wraca do sRGB i dopiero wtedy trafia do zapisu HEX. W HSL odcień jest kątem na kole (0-360°), więc przy różnicy większej niż 180° trzeba wybrać krótszy łuk – inaczej przejście przeskoczy przez środek koła. W LAB i OKLab liczy się odległość euklidesowa, która odpowiada temu, jak różnicę widzi oko, dzięki czemu ścieżka między kolorami rzadziej przechodzi przez szarą maź.
Przykład: mieszanie #FF6B35 i #0155A9 w RGB
- Ustal kolory wejściowe. Kolor A to #FF6B35 (pomarańczowy), kolor B to #0155A9 (niebieski).
- Rozbij oba HEX na kanały. A = (255, 107, 53), B = (1, 85, 169).
- Wybierz przestrzeń i proporcję. Ustawiasz RGB oraz udział 50/50, czyli równy wpływ obu kolorów.
- Policz średnią każdego kanału. R = (255 + 1) / 2 = 128, G = (107 + 85) / 2 = 96, B = (53 + 169) / 2 = 111.
- Zapisz wynik. Kanały 128, 96, 111 to HEX #80606F. Ten sam kolor w HSL ma odcień ok. 332°, nasycenie ok. 14% i jasność ok. 44% – mimo że oba kolory wejściowe miały nasycenie bliskie 100%, wynik jest niemal szary.
- Zmień proporcję i przestrzeń. Przy 30/70 wynik przesuwa się do #4D5C86 (77, 92, 134). Po przełączeniu na LAB/OKLab przejście zachowuje wyższe nasycenie i nie ma szarego środka. Na koniec skopiuj listę HEX albo gotowy zapis linear-gradient.
Tabela proporcji dla pary #FF6B35 i #0155A9 (RGB)
| Udział A / B | Kanały RGB wyniku | Wynikowy HEX |
|---|---|---|
| 100 / 0 | 255, 107, 53 | #FF6B35 |
| 85 / 15 | 217, 104, 70 | #D96846 |
| 70 / 30 | 179, 100, 88 | #B36458 |
| 50 / 50 | 128, 96, 111 | #80606F |
| 30 / 70 | 77, 92, 134 | #4D5C86 |
| 15 / 85 | 39, 88, 152 | #275898 |
| 0 / 100 | 1, 85, 169 | #0155A9 |
Praktyczne wskazówki przy mieszaniu kolorów HEX
- Wybierz przestrzeń pod zastosowanie. Do gradientów i palet interfejsu lepszy będzie OKLab lub LAB, bo nie szarzeją na środku. RGB przydaje się wtedy, gdy chcesz odtworzyć zwykłe uśrednienie kanałów, np. przy porównywaniu z wynikiem innego narzędzia.
- Sprawdź środek przejścia, nie tylko końce. Oba kolory wejściowe mogą być nasycone, a ich mieszanka w RGB wyjdzie szara. Zanim wkleisz paletę do projektu, obejrzyj pasek podglądu w całości.
- Do stanów interakcji używaj małych przesunięć. Kolor hover lub active uzyskasz, mieszając barwę bazową z czernią albo bielą o kilkanaście procent, ale po zmianie zawsze przelicz kontrast tekstu na nowym tle.
- Pilnuj odcienia przy pracy w HSL. Jeśli dwa odcienie leżą po przeciwnych stronach koła, wybierz krótszy łuk, żeby przejście nie przelatywało przez niepotrzebne barwy.
- Trzymaj stopy w kolejności jasności. Przy paletach monochromatycznych i wykresach ustawiaj stopy od najjaśniejszego do najciemniejszego – łatwiej wtedy o spójny gradient i przewidywalny wynik eksportu.
Czego blender kolorów HEX nie uwzględnia
- Brak zarządzania kolorem. Obliczenia dotyczą sRGB; narzędzie nie uwzględnia profili ICC, szerszych przestrzeni ani kalibracji monitora, więc ten sam HEX na dwóch ekranach może wyglądać inaczej.
- Zaokrąglanie do liczb całkowitych. Kanały zapisywane są jako wartości 0-255, więc wyniki pośrednie tracą precyzję. Przy powtarzaniu blendu na już zmieszanym kolorze błąd się kumuluje.
- Brak przezroczystości i oceny kontrastu. Narzędzie nie uwzględnia kanału alfa ani tła, na którym kolor będzie leżał, i nie sprawdza kontrastu tekstu według wytycznych dostępności.
- Gamut i percepcja. Kolory spoza zakresu sRGB są przycinane, co potrafi zniekształcić fragment przejścia. Interpolacja w LAB/OKLab również nie obejmuje wszystkich efektów widzenia, np. wpływu sąsiednich barw na odbiór koloru.
Najczęstsze pytania
Dlaczego RGB nie jest idealnym modelem do mieszania?
RGB jest addytywnym modelem dla emisji światła. Mieszanie czerwonego (#FF0000) z zielonym (#00FF00) daje żółty (#808000) – matowy, nieżywy. W LAB/OKLab mieszanie jest perceptualnie poprawne – wynikowy kolor wydaje się "żywy" (jasny żółty zamiast ciemnego).
Co to jest OKLab i kiedy go używać?
OKLab (2020, Björn Ottosson) to ulepszona perceptualnie przestrzeń kolorów. Kolory o tym samym L (lightness) są subiektywnie jednakowo jasne dla ludzkiego oka. CSS Color Level 4 obsługuje oklch() i oklab(). Polecany do generowania palet i gradientów w nowoczesnym CSS.
Jak działa mieszanie kolorów w CSS (color-mix())?
CSS color-mix() (Chrome 111+): color-mix(in oklch, #FF0000 50%, #00FF00). Przestrzenie: srgb, hsl, hwb, lab, oklab, lch, oklch. Narzędzie generuje gotowy kod color-mix().
Jaki kolor powstaje ze zmieszania czarnego i białego?
W RGB: 50% czarny + 50% biały = #808080 (szary). W HSL: ten sam wynik. Ale "mieszanie" 10 kroków od czarnego do białego = skala szarości. Dla kolorowego gradientu: zawsze mieszaj kolory z podobnym L (lightness).
Jak sprawdzić kontrast zmieszanego koloru z tłem?
Skopiuj wynik HEX i wklej do narzędzia sprawdzania kontrastu (np. "sprawdzanie kontrastu kolorów" na tej stronie). WCAG AA wymaga 4.5:1 dla tekstu normalnego, 3:1 dla tekstu dużego.
Jak zmieszać dwa kolory HEX w proporcji 30/70?
Rozbij oba kolory na kanały R, G i B, a potem policz każdy kanał osobno: 0,3 razy wartość pierwszego koloru plus 0,7 razy wartość drugiego. Wynik zaokrąglij do liczby całkowitej i zapisz z powrotem jako HEX.
Dlaczego mieszanie w RGB daje brudny, szary kolor?
RGB miesza kanały niezależnie od tego, jak oko widzi barwę. Dwa mocno nasycone kolory mogą mieć w każdym kanale wartości daleko od siebie, a ich średnia wypada blisko szarości. W LAB lub OKLab ścieżka między nimi omija ten szary środek.
Czy mogę zmieszać więcej niż dwa kolory?
Tak, narzędzie obsługuje od 3 do 10 stopów, każdy z własnym położeniem. Przejścia liczone są odcinkami między sąsiednimi stopami, podobnie jak w gradiencie CSS z wieloma przystankami.
Jaka przestrzeń kolorów jest najlepsza do robienia gradientu?
Do gradientów interfejsu zwykle najlepiej sprawdza się OKLab lub LAB, bo przejście nie szarzeje w połowie drogi. RGB wybierz wtedy, gdy chcesz odtworzyć wynik prostego uśrednienia kanałów.
Jak zrobić z wyniku gradient CSS?
Skopiuj gotowy zapis linear-gradient z listą kolorów ustawioną w kolejności stopów i wklej go do arkusza stylów. Pasek podglądu w narzędziu pokazuje dokładnie ten sam układ kolorów.
Powiązane narzędzia: sprawdzanie kontrastu kolorów, generator palet kolorów i konwerter HSL na HEX.