CodeKitHubVad är detta verktyg?
En färgmixer interpolerar linjärt mellan två färgers röda, gröna och blå kanaler vid ett valt förhållande — samma matematik som en gradient använder internt. Vid 0 % är resultatet Färg A, vid 100 % är det Färg B, och vid 50 % är det det aritmetiska medelvärdet för varje RGB-kanal.
Detta skiljer sig från att blanda fysisk färg (vilket är subtraktivt och beror på pigment), och det är inte heller samma sak som att ta medelvärdet i HSL-rymden — linjär RGB-interpolation är det som CSS-gradienter, designverktyg och de flesta "färg mellan två färger"-verktyg använder, så resultatet stämmer med det du skulle se i en webbläsargradient mellan samma två färger.
Varför använda det?
- Hitta en naturligt utseende hover- eller aktivt tillstånd-färg som ligger mellan din basfärg och en accent — istället för att gissa en slumpmässig justering.
- Se den exakta HEX-koden vid vilket förhållande som helst, inte bara uppskatta en gradientskärmdump med ögonmått.
- 11-stegsrampen ger dig en hel palett från en färg till en annan med ett klick, användbart för datavisualisering eller en flerstegsgradient.
- Klicka på vilket steg som helst för att kopiera dess HEX-kod direkt.
- Gratis, direkt och helt lokalt — ingen uppladdning, inget konto.
Så använder du det
- Välj Färg A och Färg B med färgväljarna eller genom att skriva in en HEX-kod.
- Dra i förhållandereglaget för att ställa in hur mycket av Färg B som ska blandas in.
- Läs de resulterande HEX- och RGB-värdena ovanför färgprovet.
- Klicka på valfritt prov i 11-stegsrampen nedan för att kopiera dess HEX-kod.
Exempel
Inmatning
Färg A #3B82F6 (blå), Färg B #F59E0B (bärnsten), förhållande 50 %Resultat
#9B9E7D — rgb(155, 158, 125)Vid exakt 50 % är varje RGB-kanal det aritmetiska medelvärdet av de två inmatade färgernas kanaler.
Vanliga frågor
Varför stämmer inte detta med vad jag skulle få genom att blanda riktig färg?
Färgblandning är subtraktiv (pigment absorberar ljus) och beror på de specifika pigment som är inblandade — att blanda blå och gul färg ger till exempel grönt. Det här verktyget blandar ljus (RGB-kanaler) additivt/linjärt, vilket är hur skärmar, CSS-gradienter och de flesta digitala designverktyg blandar färger. De två systemen ger genuint olika resultat med avsikt, inte på grund av ett fel.
Är detta samma sak som en CSS linear-gradient mellan de två färgerna?
Ja — en CSS linear-gradient(colorA, colorB) interpolerar RGB-kanalerna på samma sätt som det här verktyget gör, så färgen du skulle se mitt i den gradienten stämmer med 50 %-resultatet här.
Varför ser den blandade färgen ibland grumlig eller grå ut?
Att blanda två mättade men mycket olika nyanser (som blått och orange, som är nästan komplementära) i RGB-rymden ger ofta en lågmättad, gråbrun mittpunkt — det här är en verklig egenskap hos RGB-interpolation, inte ett fel. Om du vill ha en mer levande blandning, försök blanda färger som ligger närmare varandra på färghjulet, eller blanda i HSL-rymden genom att justera nyansen och hålla mättnaden hög (något denna raka RGB-mixer inte gör).
Kan jag blanda fler än två färger på en gång?
Inte i ett steg — verktyget blandar exakt två färger. För att kombinera tre, blanda de två första i valt förhållande, kopiera resultatet och klistra in det som den nya Färg A mot din tredje färg. Att göra det stegvis ger dig också kontroll över viktningen, vilket ett enda tredelat medelvärde inte skulle ge.
Ska jag använda detta eller Färgnyansgeneratorn?
Om du behöver en färg som ligger mellan två olika färger — säg en övergångsnyans mellan ditt varumärkes blå och en bärnstensaccent — använd den här mixern. Om du behöver ljusare och mörkare varianter av en färg (hover-tillstånd, bakgrunder, en Tailwind-stil 50–900-ramp), använd istället Färgnyansgeneratorn: den håller nyans och mättnad fasta och varierar bara ljusheten, så att varje resultat tydligt förblir inom samma färgfamilj.
Vilka färgformat kan jag skriva in i inmatningsfälten?
Textfälten accepterar 6-siffriga HEX-koder, med eller utan inledande # (t.ex. 3B82F6 eller #3B82F6). Förkortad 3-siffrig hex, rgb()-notation och CSS-färgnamn tolkas inte där — men du kan välja vilken färg som helst visuellt med den inbyggda färgväljaren bredvid varje fält, och HEX-fältet uppdateras därefter.