உள்ளடக்கத்திற்கு செல்க
Sri Lanka · Colombo · GlobalMon–Fri, 09:00–18:00 IST
eCommerce 4 min read

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
Written by
Amila Rajapaksha
CEO / Managing Director, Mobiz International (Pvt) Ltd

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.

38 views 265 articles
Share:

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 background rule 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-shadow value.
  • Border Radius Generator - Round corners individually or together and grab the border-radius shorthand 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.

Share:

Related Articles

Comments (0)

Log in or sign up to leave a comment.

No comments yet. Be the first to share your thoughts!