Värvid ja disain

Vali, teisenda ja kombineeri värve ning loo oma kujundustele CSS-i.

• Border-radius generaator Kujunda CSS-i border-radius visuaalselt lohistatavate punktidega. Sea iga nurk px või % järgi, kasuta elliptilist süntaksit, loo plönnikujusid ja kopeeri kood.
• Box-shadow generaator Kujunda kihilisi CSS-i box-shadow varje reaalajas eelvaatega. Sea nihe, hägu, laotus, värv ja inset, proovi neumorfismi eelseadeid ning kopeeri kood.
• Clip-path generaator Joonista CSS-i clip-path kujundeid lohistatavate punktidega. Muuda hulknurki, ringe, ellipse ja inset-lõikeid, alusta eelseadetest ning kopeeri valmis kood.
• CSS-i gradiendi generaator Loo lineaarseid, radiaalseid ja koonuselisi CSS-i gradiente reaalajas eelvaatega. Lisa ja lohista värvipeatusi, sea nurk ning kopeeri puhas CSS-kood.
• Cubic-bezier redaktor Kujunda CSS-i easing-kõveraid lohistatava cubic-bezier redaktoriga, võrdle neid lineaarsega animatsioonis ning kopeeri cubic-bezier() või linear() versioon.
• Flexboxi ja Gridi mänguväljak Koosta flexboxi ja CSS gridi paigutusi visuaalselt. Sea konteineri ja elementide omadused, nimeta gridi alad, vaata tulemust reaalajas ja kopeeri CSS ning HTML.
• Fondi alamhulga looja Loo fondist alamhulk vajalike märkidega HarfBuzziga oma brauseris. Saa väiksem TTF/OTF ja WOFF, eelvaade ning @font-face reegel koos unicode-range'iga.
• Fondipaaride eelvaade Eelvaata pealkirja ja põhiteksti fondipaare 20 avaliku litsentsiga fondiga, kohanda suurust ja reakõrgust ning kopeeri CSS-i font-family virnad.
• Heledamate ja tumedamate toonide generaator Loo mis tahes värvi heledamad ja tumedamad toonid 5, 10, 20 või 25% sammuga OKLCH-s või sRGB-s ning ekspordi CSS-i muutujate või Tailwindi seadistusena.
• Kontrastsuhte kontroll Tasuta WCAG kontrastsuhte kontroll. Sisesta teksti- ja taustavärv ning saa kontrastsuhe, AA/AAA tulemused ja lähim sobiv värv.
• Kuvasuhte kalkulaator Kuvasuhte kalkulaator lihtsustab laiuse ja kõrguse, muudab suurust proportsioone säilitades, võrdleb 16:9 ja 4:3 mõõte ning annab CSS aspect-ratio koodi.
• Pildi värvivalija Lae pilt ja klõpsa pikslil, et saada selle värv HEX-, RGB-, HSL-, HSV- ja CMYK-koodina. Suurendusklaas, keskmistamine ja valitud värvide loend brauseris.
• PX-REM muundur Teisenda px rem-iks ja em-iks mis tahes juurelemendi fondisuurusega, koosta hulgiteisenduse tabel ja muuda CSS-i lõigu kõik px väärtused ühe klõpsuga rem-ideks.
• Värvi nime leidja Leia mis tahes värvi nimi. Sisesta HEX- või RGB-kood ja saa üle 30 000 nimega värvi hulgast 5 lähimat nime ning lähim CSS-i värvinimi.
• Värvikoodi muundur Teisenda värvi HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH ja OKLCH vahel. Kleebi kood, vaata värvi ja kopeeri iga vorming ühe klõpsuga.
• Värvipaletigeneraator Loo värvipalette ühest põhivärvist värviharmoonia reeglite järgi – komplementaarne, analoogne, triaadiline, tetraadiline, ruut ja monokromaatiline.
• Värvipalett pildist Eralda mis tahes pildist värvipalett. Lae foto ja saa selle domineerivad värvid HEX-koodidena koos osakaaluga pildis, valmis kopeerimiseks või eksportimiseks.
• Värvipimeduse simulaator Tasuta värvipimeduse simulaator. Vaata pilti protanoopia, deuteranoopia, tritanoopia, nende kergemate vormide või akromatopsia korral kõrvuti või liuguriga.
• Värvivalija Tasuta veebipõhine värvivalija. Vali mis tahes värv ja kopeeri kohe selle HEX-, RGB-, HSL-, HSV- ja CMYK-koodid koos kontrastsuhetega valge ja musta suhtes.