Color Mixer

Een kleurenmixer mengt twee kleuren in een nieuwe en toont u het resultaat in HEX, RGB, en HSL U geeft het een eerste kleur en een tweede kleur in elke gangbare syntaxis (een hex code zoals #4466EE, een rgb () of hsl () waarde, of een CSS naam zoals koraal), kies hoeveel van de tweede kleur in te vouwen, en het berekent de gemengde kleur direct Het bouwt ook een gradiënt van tussenstappen tussen de twee kleuren, zodat u de hele overgang kunt zien in plaats van een enkel middelpunt.

De gradiëntstrip doet ook dienst als kleurenmixer grafiek Voer #FF0000 en #0000FF in, stel Gradiëntstappen in op 3 en druk op Mix Colors: de strip toont vijf stalen, #FF0000, #BF0040, #800080, #4000BF en #0000FF, en het gemengde resultaat bij een 50% verhouding is #800080 Als primaire kleurenmixer mengt het licht, niet verf Rood en geel geven oranje #FF8000, maar blauw en geel geven grijs #80000 kleuren in plaats van de groene mixer.

De eenvoudige mix is een gewogen gemiddelde: bij een verhouding van 50 procent draagt elke kleur gelijk bij, en interpoleert het gereedschap elk rood, groen en blauw kanaal lineair tussen de twee ingangen Schuif de verhouding naar 0 en je houdt de eerste kleur; schuif deze naar 100 en je landt op de tweede Dit is hetzelfde wiskundige CSS gebruikt voor een gradiënt met twee stops, en daarom is het middelpunt van een rood-naar-blauw gradiënt het paars dat dit hulpmiddel rapporteert.

Naast een gewone blend biedt de mixer zes scheidbare blendmodi die zijn gedefinieerd in de W3C Compositing and Blending-specificatie (multiply, screen, overlay, darken, lighten and difference) plus een eenvoudig gemiddelde Dit zijn dezelfde bewerkingen die beeldeditors zoals Photoshop en GIMP tussen lagen toepassen Vermenigvuldigt altijd (rood maal blauw is zwart), scherm wordt altijd lichter (rood op blauw is magenta) en verschil geeft je de kanaal-voor-kanaal afstand tussen twee kleuren De verhouding werkt dan als laagdekking en bepaalt hoe sterk het gemengde resultaat over de eerste kleur wordt toegepast.

Alles draait client-side in uw browser De kleuren die u invoert verlaten nooit het tabblad, en omdat de kleurenwiskunde gewoon rekenen is, werkt de tool offline zodra de pagina is geladen Ontwerpers grijpen naar een mixer om een kleur te vinden halverwege tussen een merk primair en een neutraal, om tint - en accentschalen te bouwen, of om een voorbeeld te bekijken hoe twee lagen zullen combineren voordat ze zich in een ontwerpbestand vastleggen Ontwikkelaars gebruiken het om gradiëntstops te genereren, hover states te berekenen en een gemengd resultaat rechtstreeks te vertalen naar een HEX - of HSL-waarde die ze in CSS kunnen plakken.