Ik breng een verrassend groot deel van mijn dag ergens tussen een ontwerpbestand en een stylesheet door, waarbij ik de ene kleur naar de andere duw totdat een zweefstatus, een rand of een verloopstop goed lijkt. Jarenlang heb ik de rekenkunde in mijn hoofd gedaan of in een picker gekeken, wat prima is totdat je de exacte kleur halverwege tussen een merk blauw en een warme neutraal nodig hebt en je het nodig hebt als hexadecimale code die je kunt plakken. Dus ik heb een kleurenmixer in Toolz.dev dat combineert twee kleuren met een verhouding die u bestuurt, biedt dezelfde mengmodi die een afbeeldingseditor gebruikt en levert u het resultaat in HEX, RGB en HSL. Dit is de gids voor het en voor wat " kleuren mengen" betekent op een scherm.
tl;dr: Een kleurenmixer mengt twee kleuren tot één De Toolz kleurenmixer interpoleert twee kleuren met een instelbare verhouding, ondersteunt de W3C scheidbare mengmodi (vermenigvuldigen, schermen, overlay, donkerder worden, lichter maken, verschil, gemiddeld), bouwt een gradiënt van tussenstappen tussen de kleuren en voert elk resultaat uit als HEX, RGB en HSL. Het accepteert hex-, rgb()-, hsl()- en CSS-kleurnamen en draait volledig aan de clientzijde.
Hoe meng je twee kleuren op een scherm?
Het duidelijke antwoord is een gewogen gemiddelde van de twee kleuren' rode, groene en blauwe kanalen Om rood te mengen (255, 0, 0) en blauw (0, 0, 255) in gelijke delen gemiddeld je elk kanaal: rood wordt (255+0)/2 = 128, groen blijft 0, blauw wordt (0+255)/2 = 128, geven (128, 0, 128), wat de hex is #800080idd, een effen paars Verschuif het gewicht naar één kant en je schuift langs de lijn tussen de twee kleuren Dat is precies wat de verhoudingschuif doet: bij 0 procent hou je de eerste kleur, bij 100 procent land je op de tweede, en 50 procent is de even splitsing.
Dit is dezelfde interpolatie die een CSS-gradiënt met twee stops gebruikt, en daarom is het middelpunt van linear-gradient(red, blue) is dat paars De mixer maakt de relatie expliciet door ook het verloop tussen je twee kleuren te tekenen als een strook stalen, die je elk als tussenstop kunt kopiëren Als je ooit & quot; drie kleuren gelijkmatig verdeeld tussen deze twee, & quot; de verloopstrook is de snelste manier om ze te krijgen.
Eén eerlijk voorbehoud, want het verbaast mensen: het middelen van RGB-kanalen is niet hoe pigmenten zich vermengen Op een scherm zijn kleuren licht en combineren ze additief; in een verfset zijn ze pigment en combineren ze subtractief Het mengen van rode en groene lichttrends naar een doffe olijf in plaats van het levendige geel dat je uit verf zou halen, omdat je gemiddelde lichtwaarden hebt, geen pigment mengt Dit is geen bug in het gereedschap, het is de aard van sRGB, en de oplossing wanneer je een levendiger resultaat wilt, is het mengen van tinten die dichter bij elkaar op het wiel zitten De kleurconverter is handig naast de mixer als je dezelfde kleur in verschillende formaten wilt zien, terwijl je over tint redeneert.
Wat is het verschil tussen Mix en de blend modes?
Mix is het hierboven beschreven gewogen gemiddelde: het komt altijd ergens op de rechte lijn tussen de twee kleuren terecht De mengmodi zijn iets heel anders Het zijn de laagmengbewerkingen van beeldeditors, gestandaardiseerd voor het web in de W3C Compositing and Blending Level 1 specificatie, en elk combineert de kanalen met een andere formule in plaats van een eenvoudig gemiddelde.
| manier | Per-kanaal formule (waarden 0 tot 1) | Effect |
|---|---|---|
| Mix | b (gewogen naar verhouding) |
Gewogen gemiddelde, landt tussen de twee kleuren |
| Vermenigvuldigen | a x b |
Altijd donkerder; wit laat een kleur onveranderd, zwart dwingt zwart |
| Screen | a + b - a x b |
Altijd lichter; het omgekeerde van vermenigvuldigen |
| Overlay | vermenigvuldig of scherm met de basis | Verhoogt contrast |
| Donkerder | min(a, b) |
Houdt het donkerdere kanaal |
| Lighten | max(a, b) |
Houdt het lichtere kanaal |
| Verschil | abs(a - b) |
Kanaalafstand; identieke kleuren geven zwart |
| Gemiddeld | (a + b) / 2 |
Het ongewogen gemiddelde van beide |
De intuïtie die het dragen waard is: vermenigvuldigen wordt altijd donkerder omdat het vermenigvuldigen van twee breuken een kleinere breuk geeft, dus rood maal blauw is zwart (elke kleur mist het kanaal dat de ander heeft) Scherm wordt altijd lichter omdat het vermenigvuldigd wordt toegepast op de omgekeerde waarden Verschil geeft je de kanaal-voor-kanaal afstand, daarom levert het mengen van een kleur met zichzelf onder verschil puur zwart op In de mixer gedraagt de ratioschuif zich dan als laagdekking: het vervaagt het gemengde resultaat in over de eerste kleur, zodat je het effect van subtiel naar vol kunt kiezen.
Wat regelt de ratioschuifregelaar?
De verhouding stelt in hoe sterk de tweede kleur, of het gemengde resultaat van de gekozen modus, over de eerste kleur wordt aangebracht, zie het als opaciteit op de bovenste laag Bij 0 procent is de bovenste laag onzichtbaar en zie je de eerste kleur onaangeroerd Bij 100 procent is de bovenste laag volledig ondoorzichtig en krijg je de volledige blend voor die modus Bij 50 procent krijg je een gelijkmatige splitsing, voor gewone Mix wordt dit gereduceerd tot het bekende gewogen gemiddelde; voor een modus als Multiply kun je een zachte verduistering toepassen in plaats van het volledige effect.
Dat unified model is weloverwogen, omdat het betekent dat één schuifregelaar in elke modus hetzelfde conceptuele werk doet In de praktijk gebruik ik lage verhoudingen om een kleur iets naar een andere te duwen (een zweefstatus die & quot; de knop is, maar 15 procent naar black") en hoge verhoudingen wanneer ik de volledige mix wil De gradiëntgenerator gaat verder waar de mixer ophoudt wanneer u een paar gemengde kleuren wilt omzetten in een volledig multi-stop CSS-gradiënt.
Hoe krijg ik de exacte kleur halverwege tussen twee kleuren?
Stel de modus in op Mix en de verhouding op 50, en het resultaat is het exacte middelpunt. Je kunt het ook rechtstreeks van de verloopstrook lezen: de middelste swatch is de middelste kleur. Wanneer je meerdere gelijkmatig verdeelde kleuren tussen twee eindpunten nodig hebt, verhoog dan het aantal gradiëntstappen en kopieer de swatches op de gewenste posities. Dit is de dagelijkse taak waarvoor de mixer is gebouwd, of je nu tinten voor een palet genereert, kleuren voor gegevensvisualisatie uit elkaar plaatst of de nulleider vindt die tussen twee merkkleuren zit.
Voor het bouwen van hele gezinnen met één kleur in plaats van er twee te combineren, is de kleurschakeringen generator past beter, omdat het één kleur combineert met wit, zwart en grijs om tinten, tinten en tonen te produceren. En als u kleuren kiest voor tekst of gebruikersinterface, voert u het resultaat door de color picker en een contrastcontrole, want een kleur die prachtig mengt kan nog steeds een leesbaarheidsdrempel niet halen De bredere workflow, van plukken tot controleren tot verzenden, is vastgelegd in de Webontwikkelaar Toolkit guide.
Waarom zien mijn gemengde kleuren er soms modderig of donker uit?
Twee dingen veroorzaken dit, en beide gaan over de kleurruimte in plaats van over het gereedschap. De eerste is de additieve versus-subtractieve mismatch die al is genoemd: het middelen van verre tinten in RGB drijft naar grijs, dus tegengestelde kleuren op de wielmix naar iets saai. De tweede is dat sRGB-waarden gamma-gecodeerd zijn en niet lineair licht. Een echt fysiek gemiddelde van licht zou eerst worden omgezet in lineaire ruimte, gemiddeld, en vervolgens terug converteren, waardoor middelpunten helderder blijven. De meeste tools, CSS-gradiënten en beeldeditors interpoleren rechtstreeks in gamma-gecodeerde sRGB omdat het snel en voorspelbaar is en overeenkomt met wat ontwerpers verwachten van een schermpercept, dus deze mixer leunt hetzelfde als een helderdere mix. Als je een eindmixer wilt, meng je C. online tools voor gegevensprivacy guide legt uit waarom, modderige midpoints of niet, het doen van deze wiskunde in uw browser in plaats van op een server de juiste standaard is voor ontwerpwerk dat u liever lokaal houdt.
Veelgestelde vragen
Hoe meng je twee kleuren?
Om twee kleuren te mengen, gemiddelde je hun rode, groene en blauwe kanalen, gewogen op basis van hoeveel van elke kleur je wilt. Een 50/50 mix van rode (255, 0, 0) en blauwe (0, 0, 255) gemiddeld tot (128, 0, 128), wat paars is. Deze tool doet die interpolatie voor u en laat u het gewicht verschuiven met de verhoudingsschuifregelaar, zodat u ergens tussen de twee kleuren kunt landen in plaats van alleen het exacte middelpunt.
Wat is het verschil tussen Mix en Multiply?
Mix is een gewogen gemiddelde dat tussen de twee kleuren terechtkomt, dus rood en blauw mengen geeft paars Vermenigvuldigt ze zoals overlappende inkt of lichtfilters dat doen, vermenigvuldigt de kanaalwaarden, zodat het altijd een kleur produceert die zo donker is als of donkerder dan beide ingangen. Rood en blauw vermenigvuldigen geeft zwart, omdat elke kleur het kanaal mist dat de ander heeft. Vermenigvuldigen is een mengmodus van beeldbewerking, geen eenvoudig gemiddelde.
Waarom geeft het mengen van twee felle kleuren soms een modderig resultaat?
Omdat het middelen van RGB-kanalen het resultaat naar grijs verplaatst wanneer de twee kleuren ver uit elkaar op het kleurenwiel zitten Rood en groen zijn gemiddeld dof olijfbruin in plaats van levendig geel, omdat schermkleuren zich vermengen als licht, terwijl het levendige geel dat je zou verwachten afkomstig is van het mengen van pigmenten. Voor een levendigere mix meng je kleuren die dichter bij elkaar liggen, of probeer de schermmodus, die de resultaten helderder houdt.
Kan ik kleuren in HSL mengen in plaats van RGB?
Deze mixer interpoleert in RGB, wat CSS-gradiënten en beeldeditors standaard doen, en het rapporteert het resultaat ook in HSL. Het mengen in RGB is voorspelbaar en komt overeen met hoe een CSS-gradiënt met twee stops wordt weergegeven. Interpolerende tint in HSL kan de lange weg door het kleurenwiel reizen en onverwachte tinten tussendoor produceren. Daarom is RGB-interpolatie de veiligere standaard voor een mengsel voor algemene doeleinden.
Wat verandert de ratioschuifregelaar?
De verhouding stelt in hoe sterk de tweede kleur, of het gemengde resultaat, over de eerste wordt aangebracht, bij 0 procent krijg je de eerste kleur ongewijzigd, bij 100 procent krijg je de volledige tweede kleur of volledige blend voor de gekozen modus, en bij 50 procent krijg je een gelijkmatige splitsing Voor de blendmodi gedraagt het zich als laagdekking in een afbeeldingseditor, waardoor de gemengde kleur over de basis vervaagt.
Hoe krijg ik de kleur halverwege tussen twee kleuren?
Stel de modus in op Mix en de verhouding op 50 procent, en het resultaat is het exacte middelpunt U kunt het ook uitlezen van de verloopstrip, waarbij de middelste swatch de halve kleur is Voor een fijnere controle voegt u meer stappen toe aan het verloop en kopieert u welke tussenliggende swatch overeenkomt met de positie die u nodig heeft tussen de twee kleuren.
Waar worden mengmodi zoals scherm en overlay voor gebruikt?
Het zijn de laagmengmodi van beeldeditors, gedefinieerd voor het web in de W3C Compositing and Blending specificatie Scherm verlicht en wordt gebruikt voor gloeit en highlights, Multiply verduistert en wordt gebruikt voor schaduwen en tinten, en Overlay verhoogt het contrast door de twee te combineren, Als je ze vooraf bekijkt in een mixer, kun je voorspellen hoe twee gekleurde lagen zullen combineren voordat je het toepast in CSS of een ontwerptool.
Welke kleurformaten accepteert de mixer?
De mixer accepteert hex-codes (drie, zes of acht cijfers), rgb () en rgba () waarden, hsl () en hsla () waarden, en veel voorkomende CSS-kleurnamen zoals koraal of rebeccapurple Elke invoer heeft een native kleur swatch die u kunt klikken om visueel te kiezen, en elk resultaat wordt getoond in HEX, RGB en HSL, zodat u kunt kopiëren welk formaat uw stylesheet nodig heeft.
Is de kleurenmixer gratis en privé?
Ja. de kleurenmixer is volledig gratis zonder aanmelding, geen watermerken en geen gebruikslimieten, en elke berekening gebeurt in uw browser. De kleuren die u invoert worden nooit geüpload, dus niets dat u mixt verlaat uw apparaat, en omdat de wiskunde lokaal wordt uitgevoerd, blijft de tool werken als u uw verbinding verliest nadat de pagina is geladen.
