CodeKitHubMikä tämä työkalu on?
Värien sekoitin interpoloi lineaarisesti kahden värin punaisen, vihreän ja sinisen kanavan välillä valitussa suhteessa — sama matematiikka, jota liukuväri käyttää sisäisesti. 0 %:ssa tulos on väri A, 100 %:ssa väri B ja 50 %:ssa kunkin RGB-kanavan aritmeettinen keskiarvo.
Tämä eroaa fyysisen maalin sekoittamisesta (joka on subtraktiivista ja riippuu pigmentistä), eikä se ole sama asia kuin keskiarvon laskeminen HSL-avaruudessa — lineaarinen RGB-interpolointi on se, mitä CSS-liukuvärit, suunnittelutyökalut ja useimmat "väri kahden värin välillä" -työkalut käyttävät, joten tulos vastaa sitä, mitä näkisit selaimen liukuvärissä samojen kahden värin välillä.
Miksi käyttää sitä?
- Löydä luonnollisen näköinen hover- tai aktiivitila-väri, joka asettuu perusvärisi ja korostevärin väliin — sen sijaan että arvaisit satunnaisen säädön.
- Näe tarkka HEX-koodi missä tahansa suhteessa, älä vain arvioi silmämääräisesti liukuväriruutukaappausta.
- 11-vaiheinen porrastus antaa sinulle täyden paletin yhdestä väristä toiseen yhdellä klikkauksella, hyödyllinen datan visualisointiin tai monivaiheiseen liukuväriin.
- Klikkaa mitä tahansa vaihetta kopioidaksesi sen HEX-koodin heti.
- Ilmainen, välitön ja täysin paikallinen — ei latausta, ei tiliä.
Käyttöohje
- Valitse väri A ja väri B värivalitsimilla tai kirjoittamalla HEX-koodi.
- Vedä suhdeliukua asettaaksesi, kuinka paljon väriä B sekoitetaan mukaan.
- Lue tuloksena saatavat HEX- ja RGB-arvot värinäytteen yläpuolelta.
- Klikkaa mitä tahansa näytettä alla olevassa 11-vaiheisessa portaikossa kopioidaksesi sen HEX-koodin.
Esimerkki
Syöte
Väri A #3B82F6 (sininen), väri B #F59E0B (meripihka), suhde 50 %Tuloste
#9B9E7D — rgb(155, 158, 125)Tarkalleen 50 %:ssa jokainen RGB-kanava on kahden syöttövärin kanavien aritmeettinen keskiarvo.
Usein kysytyt kysymykset
Miksi tämä ei vastaa sitä, minkä saisin sekoittamalla oikeaa maalia?
Maalin sekoittaminen on subtraktiivista (pigmentit absorboivat valoa) ja riippuu käytetyistä pigmenteistä — sinisen ja keltaisen maalin sekoittaminen tuottaa esimerkiksi vihreää. Tämä työkalu sekoittaa valoa (RGB-kanavia) additiivisesti/lineaarisesti, mikä on tapa, jolla näytöt, CSS-liukuvärit ja useimmat digitaaliset suunnittelutyökalut sekoittavat värejä. Kaksi järjestelmää tuottavat aidosti erilaisia tuloksia tarkoituksella, ei virheestä johtuen.
Onko tämä sama asia kuin CSS:n linear-gradient kahden värin välillä?
Kyllä — CSS:n linear-gradient(colorA, colorB) interpoloi RGB-kanavia samalla tavalla kuin tämä työkalu, joten väri, jonka näkisit kyseisen liukuvärin keskikohdassa, vastaa tämän työkalun 50 %:n tulosta.
Miksi sekoitettu väri näyttää joskus sameanharmaalta?
Kahden kylläisen mutta hyvin erilaisen sävyn (kuten sinisen ja oranssin, jotka ovat lähes toistensa vastavärejä) sekoittaminen RGB-avaruudessa tuottaa usein matalakylläisen, harmaanruskean keskikohdan — tämä on RGB-interpoloinnin todellinen ominaisuus, ei virhe. Jos haluat elävämmän sekoituksen, kokeile sekoittaa värejä, jotka ovat lähempänä toisiaan väriympyrässä, tai sekoita HSL-avaruudessa säätämällä sävyä ja pitämällä kylläisyyden korkeana (tämä suora RGB-sekoitin ei tee sitä).
Voinko sekoittaa useampaa kuin kahta väriä kerralla?
Ei yhdessä vaiheessa — työkalu sekoittaa tasan kaksi väriä. Yhdistääksesi kolme väriä, sekoita ensin kaksi valitsemallasi suhteella, kopioi tulos ja liitä se uudeksi väriksi A kolmatta väriäsi vastaan. Vaiheittainen toteutus antaa myös hallinnan painotuksiin, mitä yksittäinen kolmen värin keskiarvo ei antaisi.
Pitäisikö minun käyttää tätä vai värisävygeneraattoria?
Jos tarvitset värin, joka asettuu kahden eri värin väliin — esimerkiksi siirtymäsävyn brändisi sinisen ja korostuksen meripihkan välille — käytä tätä sekoitinta. Jos tarvitset yhden värin vaaleampia ja tummempia versioita (hover-tilat, taustat, Tailwind-tyylinen 50–900-portaikko), käytä sen sijaan värisävygeneraattoria: se pitää sävyn ja kylläisyyden kiinteinä ja vaihtelee vain vaaleutta, joten jokainen tulos pysyy selvästi samassa väriperheessä.
Mitä väriformaatteja voin kirjoittaa syöttökenttiin?
Tekstikentät hyväksyvät 6-numeroisia HEX-koodeja, joko #-etuliitteellä tai ilman (esim. 3B82F6 tai #3B82F6). Lyhennettyä 3-numeroista hex-koodia, rgb()-merkintää tai CSS-värinimiä ei jäsennetä siellä — mutta voit valita minkä tahansa värin visuaalisesti kunkin kentän vieressä olevalla natiivilla värivalitsimella, ja HEX-kenttä päivittyy vastaavasti.