
Värit
Väriteoriaa, paletteja ja liukuvärien sävyjä, koodeineen kopioitavaksi.
200 opasta · 11 aihetta
VäritVäriteorian perusteet ihmisille, jotka eivät suunnittele
4 min lukuaika
Värien hyvään valintaan ei tarvita taidekoulua. Kuusi ajatusta selittää lähes jokaisen värivalinnan, ja jokaisen oppii muutamassa minuutissa.
VäritVäriympyrän käyttö paletin valintaan
4 min lukuaika
Väriympyrä on värien vanhin työkalu ja yhä hyödyllisin. Tässä kerrotaan, miten sellaisen luet, miksi maalarin ympyrä ja näytön ympyrä ovat eri mieltä ja miten siitä tehdään paletti.
VäritVastavärit: kontrasti, joka silti tuntuu tasapainoiselta
4 min lukuaika
Vastakkaiset värit antavat vahvimman kontrastin, jonka väri voi tarjota, ja nopeimman tien suunnitelmaan, joka humisee, tai sellaiseen, joka huutaa. Ero on suhteessa ja vaaleudessa.
VäritAnalogiset värit: helpoin tie rauhalliseen palettiin
3 min lukuaika
Valitse kolme naapuria väriympyrältä, niin epäonnistuminen on melkein mahdotonta. Taito on siinä, että annat niille tarpeeksi kontrastia pysyäksesi mielenkiintoisena ja tiedät, milloin rauha kannattaa rikkoa.
VäritTriadic colors and split-complementary palettes, explained
5 min lukuaika
Three evenly spaced colours can make a palette feel bold and balanced at once, or like a children's toy box. The difference is almost entirely about which colour leads.
VäritMonochromatic color scheme: one hue, a whole identity
4 min lukuaika
One hue sounds limiting until you see how much range lives inside it. Built properly, a single colour can cover backgrounds, text, buttons and gradients, and look more distinctive than a rainbow.
VäritHow to choose brand colors: a step-by-step method
6 min lukuaika
Brand colours are chosen, not found. A clear method gets you from a blank page to a palette that is distinctive, readable and still right in two years' time.
VäritVärien psykologia: mikä on totta ja mikä myyttiä
4 min lukuaika
Taulukot, joiden mukaan punainen tarkoittaa nälkää ja sininen luottamusta, ovat kaikkialla, ja useimmiten liian yksinkertaisia ollakseen hyödyllisiä. Tässä on rehellisempi kuvaus siitä, mitä väri tekee ja miten sitä käytetään hyvin.
VäritVärien merkitykset eri kulttuureissa: varovainen opas
4 min lukuaika
Valkoinen voi tarkoittaa häitä tai hautajaisia. Punainen voi tarkoittaa vaaraa tai onnea. Jos suunnitelmasi matkustavat, tässä on, mitä pääväreillä on eri paikoissa, ja miten tarkistat ennen julkaisua.
VäritPurple gradients: palettes, codes and how to use them
5 min lukuaika
Purple is one of the most-used gradient colours on the web, which makes it both a safe choice and an easy one to get lost in. Here are palettes that feel considered, with the codes to use them.
VäritSiniset liukuvärit: 20 palettia jäästä keskiyöhön
4 min lukuaika
Sininen on suunnittelun turvallisin väri, ja juuri siksi niin monet siniset liukuvärit näyttävät samoilta. Tässä on kaksikymmentä, jotka eivät näytä, vaaleimmasta tummimpaan ryhmiteltyinä, koodeineen ja ajatuksineen.
VäritPink gradients that feel modern, not saccharine
5 min lukuaika
Pink can look like a sweet shop or a fashion magazine. The difference is rarely the pink itself; it is what you put next to it. Here are palettes, pairings and codes for pink that feels current.
VäritSunset gradients: orange, coral and dusk palettes
5 min lukuaika
Most sunset gradients go wrong in the same place: the middle, where blue meets orange and turns to grey. A real sky never does that. Here is the order nature uses, and ten palettes built on it.
VäritGreen gradients: fresh, deep and electric
5 min lukuaika
Green can be a spring morning, a private members' club or a rave flyer. Here are green gradients for each, with codes, and a way out of the leaf-green cliché.
VäritMustat liukuvärit: suunnittelu lähes mustalla
5 min lukuaika
Puhdas musta on reikä näytössä. Kalliilta tuntuvat mustat liukuvärit rakennetaan lähes mustista, joiden sisällä on hitusen väriä, ja valosta, joka liikkuu.
VäritRed gradients: energy without the alarm
5 min lukuaika
Red gets attention faster than any other colour, which is exactly why it goes wrong. How to build red gradients that feel alive, warm and confident instead of loud.
VäritRainbow gradients that don't look like a default preset
5 min lukuaika
The default rainbow has a glaring yellow stripe and a dark blue hole in it. Fix the lightness, choose your arc and the spectrum becomes one of the most joyful tools you have.
VäritVärikontrasti: luettavaa tekstiä kaikille
4 min lukuaika
Kontrasti on ero sanojen välillä, jotka ihmiset lukevat, ja sanojen, jotka he ohittavat. WCAG-luvut selkokielellä, miten ne tarkistetaan ja mikä muuttuu, kun tausta on liukuväri.
VäritHeksakoodit, RGB, HSL ja OKLCH selitettynä
4 min lukuaika
#7c3aed, rgb(124 58 237), hsl(262 83% 58%) ja oklch(54.1% 0.247 293) ovat sama violetti. Tässä kerrotaan, mitä kukin merkintätapa oikeasti sanoo ja milloin kukin ansaitsee paikkansa.
VäritVäripaletti kuvasta: näin poimit sen valokuvasta
4 min lukuaika
Pipetti antaa sinulle pikselin. Paletti tarvitsee värit, jotka muistat kuvasta, oikeissa suhteissa. Näin pääset toisesta toiseen.
Värit60 30 10 -sääntö: värisuhde suunnitelmiin ja brändeihin
4 min lukuaika
Useimmat paletit epäonnistuvat mittasuhteissa, eivät värivalinnoissa. Kolme lukua kertoo, kuinka paljon kutakin väriä kannattaa käyttää, ja ne toimivat puhelimen näytöllä yhtä hyvin kuin olohuoneissa, joista ne ovat peräisin.
VäritWarm and cool colors: using temperature on purpose
5 min lukuaika
Every colour has a temperature, including your greys and whites. Learn to read it and you can make a design feel closer, calmer or brighter without changing a single hue.