Softonic

Mieszanie kolorów

Krok 1 / 2
Wyniki

Wpisz dwa kolory HEX, wybierz liczbę kroków, a narzędzie pokaże kolor początkowy, końcowy oraz równomiernie rozłożone kolory pomiędzy nimi. Przydaje się do szybkich skal UI, planowania gradientów, stanów ikon i sprawdzania dokładnych kodów HEX przed przeniesieniem ich do CSS lub pliku projektowego.

Jak obliczana jest mieszanka HEX

  1. 1

    Wpisz dwa kolory HEX

    Użyj 3- lub 6-cyfrowego HEX, z # albo bez. Przykłady: #FF6B35, #1E3A8A, F60.

  2. 2

    Wybierz 2-20 kroków

    Pierwsza próbka to pierwszy kolor, a ostatnia to drugi; próbki środkowe są obliczane pomiędzy nimi.

  3. 3

    Interpoluj kanały RGB

    Narzędzie zamienia HEX na wartości kanałów czerwonego, zielonego i niebieskiego, interpoluje każdy kanał liniowo, a następnie zaokrągla do najbliższej liczby całkowitej.

  4. 4

    Odczytaj kroki HEX

    Każda próbka jest pokazana jako 6-cyfrowy kod HEX wielkimi literami, który możesz zaznaczyć i użyć w projekcie lub arkuszu stylów.

Co robi to narzędzie

Mieszanie kolorów działa wyłącznie ze standardową notacją HEX. Przyjmuje krótki HEX, taki jak #F60, oraz pełny HEX, taki jak #FF6B35, normalizuje wartości wewnętrznie i zwraca każdy wynik jako 6-cyfrowy kod HEX wielkimi literami.

Mieszanie polega na prostej interpolacji liniowej w kanałach RGB/sRGB:

  1. Zamień każdy kolor HEX na wartości R, G i B od 0 do 255.
  2. Dla każdego kroku oblicz t od 0 do 1.
  3. Dla każdego kanału użyj start + (koniec - start) * t.
  4. Zaokrąglij każdy kanał do najbliższej liczby całkowitej i zamień wynik z powrotem na HEX.

Ponieważ końce są wliczone, 2 kroki oznaczają “tylko start i koniec”. Dla 7 kroków od #FF6B35 do #1E3A8A wynik to:

Krok Pozycja HEX
1 0% #FF6B35
2 16,67% #DA6343
3 33,33% #B45B51
4 50% #8F5360
5 66,67% #694A6E
6 83,33% #44427C
7 100% #1E3A8A

Dobre zastosowania

  • Skale stanów UI: twórz kolory pośrednie dla hover, active, selected lub disabled.
  • Planowanie gradientów: ustal dokładne stopnie HEX przed zapisaniem gradientu CSS w innym narzędziu.
  • Warianty ikon i ilustracji: utrzymaj spójny mały zestaw powiązanych kolorów.
  • QA projektu: porównaj środek obliczony kanałowo, zamiast oceniać go na oko.

Ograniczenia

To narzędzie nie przyjmuje rgb(), hsl(), nazw kolorów, wartości alpha ani 8-cyfrowego HEX. Nie eksportuje RGB, HSL, LAB, LCH, fragmentów CSS, kontroli kontrastu ani ocen dostępności. Jeśli tego potrzebujesz, użyj konwertera, testera kontrastu lub generatora gradientów po uzyskaniu kroków HEX.

Najczęściej zadawane pytania

Tylko HEX: 3 lub 6 cyfr, z początkowym # albo bez. Narzędzie nie odczytuje rgb(), hsl(), kanałów alpha ani nazw kolorów.

Tak. Pierwszy krok to pierwszy kolor, a ostatni krok to drugi kolor. Pozostałe kroki to kolory interpolowane między nimi.

Mieszanka jest obliczana kanał po kanale w RGB/sRGB. To przewidywalne i łatwe do użycia w kodzie, ale nie jest tym samym co percepcyjna interpolacja LAB lub LCH.

Nie. Pokazuje tylko próbki i kody HEX. Użyj wygenerowanych wartości HEX w CSS albo przekaż je do testera kontrastu, jeśli ważne są współczynniki dostępności.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.