Värit ja luovuus– Kolmen värin Color Mixer

Tein hiljattain pienen sovelluksen värien luovaan kokeilemiseen.

Sen nimi on Color Mixer – minimalistinen, selainpohjainen työkalu,
jonka avulla voi luoda kauniita liukuvärejä ja kuvioita helposti.

Ajatus tähän ei syntynyt aivan tyhjästä.

Jo muutama vuosi sitten tein yksinkertaisen sovelluksen,
jolla voi kokeilla erilaisia taustavärejä:
Color Picker

Olin jo pitkään ajatellut kehittää sitä eteenpäin,
mutta varsinainen kipinä syntyi erään blogikirjoituksen myötä.

Kirjoituksessa kerrottiin Milanon–Cortinan vuoden 2026 talviolympialaisten avajaisista.
Lavan yläpuolelle ilmestyi kolme valtavaa maalituubia,
ja värikäs esitys perustui teemaan ”ARMONIA”.

Punainen, sininen ja keltainen – taiteen kolme pääväriä –
ovat värejä, joita ei voi enää jakaa pienempiin osiin,
ja silti juuri niistä syntyy rajaton määrä uusia sävyjä.　

Kirjoittaja kertoi myös, kuinka hän innostui maalaamaan vesiväreillä
kuvan kissastaan, joka katselee lunta ensimmäistä kertaa.
Maalaus oli herkkä ja värisävyiltään hyvin vaikuttava.

Tämä kaikki jäi mieleeni.
Se sai minut pohtimaan värejä uudella tavalla – niiden yksinkertaisuutta ja samalla rajattomia mahdollisuuksia.

Samalla mieleeni tuli myös Marchanin (Masako Wakamiya) Excel-taide.
Hän käyttää töissään liukuvärejä hyvin vapaasti,
mutta kolmen värin liukuvärejä ei juuri näy.

Marchan käyttää usein myös erilaisia reunusvariaatioita.
Niitä ei ole tässä sovelluksessa, mutta yritin jäljitellä Excelin kuvioita
ja lisäsin mukaan kuusi erilaista liukuvärivaihtoehtoa.

Jos aihe kiinnostaa, voit tutustua hänen töihinsä täällä:

Excel Art Museum
Enjoy! Excel Art | NPO Broadband School Association

Näistä ajatuksista syntyi Color Mixer – työkalu, jolla voi kokeilla ja yhdistellä värejä helposti.
Seuraavaksi kerron sovelluksen tärkeimmistä toiminnoista.

Toiminnot

• Kahden tai kolmen värin sekoitus
  Tuki 2- tai 3-värisille väripaleteille.
• Älykäs satunnaistaminen
  • Chaos Mode: täysin satunnaiset värit
  • Harmonic Mode: väriteoriaan (kultainen leikkaus) perustuvat harmoniset värit
• Liukuvärit ja kuviot
  Voit vaihtaa pehmeän CSS-liukuvärin ja erilaisten CSS-kuvioiden välillä (pisteet, ruudukko, aallot jne.).
• Interaktiivinen käyttöliittymä
  Värit voi järjestää uudelleen vetämällä, ja tulos näkyy heti.
• Kehittäjäystävällinen
  Hex- ja RGB-arvot sekä CSS-taustakoodi voi kopioida yhdellä klikkauksella.
• Tumma tila (Dark Mode)
  Suunniteltu mukavaan käyttöön myös iltaisin.
• Vaalea tila (Light Mode)
  Taustavärinä käytetään tämän vuoden väriä: Cloud Dancer.
• Dynaaminen favicon
  Selaimen välilehden kuvake muuttuu reaaliajassa sekoittamasi värin mukaan.

Output

Voit kopioida:
– sekoitetun värin tuloksen
– CSS-taustaominaisuuden
Esimerkki (voit kokeilla CodePenssä tai JSFiddlessä)

🎨 Kokeile Color Mixeria ja leiki väreillä.
Color Mixer
Ehkä löydät yllättäviä yhdistelmiä – tai pienen hetken pysähtyä.

Lopuksi haluan osoittaa kiitokseni eräälle blogikirjoittajalle ja Marchanille (Masako Wakamiya) – teidän ideanne inspiroivat tämän sovelluksen syntyä.

Tämä pieni sovellus on syntynyt teidän jalanjäljissänne.

💻 Lähdekoodi GitHubissa:
https://github.com/Makutosi/color-mixer