TL
Tool Lab
💰Donate
💰Donate

Färgblandare

Blanda två färger och utforska hela gradienten däremellan. Justera förhållandet för att få exakt den blandning du behöver.

Färg 1
Färg 2
Blandningsförhållande — 50% Färg 1 : 50% Färg 2
Blandad färg
HEX: #A79C98
RGB: rgb(167, 156, 152)
HSL: hsl(16, 8%, 63%)
Gradientskala (klicka för att kopiera)
#FF6B6B
#E27B7A
#C48C89
#A79C98
#89ACA6
#6CBDB5
#4ECDC4

Om det här verktyget

Färgblandaren blandar två hexfärger i RGB-rymden och producerar en mjuk blandning vid vilket förhållande som helst mellan 0% och 100%. Gradientskalan visar 7 jämnt fördelade steg mellan de två färgerna.

RGB-blandning är samma operation som en webbläsare utför vid sammansättning av färger — matematiskt exakt och förutsägbar. Den blandade färgen vid 50% är den verkliga mittpunkten mellan båda färgerna i RGB-rymden.

Hur man använder

  1. Välj två färger med färgväljarna eller skriv hex-koder direkt.
  2. Använd förinställningsknapparna för att prova klassiska färgkombinationer.
  3. Dra förhållandereglaget för att justera blandningen. 0% ger Färg 1; 100% ger Färg 2.
  4. Klicka på ett gradientsampel eller knappen Kopiera HEX för att kopiera en färg.

Användningsfall

UI-designers blandar ett varumärkes primärfärg med vitt eller svart för hover-, aktiv- och inaktiverade tillstånd. Rörelsegrafiker väljer mellanfärger för nyckelbildsanimationer. Frontend-utvecklare genererar gradientstopp utan grafisk editor.

Vanliga frågor

  • Är detta detsamma som CSS-gradient?Ja. CSS linear-gradient blandar också i sRGB som standard. Stegen som visas motsvarar exakt de mellanpunkter som en CSS-gradient passerar.
  • Varför ger rött + blått inte lila?I RGB ger rött (#ff0000) och blått (#0000ff) vid 50% #7f007f (mörk magenta). En livfull lila kräver att man blandar rött med ett blå-lila som #8000ff.
  • Kan jag få fler gradientsteg?Skalan visar alltid 7 steg. Använd förhållandereglaget för att inspektera en specifik mellanpunkt.
  • Stöder detta alfa/transparens?Nej, det här verktyget fungerar bara med solida hexfärger.