Miten luon väripaletin yhdestä brändiväristä?

Syötä heksakoodi, värin nimi kuten teal, tai rgb()- tai hsl()-arvo Perusväri-kenttään ja paina Enter. Valitse sitten tyyppi, kuten Brändipaletti, Komplementaarinen, Triadi tai Yksivärinen, ja napsauta värimallia kopioidaksesi sen.

Mitä vientimuotoja palettigeneraattori tukee?

Voit kopioida värit muodoissa hex, rgb, hsl tai oklch ja viedä CSS-, SCSS-, JSON-, Tailwind 50-950 -asteikko-, PNG-, SVG-, GIMP/Krita GPL-, Adobe ASE- tai Photoshop ACO -tiedostoja. Näkyvät vaihtoehdot riippuvat vientiasetuksista.

Miten voin tarkistaa, ovatko palettini värit luettavissa valkoisella tai mustalla?

Jokainen väri näyttää Valkoisella- ja Mustalla-merkit WCAG-tasoilla: AAA, AA, AA suuri tai Ei läpi. Tekstin ja taustan tarkistus -osiossa voit myös valita tekstin ja taustan värin testataksesi tiettyä paria.

Miten pidän osan väreistä ja sekoitan loput uudelleen?

Napsauta Lukitse tämä väri -painiketta niissä värimallipaloissa, jotka haluat pitää, ja paina sitten Sekoita. Lukitut värit pysyvät, ja muut vaihtuvat. Voit myös käyttää Muokkaa tätä väriä -toimintoa muuttaaksesi yksittäistä mallipalaa, mikä merkitsee paletin muokatuksi.

Voinko jakaa palettini tai poimia värin näytöltäni?

”Jaa tulos” tekee linkin, jossa on perusväri, tyyppi ja kaikki muokkaukset, joten jokainen sen avaava näkee saman paletin. Puhelimessa avautuu jakovalikko, tietokoneella linkki kopioidaan. ”Poimi näytöltä” käyttää selaimen EyeDropper-työkalua, joka on tarjolla vain sitä tukevissa selaimissa, pääasiassa Chromium-pohjaisissa.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

🎨

Väripalettigeneraattori ilmaiseksi

Luo täydentäviä, analogisia, triadisia ja monokromaattisia väripaletteja mistä tahansa perusväristä. Kopioi heksadesimaaliarvot yhdellä napsautuksella.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Perusväri

Kirjoita heksakoodi, värin nimi kuten teal tai tomato, tai rgb(20, 184, 166) / hsl(174, 80%, 40%) ja paina Enter.

Brändipaletti · 7 väriä

Kopiointimuoto

Vie:Hex-tunnisteet PNG/SVG-kuvaan

Perusväri

Valkoisella 2,5Ei läpi

Mustalla 8,4AAA

Korostusväri

Valkoisella 2,9Ei läpi

Mustalla 7,2AAA

Vaalea sävy

Valkoisella 1,1Ei läpi

Mustalla 19,4AAA

Tumma sävy

Valkoisella 9,0AAA

Mustalla 2,3Ei läpi

Neutraali vaalea

Valkoisella 1,1Ei läpi

Mustalla 19,3AAA

Neutraali keski

Valkoisella 4,1AA suuri

Mustalla 5,1AA

Neutraali tumma

Valkoisella 16,1AAA

Mustalla 1,3Ei läpi

Tekstin ja taustan tarkistus

Tekstin väriTausta

Suuri otsikkoesimerkki

Leipätekstiesimerkki tälle parille

8,44:1Normaali teksti AAASuuri teksti AAA

Kokeile näitä

Haluatko värejä valokuvasta? Käytä kuvan värinpoimintaa

Yleiset käyttötavat

Luo väripaletti verkon suunnitteluunLuo harmonisia värijärjestelmiä verkkosivuille, web-sovelluksille ja käyttöliittymäkomponenteille.
Luo brändin väripalettejaKehitä täydellinen brändin värijärjestelmä yhdestä brändin väristä — ensisijainen, toissijainen, aksentti ja neutraalit.
Luo väripaletti taiteeseen ja kuvitukseenLuo harmonisia värikombinaatioita digitaaliseen taiteeseen, kuvitukseen ja luoviin projekteihin.
Luo värityylejä Figmaa vartenLuo väripaletteja käytettäväksi Figma-värivälineinä ja suunnittelun symbolien pohjana.
Luo pimeän tilan väripalettejaLuo kevyt ja tummat väripalettisi variantit pimeän tilan tuen rakentamiseksi.

Miten se toimii

Työkalu on rakennettu ilman ulkoisia kirjastoja — kaikki värilaskenta tapahtuu käsin kirjoitetulla JavaScriptillä suoraan selaimessasi. Se muuntaa valitsemasi värin heksan ja HSL:n välillä, ja soveltaa sitten klassisia värioppisääntöjä (komplementaarinen, triadinen, analoginen jne.) sävypyörän aritmetiikan kautta tuottaakseen jokaisen paletin.

1
Heksasta HSL:ksi -muunnos
Kun valitset värin, työkalu jäsentää heksamerkkijonon RGB-komponenteiksi ja muuntaa ne HSL:ksi (sävy, kylläisyys, vaaleus). Sävy on 0–360 asteen sijainti värikehällä; koko palettilaskenta tapahtuu tässä avaruudessa.
2
Sävyaritmetiikka harmonioille
Jokainen palettityyppi on kiinteä kiertokaava, jota sovelletaan perussävyyn. Komplementaarinen lisää 180°, triadinen lisää 120° ja 240°, tetradinen askeltaa 90°:tta, jaettu komplementaarinen käyttää 150°:tta ja 210°:tta. Monokromaattinen ja sävyt pitävät sävyn ja kylläisyyden vakiona samalla, kun vaaleutta askelletaan ylös ja alas.
3
HSL:stä heksaksi -tuloste
Jokainen laskettu HSL-kolmikko muunnetaan takaisin heksaväriksi vakiokromakaavalla. Tulokset näytetään väriliuskana automaattisesti kontrastoiduin nimikkein (tumma teksti vaaleilla näytteillä, vaalea teksti tummilla) yksinkertaisen luminanssikynnyksen perusteella.
4
Vie haluamassasi muodossa
Paletti voidaan kopioida heksamerkkijonoina tai viedä CSS-muuttujatiedostona (:root { --color-1: … }), SCSS-muuttujina, Tailwind-asetuskatkelmana, JSON-oliona tai PNG-väriliuskana. PNG-vienti käyttää selaimen Canvas-rajapintaa (toDataURL) piirtääkseen jokaisen näytteen heksanimikkeineen — kaikki luodaan paikallisesti napsautuksella.

Liittyvät työkalut

🎨

Satunnainen värigeneraattori

Luo satunnaisia värejä yksi kerrallaan tai viiden värin paletiksi, lukitse mieleisesi, kopioi HEX-, RGB- tai HSL-arvoja ja vie paletti PNG- tai CSS-tiedostona.

Kokeile sitä

🎨