CodeKitHubHva er dette verktøyet?
En fargeblander interpolerer lineært mellom to fargers røde, grønne og blå kanaler ved et valgt forhold — samme matematikk som en gradient bruker internt. Ved 0 % er resultatet Farge A, ved 100 % er det Farge B, og ved 50 % er det det aritmetiske gjennomsnittet av hver RGB-kanal.
Dette er forskjellig fra å blande fysisk maling (som er subtraktiv og avhenger av pigment), og det er heller ikke det samme som å ta gjennomsnitt i HSL-rom — lineær RGB-interpolasjon er det CSS-gradienter, designverktøy og de fleste "farge mellom to farger"-verktøy bruker, så resultatet stemmer med det du ville sett i en nettlesergradient mellom de samme to fargene.
Hvorfor bruke det?
- Finn en naturlig utseende hover- eller aktiv-tilstandsfarge som ligger mellom grunnfargen din og en aksentfarge — i stedet for å gjette på en tilfeldig justering.
- Se den nøyaktige HEX-koden ved et hvilket som helst forhold, ikke bare øyemåle et gradientskjermbilde.
- 11-trinns-rampen gir deg en full palett fra én farge til en annen med ett klikk, nyttig for datavisualisering eller en flertrinns gradient.
- Klikk på et hvilket som helst trinn for å kopiere HEX-koden umiddelbart.
- Gratis, umiddelbart og helt lokalt — ingen opplasting, ingen konto.
Slik bruker du det
- Velg Farge A og Farge B med fargevelgerne eller ved å skrive inn en HEX-kode.
- Dra forholdsglideren for å angi hvor mye av Farge B som skal blandes inn.
- Les de resulterende HEX- og RGB-verdiene over fargeprøven.
- Klikk på en hvilken som helst prøve i 11-trinns-rampen nedenfor for å kopiere HEX-koden.
Eksempel
Inndata
Farge A #3B82F6 (blå), Farge B #F59E0B (rav), forhold 50 %Resultat
#9B9E7D — rgb(155, 158, 125)Ved nøyaktig 50 % er hver RGB-kanal det aritmetiske gjennomsnittet av kanalene til de to inngangsfargene.
Ofte stilte spørsmål
Hvorfor stemmer ikke dette med det jeg ville fått ved å blande ekte maling?
Malingblanding er subtraktiv (pigmenter absorberer lys) og avhenger av de spesifikke pigmentene som er involvert — å blande blå og gul maling gir for eksempel grønt. Dette verktøyet blander lys (RGB-kanaler) additivt/lineært, som er slik skjermer, CSS-gradienter og de fleste digitale designverktøy blander farger. De to systemene gir genuint forskjellige resultater med hensikt, ikke på grunn av en feil.
Er dette det samme som en CSS linear-gradient mellom de to fargene?
Ja — en CSS linear-gradient(colorA, colorB) interpolerer RGB-kanalene på samme måte som dette verktøyet gjør, så fargen du ville sett midt i den gradienten, stemmer med 50 %-resultatet her.
Hvorfor ser den blandede fargen noen ganger grumsete eller grå ut?
Å blande to mettede, men svært ulike nyanser (som blått og oransje, som er nesten komplementære) i RGB-rom gir ofte et gråbrunt midtpunkt med lav metning — dette er en reell egenskap ved RGB-interpolasjon, ikke en feil. Hvis du vil ha en mer levende blanding, prøv å blande farger som ligger nærmere hverandre på fargehjulet, eller bland i HSL-rom ved å justere fargetonen og holde metningen høy (noe denne rene RGB-blanderen ikke gjør).
Kan jeg blande mer enn to farger samtidig?
Ikke i ett trinn — verktøyet blander nøyaktig to farger. For å kombinere tre, bland de to første ved ønsket forhold, kopier resultatet, og lim det inn som den nye Farge A mot din tredje farge. Å gjøre det trinnvis gir deg også kontroll over vektingen, noe en enkelt tredelt gjennomsnittsberegning ikke ville gitt.
Bør jeg bruke dette eller Fargenyanse-generatoren?
Hvis du trenger en farge som ligger mellom to forskjellige farger — for eksempel en overgangsnyanse mellom merkevareblåtten din og en ravfarget aksent — bruk denne blanderen. Hvis du trenger lysere og mørkere varianter av én farge (hover-tilstander, bakgrunner, en Tailwind-stil 50–900-rampe), bruk i stedet Fargenyanse-generatoren: den holder fargetone og metning fast og varierer bare lysstyrken, slik at hvert resultat tydelig forblir i samme fargefamilie.
Hvilke fargeformater kan jeg skrive inn i inputfeltene?
Tekstfeltene godtar 6-sifrede HEX-koder, med eller uten innledende # (f.eks. 3B82F6 eller #3B82F6). Forkortet 3-sifret hex, rgb()-notasjon og CSS-fargenavn tolkes ikke der — men du kan velge en hvilken som helst farge visuelt med den innebygde fargevelgeren ved siden av hvert felt, og HEX-feltet oppdateres tilsvarende.