Web Developer and Web Designer Productivity Tools
A guided tour of 25 free, browser-based productivity tools for web designers and developers - colour pickers, CSS generators, unit converters, JSON formatters, encoders, hash and password generators, regex testers and more.
Amila Rajapaksha is the CEO and Managing Director of Mobiz International (Pvt) Ltd, a web design and development company based in Gampaha, Sri Lanka. Since 2010 he has helped businesses across Sri Lanka and overseas launch fast, search-friendly websites and online stores — working hands-on with WordPress, Magento and custom Laravel builds, and the SEO that makes them rank.
Whether you are designing a landing page, building a web app or just trying to ship faster, the right free tools save hours every week. Over the years our team at Mobiz has leaned on a small set of browser-based utilities - no installs, no sign-ups, just open a tab and get the job done.
We have pulled the best of them together into two free tool collections on our sister site, Lanka Websites Tools. Below is a guided tour of every tool, what it does, and when you would reach for it - split into design & CSS tools for the visual side and developer tools for the build side.
Design & CSS Tools
A set of colour, CSS and sizing helpers for designers and front-end developers. They turn fiddly, repetitive jobs - picking a colour, dialling in a shadow, converting units - into a few clicks, and they hand you copy-paste-ready CSS. Browse the full set on the Design Tools page.
Colour
- Color Picker - Pick any colour and instantly read off its HEX, RGB and HSL values, ready to drop into your stylesheet.
- Color Converter - Convert a colour between HEX, RGB, HSL and other formats without hunting through a reference chart.
- Gradient Generator - Build smooth CSS gradients with your own colours and copy the generated
backgroundrule straight into your code. - Color Palette Generator - Generate harmonious, ready-to-use colour palettes for a new brand or page in seconds.
CSS effects
- Box Shadow Generator - Dial in CSS box shadows with visual sliders and live preview, then copy the exact
box-shadowvalue. - Border Radius Generator - Round corners individually or together and grab the
border-radiusshorthand for organic, blob-style shapes.
CSS unit converters
- PX to REM Converter - Convert pixels to rem units for scalable, accessible typography and spacing.
- PX to EM Converter - Convert pixels to em units when you need sizing relative to a parent element.
- PX to PT Converter - Convert pixels to points - handy when your web work crosses over into print design.
Image & sizing
- Aspect Ratio Calculator - Work out width or height while keeping a fixed aspect ratio, so images and videos never get squashed.
- Image Resize Calculator - Calculate new image dimensions when scaling up or down by a percentage or target size.
- DPI Calculator - Calculate DPI, PPI and physical print sizes so your images are sharp on screen and in print.
Developer Tools
Everyday developer utilities for encoding, hashing, formatting, regex testing and code generation - the small jobs that come up on almost every project. See them all on the Developer Tools page.
Formatting & minifying
- JSON Formatter - Format, validate and beautify JSON so an unreadable API response becomes something you can actually scan.
- Code Minifier - Minify HTML, CSS and JavaScript to shrink file sizes and speed up page loads.
Encoding & decoding
- Base64 Encoder/Decoder - Encode text or files to Base64 and back - useful for data URIs and quick payload checks.
- URL Encoder/Decoder - Safely encode and decode URLs and query strings so special characters do not break your links.
- HTML Encoder/Decoder - Convert reserved characters to and from HTML entities to display code or prevent markup errors.
Security, hashing & IDs
- Hash Generator - Generate MD5, SHA-1, SHA-256 and other hashes for checksums and integrity checks.
- Password Generator - Create strong, random passwords for new accounts and database users.
- UUID Generator - Generate unique v1 and v4 UUIDs for records, keys and distributed systems.
- JWT Decoder - Decode and inspect the header and payload of a JSON Web Token while debugging auth.
Testing & generators
- Regex Tester - Write, test and debug regular expressions against sample text with live match highlighting.
- Cron Expression Builder - Build cron schedules visually and understand exactly when a job will run.
- QR Code Generator - Generate QR codes for URLs, text and contact details for print or screen.
- Internet Speed Test - Test your download, upload, ping and jitter against our Singapore server - free, with no sign-up.
Use them free, anytime
Every tool above runs in your browser, costs nothing and needs no account. Bookmark the full tool collection and keep it a click away the next time you are deep in a design or build.
If you would rather hand the whole project to a team that lives in these tools every day, talk to Mobiz International about your website or web app - we design, build and maintain sites for businesses across Sri Lanka and beyond.
Related Articles
WP E-commerce Trends: Sri Lankan Exports 2026
Discover the top 2026 WordPress e-commerce trends for Sri Lankan SMBs exporting globally. Boost sales with AI, AR, and sustainable practices.
Mastering E-Commerce in Sri Lanka: The Definitive Business Guide for 2026
The digital marketplace has fundamentally reshaped how Sri Lankan enterprises connect with customers both locally and globally. As we navigate through 2026, e-commerce has evolved from a supplementary sales channel into the primary engine driving business growth across the nation. With Sri Lanka's e...
Emerging Client Needs: Localized Payments for Sri Lankan DTC Brands Using FriMi and Dialog Axiata
The Rise of Sri Lankan DTC and the Local Payment Gap
Multi-Currency WooCommerce for Sri Lankan SMEs | Cross-Border Trade
The Global Opportunity: Why Multi-Currency is a Game-Changer for Sri Lankan SMEs