TL
Tool Lab
💰Donate
💰Donate

Mieszacz Kolorów

Mieszaj dwa kolory i eksploruj pełny gradient między nimi. Dostosuj proporcje, aby uzyskać dokładną mieszankę.

Kolor 1
Kolor 2
Proporcja mieszania — 50% Kolor 1 : 50% Kolor 2
Zmieszany kolor
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Skala gradientu (kliknij, aby skopiować)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

O tym narzędziu

Mikser kolorów miesza dwa kolory hex w przestrzeni RGB, tworząc płynne połączenie w dowolnej proporcji między 0% a 100%. Skala gradientu pokazuje 7 równomiernie rozmieszczonych kroków między dwoma kolorami.

Mieszanie RGB to ta sama operacja, którą przeglądarka wykonuje przy komponowaniu kolorów — matematycznie dokładna i przewidywalna. Zmieszany kolor przy 50% to prawdziwy punkt środkowy między oboma kolorami w przestrzeni RGB.

Jak używać

  1. Wybierz dwa kolory za pomocą próbników kolorów lub wpisz bezpośrednio kody hex.
  2. Użyj przycisków presetów, aby wypróbować klasyczne kombinacje kolorów.
  3. Przeciągnij suwak proporcji, aby dostosować mieszanie. 0% daje Kolor 1; 100% daje Kolor 2.
  4. Kliknij dowolną próbkę gradientu lub przycisk Kopiuj HEX, aby skopiować kolor.

Przypadki użycia

Projektanci UI mieszają kolor marki z białym lub czarnym dla stanów hover, aktywny i wyłączony. Projektanci motion wybierają pośrednie kolory dla animacji klatek kluczowych. Programiści frontend generują punkty zatrzymania gradientu bez edytora graficznego.

Często zadawane pytania

  • Czy to jest to samo co gradient CSS?Tak. CSS linear-gradient również miesza w sRGB domyślnie. Pokazane kroki dokładnie odpowiadają punktom pośrednim gradientu CSS.
  • Dlaczego mieszanie czerwonego i niebieskiego nie daje fioletu?W RGB, czerwony (#ff0000) i niebieski (#0000ff) przy 50% daje #7f007f (ciemna magenta). Żywy fiolet wymaga mieszania czerwonego z niebiesko-fioletowym jak #8000ff.
  • Czy mogę uzyskać więcej kroków gradientu?Skala zawsze pokazuje 7 kroków. Użyj suwaka proporcji, aby sprawdzić dowolny określony punkt pośredni.
  • Czy obsługuje alfa/przezroczystość?Nie, to narzędzie działa tylko z pełnymi kolorami hex.