Softonic

Färgmixer

Steg 1 / 2
Resultat

Ange två HEX-färger, välj hur många steg du vill ha och Färgmixer visar startfärgen, slutfärgen och de jämnt fördelade färgerna mellan dem. Det är användbart för snabba UI-skalor, gradientplanering, ikonlägen och kontroll av exakta HEX-stopp innan du fortsätter i CSS eller en designfil.

Så beräknas HEX-blandningen

  1. 1

    Ange två HEX-färger

    Använd HEX med 3 eller 6 tecken, med eller utan #. Exempel: #FF6B35, #1E3A8A, F60.

  2. 2

    Välj 2-20 steg

    Den första färgrutan är den första färgen och den sista färgrutan är den andra; färgerna i mitten beräknas mellan dem.

  3. 3

    Interpolera RGB-kanaler

    Verktyget konverterar HEX till röda, gröna och blå kanalvärden, interpolerar varje kanal linjärt och avrundar till närmaste heltal.

  4. 4

    Läs HEX-stegen

    Varje färgruta visas med en 6-siffrig HEX-kod i versaler som du kan markera och återanvända i din design eller stilmall.

Vad verktyget gör

Färgmixer arbetar bara med standardnotationen HEX. Den accepterar kort HEX som #F60 och full HEX som #FF6B35, normaliserar värdena internt och visar varje resultat som en 6-siffrig HEX-kod med versaler.

Blandningen är en enkel linjär interpolering i RGB/sRGB-kanaler:

  1. Konvertera varje HEX-färg till R-, G- och B-värden från 0 till 255.
  2. Beräkna t från 0 till 1 för varje steg.
  3. Använd start + (slut - start) * t för varje kanal.
  4. Avrunda varje kanal till närmaste heltal och konvertera resultatet tillbaka till HEX.

Eftersom ändpunkterna ingår betyder 2 steg “bara start och slut”. Med 7 steg från #FF6B35 till #1E3A8A blir resultatet:

Steg Position 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

Bra användning

  • UI-lägesskalor: skapa mellanfärger för hover, aktivt, valt eller inaktiverat läge.
  • Gradientplanering: bestäm exakta HEX-stopp innan du skriver en CSS-gradient i ett annat verktyg.
  • Ikon- och illustrationsvarianter: håll en liten grupp relaterade färger konsekvent.
  • Design-QA: jämför mittpunkten som beräknats per kanal i stället för att gissa visuellt.

Begränsningar att komma ihåg

Den här mixern accepterar inte rgb(), hsl(), färgnamn, alpha-värden eller 8-siffrig HEX. Den exporterar inte RGB, HSL, LAB, LCH, CSS-snippets, kontrastkontroller eller tillgänglighetsbetyg. Behöver du det kan du använda en konverterare, kontrastkontroll eller gradientgenerator efter att du har tagit fram HEX-stegen.

Vanliga frågor

Endast HEX: 3 eller 6 tecken, med eller utan inledande #. Verktyget läser inte rgb(), hsl(), alpha-kanaler eller färgnamn.

Ja. Det första steget är den första färgen och det sista steget är den andra färgen. Alla övriga steg är de interpolerade färgerna mellan dem.

Blandningen beräknas kanal för kanal i RGB/sRGB. Det är förutsägbart och lätt att återanvända i kod, men det är inte samma sak som perceptuell LAB- eller LCH-interpolering.

Nej. Det visar bara färgrutor och HEX-koder. Använd de genererade HEX-värdena i din CSS eller skicka dem till en kontrastkontroll om tillgänglighetskvoter är viktiga.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Förenklare för boolesk algebra

Utvärdera ett booleskt uttryck för varje kombination av indata och visa den fullständiga sanningstabellen. Stöder upp till fem variabler och operatorerna &, |, ! och ^.