Värit ja suunnittelu

Valitse, muunna ja yhdistele värejä sekä luo CSS suunnitelmiisi.

• Border-radius-generaattori Muotoile CSS border-radius -arvo visuaalisesti vedettävillä kahvoilla. Aseta kulmat px- tai %-yksiköillä, käytä 8 arvon ellipsisyntaksia ja kopioi koodi.
• Box-shadow-generaattori Suunnittele kerroksellisia CSS-varjoja reaaliaikaisella esikatselulla. Säädä siirtymä, sumennus, levitys, väri ja sisävarjo, kokeile neumorfismia ja kopioi.
• Clip-path-generaattori Piirrä CSS clip-path -muotoja vedettävillä pisteillä. Muokkaa monikulmioita, ympyröitä, ellipsejä ja suorakulmioita, aloita esiasetuksista ja kopioi koodi.
• CSS-liukuvärigeneraattori Luo lineaarisia, säteittäisiä ja kartiomaisia CSS-liukuvärejä reaaliaikaisella esikatselulla. Lisää ja vedä värikohtia, aseta kulma ja kopioi koodi.
• Cubic-bezier-editori Suunnittele CSS-easing-käyriä vedettävällä cubic-bezier-editorilla, vertaa niitä lineaariseen animaatioon ja kopioi cubic-bezier()- tai linear()-versio.
• Flexbox- ja Grid-testialusta Rakenna flexbox- ja CSS Grid -asetteluja visuaalisesti. Aseta säiliön ja kohteiden ominaisuudet, nimeä ruudukon alueet, näe tulos heti ja kopioi CSS ja HTML.
• Fonttien osajoukkotyökalu Luo fontista osajoukko tarvitsemillesi merkeille HarfBuzzilla selaimessasi. Saat pienemmän TTF/OTF- ja WOFF-tiedoston, esikatselun ja @font-face-säännön.
• Fonttiparien esikatselu Esikatsele otsikoiden ja leipätekstin fonttipareja 20 avoimen lisenssin fontilla, säädä koko ja riviväli ja kopioi CSS:n font-family-pinot.
• Kontrastintarkistin Ilmainen WCAG-kontrastintarkistin. Anna tekstin ja taustan väri ja saat kontrastisuhteen, AA- ja AAA-tulokset sekä lähimmän hyväksytyn värin.
• Kuvan värinvalitsin Lataa kuva ja napsauta pikseliä saadaksesi sen värin HEX-, RGB-, HSL-, HSV- ja CMYK-muodossa. Zoomauslasi, keskiarvo ja poimittujen värien luettelo.
• Kuvasuhdelaskin Kuvasuhdelaskin supistaa leveyden ja korkeuden suhteeksi, muuttaa kokoa mittasuhteet säilyttäen ja antaa CSS aspect-ratio -koodin 16:9-, 4:3- ja 21:9-kokoihin.
• Paletti kuvasta Poimi väripaletti mistä tahansa kuvasta. Lataa valokuva ja saat sen hallitsevat värit HEX-koodeina kuvan osuuksineen valmiina kopioitavaksi tai vietäväksi.
• PX–REM-muunnin Muunna px rem- ja em-yksiköiksi millä tahansa juurifonttikoolla, luo massamuunnostaulukko ja muuta CSS-pätkän kaikki px-arvot rem-yksiköiksi.
• Värimuunnin Muunna väri HEX-, RGB-, HSL-, HSV-, HWB-, CMYK-, LAB-, LCH- ja OKLCH-muotojen välillä. Liitä koodi, näe väri ja kopioi kaikki muodot yhdellä napsautuksella.
• Värin nimi -haku Selvitä värin nimi. Anna HEX- tai RGB-koodi ja saat 5 lähintä nimeä yli 30 000 nimetystä väristä sekä lähimmän CSS-värin nimen.
• Värin vaaleat ja tummat sävyt Luo minkä tahansa värin vaaleita ja tummia sävyjä 5, 10, 20 tai 25 %:n askelin OKLCH:ssa tai sRGB:ssä ja vie ne CSS-muuttujina tai Tailwind-asetuksina.
• Värinvalitsin Ilmainen värinvalitsin. Valitse väri ja kopioi heti sen HEX-, RGB-, HSL-, HSV- ja CMYK-koodit sekä kontrastit valkoista ja mustaa vasten.
• Väripalettigeneraattori Luo väripaletteja yhdestä perusväristä väriharmonian säännöillä – komplementti, vierekkäiset, triadi, tetradi, neliö ja yksivärinen.
• Värisokeussimulaattori Ilmainen värisokeussimulaattori. Katso kuvaa protanopian, deuteranopian, tritanopian, lievempien muotojen tai akromatopsian läpi rinnakkain tai liukusäätimellä.