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 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 de scheidbare blendmodi die zijn gedefinieerd in de W3C Compositing and Blending-specificatie: vermenigvuldigen, screenen, overlay, donkerder maken, lichter maken, verschillen en gemiddeld Dit zijn dezelfde bewerkingen die beeldeditors zoals Photoshop en GIMP tussen lagen toepassen Vermenigvuldigt altijd donkerder (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.