CodeKitHubHvad er dette værktøj?
En farveblander interpolerer lineært mellem to farvers røde, grønne og blå kanaler ved et valgt forhold — den samme matematik, som en gradient bruger internt. Ved 0% er resultatet Farve A, ved 100% er det Farve B, og ved 50% er det det aritmetiske midtpunkt for hver RGB-kanal.
Dette adskiller sig fra at blande fysisk maling (som er subtraktiv og afhænger af pigment), og det er heller ikke det samme som at gennemsnitsberegne i HSL-rum — RGB-lineær interpolation er det, CSS-gradienter, designværktøjer og de fleste "farve mellem to farver"-værktøjer bruger, så resultatet matcher det, du ville se i en browsergradient mellem de samme to farver.
Hvorfor bruge det?
- Find en naturligt udseende hover- eller aktiv-tilstandsfarve, der ligger mellem din basisfarve og en accentfarve — i stedet for at gætte på en tilfældig justering.
- Se den præcise HEX-kode ved et hvilket som helst forhold, i stedet for blot at skønne ud fra et gradientskærmbillede.
- 11-trins-rampen giver dig en hel palet fra én farve til den anden med ét klik, nyttigt til datavisualisering eller en gradient med flere stop.
- Klik på et hvilket som helst trin for at kopiere dets HEX-kode med det samme.
- Gratis, øjeblikkeligt og fuldt lokalt — ingen upload, ingen konto.
Sådan bruger du det
- Vælg Farve A og Farve B med farvevælgerne eller ved at skrive en HEX-kode.
- Træk i forholdsskyderen for at bestemme, hvor meget af Farve B der skal blandes i.
- Aflæs de resulterende HEX- og RGB-værdier over farveprøven.
- Klik på en hvilken som helst farveprøve i 11-trins-rampen nedenfor for at kopiere dens HEX-kode.
Eksempel
Input
Farve A #3B82F6 (blå), Farve B #F59E0B (rav), forhold 50%Output
#9B9E7D — rgb(155, 158, 125)Ved nøjagtigt 50% er hver RGB-kanal det aritmetiske gennemsnit af de to inputfarvers kanaler.
Ofte stillede spørgsmål
Hvorfor matcher dette ikke det, jeg ville få ved at blande rigtig maling?
At blande maling er subtraktivt (pigmenter absorberer lys) og afhænger af de specifikke pigmenter, der er involveret — at blande blå og gul maling giver f.eks. grøn. Dette værktøj blander lys (RGB-kanaler) additivt/lineært, hvilket er sådan, skærme, CSS-gradienter og de fleste digitale designværktøjer blander farver. De to systemer giver med vilje reelt forskellige resultater — det er ikke en fejl.
Er dette det samme som en CSS linear-gradient mellem de to farver?
Ja — en CSS linear-gradient(farveA, farveB) interpolerer RGB-kanaler på samme måde som dette værktøj, så den farve, du ville se ved midtpunktet af den gradient, matcher 50%-resultatet her.
Hvorfor ser den blandede farve nogle gange mudret eller grå ud?
At blande to mættede, men meget forskellige nuancer (som blå og orange, der næsten er komplementærfarver) i RGB-rum giver ofte et lavmættet, gråbrunt midtpunkt — det er en reel egenskab ved RGB-interpolation, ikke en fejl. Hvis du vil have en mere levende blanding, kan du prøve at blande farver, der ligger tættere på hinanden på farvehjulet, eller blande i HSL-rum ved at justere farvetonen og holde mætningen høj (hvilket denne rene RGB-blander ikke gør).
Kan jeg blande mere end to farver på én gang?
Ikke i ét trin — værktøjet blander præcis to farver. For at kombinere tre farver skal du blande de første to i dit valgte forhold, kopiere resultatet og indsætte det som den nye Farve A over for din tredje farve. Ved at gøre det i etaper får du også kontrol over vægtningen, hvilket et enkelt gennemsnit af tre farver ikke ville give.
Skal jeg bruge dette eller Farvenuance-generatoren?
Hvis du har brug for en farve, der ligger mellem to forskellige farver — for eksempel en overgangsnuance mellem din brandblå og en accentrav — så brug denne blander. Hvis du har brug for lysere og mørkere varianter af én farve (hover-tilstande, baggrunde, en Tailwind-lignende 50-900-rampe), så brug i stedet Farvenuance-generatoren: den holder farvetone og mætning fast og varierer kun lysstyrken, så alle resultater tydeligt forbliver i samme farvefamilie.
Hvilke farveformater kan jeg skrive i inputfelterne?
Tekstfelterne accepterer 6-cifrede HEX-koder, med eller uden det indledende # (f.eks. 3B82F6 eller #3B82F6). Forkortet 3-cifret hex, rgb()-notation og CSS-farvenavne bliver ikke fortolket der — men du kan vælge en hvilken som helst farve visuelt med den indbyggede farvevælger ved siden af hvert felt, og HEX-feltet opdateres tilsvarende.