Färgblandare — Blanda två färger

Blanda två skärmfärger

Att blanda färger är användbart när du behöver ett hover-tillstånd mellan två tokens, mittpunkten i en gradient, en övergångsfärg för ett diagram eller en snabb utforskning av hur två varumärkesfärger förhåller sig till varandra. Den här färgblandaren blandar två valda färger genom att interpolera deras röda, gröna och blå kanaler. Flytta reglaget mot färg B för att öka dess andel och kopiera sedan resultatet som HEX, RGB eller HSL för CSS, dokumentation eller designtokens.

RGB-blandning beskriver hur skärmar kombinerar ljus. Det gör den perfekt för webbarbete, men det är inte samma sak som att blanda färg eller bläck: mittpunkten mellan blått och gult på en skärm beter sig inte som samma blandning i fysiskt pigment. För gränssnittsdesign är RGB-blandning ändå praktisk, eftersom webbläsaren i slutändan visar färger som skärmvärden. Förhandsvisningen uppdateras direkt så att du kan bedöma resultatet innan du kopierar det.

Använda förhållanden i gränssnittsdesign

Förhållandet styr balansen mellan de två indatafärgerna. Vid 0 procent är resultatet färg A. Vid 100 procent är det färg B. Värden kring 10 till 25 procent är ofta användbara för diskreta hover-tillstånd eller tonade ytor, eftersom originalfärgen fortfarande dominerar. Värden nära 50 procent passar bättre för övergångspaletter, gradientmittpunkter och diagramskalor. Om resultatet ser matt ut kan du efteråt öka mättnaden i HSL eller välja källfärger med större skillnad.

Kopiera pålitliga färgtokens

När du har hittat en användbar blandning kopierar du det format som passar ditt arbetsflöde bäst. HEX är kompakt vid designöverlämning, RGB är praktiskt när du behöver kanalvärden eller alfa-överlägg, och HSL är lättare att justera i nyans, mättnad eller ljushet efter blandningen. Eftersom verktyget körs lokalt kan du tryggt experimentera med opublicerade varumärkespaletter eller kundfärger. Testa alltid den färdiga blandfärgen i sitt sammanhang, särskilt om den ska ligga bakom text eller bredvid viktiga statusfärger.