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.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Prefiks znaku # Opcja narzędzia

Kanał alfa Opcja narzędzia

Kolor A

Kolor B

Proporcja mieszania

Tryb

Przestrzeń kolorów

Liczba kroków palety

Wielkość liter wyniku

Wynik mieszania i paleta kolorów

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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.

blender kolorów HEX mieszanie kolorów CSS interpolacja kolorów gradient kolorów HEX

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.

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.

Powiązane narzędzia: sprawdzanie kontrastu kolorów, generator palet kolorów i konwerter HSL na HEX.