Värivalettogeneraattori

Luo harmonisia väripaleteja väriteorian perusteella — täydentävät, triadiset, analogiset ja muut

Jakaa:
Click any color swatch to copy its hex code
Copied!

Miksi käyttää värivalettogeneraattoria?

Harmonisten värien valitseminen vaatii väriteorian tuntemusta. Generaattorimme käyttää HSL-matematiikkaa laskeakseen automaattisesti harmonisia paletteja mistä tahansa perusväristä, jolloin suunnittelijat ja kehittäjät voivat luoda ammattimaisia värisuunnitelmia sekunneissa.

🎨

6 harmoniatilaa

Täydentävä, triadinen, analoginen, jaettu täydentävä, tetradinen, monokromaattiset sävyt

👁️

Värinäytteen esikatselu

Napsauta värinäytettä kopioidaksesi hex-koodin suoraan leikepöydälle

📋

CSS-muuttujien vienti

Vie koko paletti mukautetuiksi CSS-ominaisuuksiksi — liitä vain tyylitiedostoon

Paletin luominen 3 vaiheessa

1

Valitse perusväri

Käytä värinvalitsinta tai syötä hex-koodi asettaaksesi brändi- tai lähtövärin

2

Valitse harmoniatyyppi

Valitse täydentävä, triadinen, analoginen tai muu harmonia, joka sopii suunnittelullesi

3

Kopioi ja käytä

Napsauta värinäytettä kopioidaksesi hex-koodin tai kopioi koko paletti 'Kopioi CSS-muuttujina'

Väripalettien käyttötapaukset

🌐

Verkkosuunnittelu

Luo täydellinen värijärjestelmä verkkosivustolle brändin päävärin perusteella

🏢

Brändi-identiteetti

Kehitä ammattimainen bränditelavetti, jossa on ensisijainen, toissijainen ja korostusväri

📱

UI/UX-suunnittelu

Luo saavutettavia, visuaalisesti johdonmukaisia värejä sovelluksen painikkeisiin, tekstiin ja taustaan

📊

Datavisualisointi

Luo erottuvia kategoriavärejä kaavioihin, taulukoihin ja analytiikkakoontinäyttöön

Värisuunnittelun parhaat käytännöt

✓ Tarkista värikontrasti (WCAG)

Varmista, että teksti/tausta-parit täyttävät WCAG AA -kontrastisuhteet (4,5:1 normaalille tekstille).

✓ Rajoita palettia

Pidät kiinni 3-5 väristä: 1 ensisijainen, 1 toissijainen, 1-2 korostus, neutraalit. Liian monet värit luovat visuaalista häiriötä.

✓ Huomioi värien psykologia

Sininen=luottamus/ammattimaisuus, vihreä=kasvu/menestys, punainen=kiireellisyys/energia, keltainen=optimismi.

✓ Testaa tummassa tilassa

Säädä kirkkausarvoja luodaksesi tumman tilan versiot. Puhdas musta (#000) tai valkoinen (#fff) ei usein ole ihanteellinen.

❓ Usein kysytyt kysymykset

Mikä on täydentävä värisuunnitelma?
Täydentävät värit ovat suoraan vastakkain väriympyrällä (sininen ja oranssi, punainen ja vihreä jne.). Se luo korkean kontrastin ja visuaalisen energian — ihanteellinen CTA-painikkeisiin ja korostuselementteihin.
Milloin käyttää analogista värisuunnitelmaa?
Analogiset suunnitelmat käyttävät 3 vierekkäistä väriä väriympyrällä. Se luo harmonisen ja rauhallisen suunnittelun matalalla kontrastilla — ihanteellinen taustaväreille, liukuvärjäyksille ja pehmeille UI-suunnitteluille.
Mikä on ero HSL:n, RGB:n ja Hexin välillä?
Kaikki kolme edustavat samaa väriä eri muodoissa. Hex (#6366f1) käytetään CSS:ssä. RGB (99, 102, 241) ilmaisee punainen/vihreä/sininen. HSL (237°, 84%, 67%) käyttää sävyä, kylläisyyttä ja kirkkautta.
Miten luodaan tummaan tilaan sopiva väripaletti?
Tummassa tilassa laske kirkkausarvoja merkittävästi (esim. L:60% → L:30%) ja vaihda teksti/tausta-roolit. Säilytä samanlaiset sävy- ja kylläisyysarvot, säädä kirkkaus luettavuutta varten tummaa taustaa vasten.