Sisältö
- 01. HueSnap
- 02. Khroma
- 03. Coolors.co
- 04. Adobe Color CC
- 05. Colordot
- 06. Egrgradientit
- 08. Canva-väripalettigeneraattori
- 09. Materiaalisuunnittelupaletti
- 10. Värikoodi
- 11. Värilaskin
- 12. HTML-värikoodi
- 13. W3Schools: Colors -opetusohjelma
- 14. Digitaalinen värimittari (Mac)
Verkkosuunnittelijoina yksi tärkeimmistä valinnoistamme liittyy värivalikoimaamme. Valitse väärät vaihtoehdot ja saatat menettää mahdollisuuden. On totta - valitsemillamme väreillä voi olla psykologinen vaikutus niihin, jotka katsovat niitä.
Esimerkiksi punaista pidetään yleensä korkean energian värinä, kun taas sininen merkitsee rauhaa ja rauhaa. Harkitse tämän asian havainnollistamiseen värejä, joita saatat käyttää lasten leluja myyvällä verkkosivustolla verrattuna lakitoimiston sivustoon. Mahdollisuudet ovat, että valitset kirkkailla, eloisilla väreillä ensimmäistä varten ja vaimennettuja sinisiä ja harmaita sävyjä jälkimmäiselle.
Mutta mistä tiedät, mitkä värit toimivat hyvin yhdessä? Onneksi sinun ei tarvitse olla väriteorian mestari, jotta voit koota toimivan väripaletin. Tässä on joitain parhaita ilmaisia värisivustojen suunnittelutyökaluja (plus yksi erityinen bonus lopussa Mac-käyttäjille).
01. HueSnap
Inspiraatio voi iskeä milloin tahansa. Se voi olla hotellihuoneen sisustus tai puiston valo yhtenä iltana, joka herättää inspiraation seuraavaan verkkosivustosi värimaailmaan. Sillä kun näin tapahtuu, HueSnap on täällä auttamassa. Voit napsauttaa valokuvan ja purkaa värit kuvasta HueSnapilla ja tehdä niistä paletin.
Sovellus on räätälöity mobiilikäyttöön, ja voit tallentaa ja jakaa palettejasi muiden kanssa. Paletin muokkaamiseen on paljon ominaisuuksia, kuten vaihtoehtoja täydentävien ja yhdistettyjen värien valitsemiseksi, ja paleteissa voi olla enintään kuusi väriä.
02. Khroma
Khroma on tekoälyn värityökalu, jonka tarkoituksena on auttaa sinua helposti selaamaan ja vertaamaan alkuperäisiä väriyhdistelmiä. Sen avulla käyttäjät kouluttavat tekoälyn algoritmia toimimaan kuin aivojensa jatke. Käyttäjät valitsevat ensin haluamansa 50 väriä, ja näitä värejä käytetään kouluttamaan hermoverkkoa, joka tunnistaa satoja tuhansia muita samanlaisia värejä. Lue lisää Khromasta ja sen käytöstä täältä.
03. Coolors.co
Coolors tarjoaa laajan valikoiman työkaluja paletin säätämiseen juuri haluamallasi tavalla. Lisäksi voit viedä lopullisen luomuksesi monissa eri muodoissa, jotta voit käyttää sitä käytännössä missä haluat.
Coolors ei ole vain työkalu väripaletin luomiseen, vaan sen avulla voit myös tarkastella muiden käyttäjien valmistuneita luomuksia, jotta voit saada inspiraatiota. Tutki-osiossa on satoja (ellei tuhansia) paletteja, joita voit tarkastella, tallentaa ja muokata itse. Vielä parempi, Coolors on saatavana pöytätietokoneisiin, ja iOS-sovelluksena, Adobe Photoshop- ja Illustrator-lisäosana - ja jopa Google Chrome -laajennuksena helppoon pääsyyn.
04. Adobe Color CC
Ilmainen työkalu Adobe Color CC on ollut käytössä jonkin aikaa, ja se on yksi parhaista värityökaluista väripaletin valitsemiseen. Paitsi että voit luoda omia värejäsi, voit myös tutkia, mitä muut ovat luoneet.
Valitse väri pyörästä tai kuvasta ja luo väripaletti käyttämällä värisääntöjä, kuten käyttämällä vain täydentäviä värejä, yksivärisiä värejä tai valitsemasi värin sävyjä. Tai napsauta kutakin väriä ja tutki väripyörää mukauttaaksesi valintaa. Lisäbonuksena voit tallentaa luomasi teemat Adobe-kirjastoon.
05. Colordot
Colordot by Hailpixel on erinomainen ilmainen online-työkalu väripaletin luomiseen. Yksinkertaisten hiiren eleiden avulla voit valita ja tallentaa värejä. Siirrä hiirtä edestakaisin sävyn saamiseksi; ylös ja alas keveyden vuoksi; vieritä kylläisyyttä ja tallenna väri palettiin napsauttamalla. Napsauttamalla tog-kuvaketta näet kunkin värin RGB- ja HSL-arvot. Siinä on myös 0,99 dollaria / 0,99 puntaa iOS-sovellus, jonka avulla voit siepata värejä kameralla.
06. Egrgradientit
Kun olet vastuussa helposti luettavan CSS: n luomisesta, tapa on joskus käyttää vakiovärejä ja värinimiä. Brian Maier Jr: n 147 värin ansiosta voit saada vilauksen kaikista niistä ja valita sinulle sopivat.
Se sisältää 17 vakioväriä sekä 130 muuta CSS-värinimeä. Suodata tulokset sinisen, vihreän ja niin edelleen sävyjen perusteella tai valitse koko sateenkaaresta 147 väriä.
08. Canva-väripalettigeneraattori
Canvan Color Palette Generator on täydellinen, jos haluat luoda väripaletin tietyn kuvan ympärille. Vaikka muut työkalut tarjoavat samanlaisia vaihtoehtoja, Canvan on erittäin helppo käyttää: lataat kuvan ja generaattori palauttaa paletin viidestä pääväristä. Voit napsauttaa haluamiasi värejä ja kopioida HEX-arvon leikepöydälle.
Valitettavasti tässä Canvan tarjouksen hyödyllisyys loppuu, koska kaikki, mitä voit tehdä sen palettigeneraattorilla - et voi säätää paletin värejä. Ainoat muut vaihtoehdot sinulla on kopioida annetut hex-arvot tai ladata toinen valokuva.
09. Materiaalisuunnittelupaletti
Materiaalisuunnittelupaletin avulla voit valita kaksi väriä, jotka muunnetaan sitten täysväripalettiksi ladattavaksi esikatselun kanssa.
Yhtiö tarjoaa myös materiaalisuunnitteluvärejä, joiden avulla suunnittelijat voivat nähdä värin eri sävyt sekä vastaavat HEX-arvot.
10. Värikoodi
Tamino Martiniuksen ja Andreas Stormin ColourCode on samanlainen kuin Colordot, mutta se tarjoaa hieman enemmän ohjeita. Tämä ilmainen työkalu osuu suoraan kasvoihin ja näyttää taustan, joka muuttaa väriä kohdistimen liikkeellä. Tämän lisäksi tämä työkalu tarjoaa erilaisia luokkia paletille (analoginen, kolmikko, nelos, yksivärinen, yksivärinen valo jne.).
ColourCode-toiminnolla voit asettaa eri vaihtoehdot värirenkaalle alkuperäisen yhdistelmän luomiseksi. Voit myös tallentaa palettisi tai viedä sen SCSS- tai LESS-tiedostona. Voit jopa viedä PNG: hen, jos haluat.
11. Värilaskin
Värilaskin on yksinkertainen: valitset värin ja värisävyn. Vastineeksi saat takaisin suositellun värimaailman tulokset.
Tältä sivustolta on kuitenkin hienoa, että siinä käsitellään myös vähän yksityiskohtia väriteoriasta ja siitä, miten se liittyy värivalintoihisi.
12. HTML-värikoodi
Tämä Dixon & Moen pullollaan oleva ilmainen työkalupaketti sisältää perusteellisen värivalitsimen, jossa on runsaasti selityksiä värisäännöistä; sarja värikarttoja, joissa on litteät muotoiluvärit, Googlen materiaalisuunnittelumalli ja klassinen verkkoturvallinen väripaletti; ja luettelo tavallisista HTML-värinimistä ja -koodeista.
Tämä sivusto tarjoaa myös oppaita ja muita resursseja web-suunnittelijoille sekä vaihtoehtoja tulosten viemiseen työkaluistaan HEX-koodeina, HTML-, CSS- ja SCSS-tyyleinä.
13. W3Schools: Colors -opetusohjelma
Jos etsit all-in-one-ratkaisua, joka sisältää oppaat väreille sekä useita erilaisia työkaluja, W3Schoolsin Colors Tutorial on täydellinen valinta.
Voit oppia paitsi väriteoriasta, väripyöristä ja värisävyistä, mutta voit myös käyttää muita sen sisältämiä työkaluja, kuten Color Converter. Tämän työkalun avulla voit muuntaa minkä tahansa värin nimiksi, HEX-koodeiksi, RGB-, HSL-, HWB- ja CMYK-arvoiksi.
14. Digitaalinen värimittari (Mac)
OK, Mac-käyttäjät ... tämä on sinulle. Koneen sisäänrakennetulla Digital Color Meter -työkalulla voit 'napata' väriä mistä tahansa näytöltä ja saada sitten kyseisen värin arvot desimaalina, heksadesimaalina tai prosenttina. Lisäksi voit jopa kopioida valitun värin tekstinä tai kuvana.
