If you are a web designer or a developer you might see a lot of units and values for different aspects of web design. For today’s web design, we need to convert most of the standard design units to different formats for flexibility. Exploration of smartphone industry pushes the website design industry to its best form. Designers and developers started thinking away from conventional web design methods. In early days, they have done different websites for different devices. It was not at all practical to build a web site for thousands of devices.

Responsive design is the ultimate solution for this complex situation. One website fit for all devices was the concept behind the responsive design and it was more about the layout. We have travelled far from the initial concept of responsive design. These days, there are many techniques used by developers to build and manipulate responsive websites. They are not just focusing too much to layout, but it covers the different elements to like images, fonts etc..

As these elements (fonts, Images, colour etc..) make a good website they need to have special care when you arrange them for different devices. Most of these laments controlled through certain values or units. If you are a developer, you need to have better understanding of these units and values to create an efficient website.

In this post, we have gathered an amazing list of converters and calculators for responsive design, color, typography, grid, pixel density. These handy tools are huge time savers and improve your workflow.

Color Calculators & Converters

Devoth‘s HEX 2 RGBA Color Calculator

Devoth‘s HEX 2 RGBA Color Calculator

Let‘s you convert color value in HEX to RGBA and RGB, prepared for inclusion in CSS styles.

Source

Color Hex

Color Hex

ColorHexa.com is a free color tool providing information about any color. Just type any color values in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value in Hexadecimal, Binary, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and xyY.

Source

Contrast Ratio

Contrast Ratio

A tool to calculate the contrast ratio between any two valid CSS colors.

Source

Rgb.to Color Conversion

Rgb.to Color Conversion

Source

HEX to RGB Converter

HEX to RGB Converter

Source

RGB-to-Hex Conversion

RGB-to-Hex Conversion

Source

Color code converter

Color code converter

Source

Color Converter

Color Converter

Select a color space and enter your values for accurately convert your selection to Rgb, Cmy, Cmyk, Hsl, Xyz, Lab, Lch and Yxy.

Source

RGB-Hex-Decimal-CMYK Color Conversion Tool

RGB-Hex-Decimal-CMYK Color Conversion Tool

Convert RGB (Red, Green, Blue) color model into CMYK (Cyan, Magenta, Yellow, blacK), Hexadecimal, Decimal color models and vice versa. Online color conversion tool.

Source

Convert hex color code to RGB and RGB to HEX

Convert hex color code to RGB and RGB to HEX

This free color converter gives you the hexadecimal values of your RGB colors and vice versa (RGB to HEX). Use it to convert your colors and prepare your graphics and HTML web pages.

Source

Color Converter

Color Converter

Source

Color Converter

Color Converter

Source

CSS Color Converter

CSS Color Converter

This tool will convert any color you enter into either Hex, RGB, HSL or HSV.

Source

Colorizer

Colorizer

A color picker and converter (RGB HSL HSB-HSV CMYK HEX).

Source

Color Converter

Color Converter

Source

HTML Color Converter

HTML Color Converter

Source

HSL to RGB / RGB to HSL / Hex Colour Converter

HSL to RGB / RGB to HSL / Hex Colour Converter

Source

Color calculator

Color calculator

Source

Hex to RGB Converter

Hex to RGB Converter

Source

Grid Calculators & Converters

Gridpak

Gridpak

Gridpak is a Responsive grid generator. Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Source

Grid Calculator

Grid Calculator

Source

Gridulator

Gridulator

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based designfolk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you.

Source

Grid Generator

Grid Generator

Generate your own Grid with the Responsive Grid System calculator.

Source

Grid Calculator

Grid Calculator

Source

Easy Grid Calculator

Easy Grid Calculator

Source

CSS Grid Calculator

CSS Grid Calculator

Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets. The Flash player plugin version 7 is required.

Source

Typography Calculators & Converters

Golden Ratio Typography Calculator

Golden Ratio Typography Calculator

Source

Modularscale

Modularscale

This calculator makes a set of numbers called a modular scale, which you use like a ruler.

Source

Type Scale

Type Scale

A Visual Type Scale Calculator.

Source

Baseline Rhythm Calculator

Baseline Rhythm Calculator

Source

Responsive Calculators & Converters

The Responsive Calculator

The Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Source

PXtoEM.com

PXtoEM.com

PXtoEM.com is px to em conversion made simple. Choose your body font size in pixels (px)and out comes a complete pixel (px) to em conversion table, making elastic web design with CSS a snap. The once daunting challenge of converting pixels (px) to the elusive em has now been reduced to a booger eating pipsqueak.

Source

RQRWD

RQRWD

RQRWD is a really quick responsive web design tool which allows you to work out the elements width in % from px. Just add the child element width in the top box, parent element width in the bottom and you’re done!

Source

px-em – px to em Calculator

px-em - px to em Calculator

px-em is a px to em tool which allows you to work out the em sizes from px. Just add the parent px size in the top box, required size in the bottom and you’re done!

Source

Pixels to Ems Conversion

Pixels to Ems Conversion

The tool below allows you to work out the em sizes from pixels (or vice versa).

Source

Pixels px to em conversion

Pixels px to em conversion

Source

Pixem

Pixem

Pixem is a px to em converter.

Source

The Responsive Calculator

The Responsive Calculator

Source

Flexible Math

Flexible Math

A quick way to get pixel widths in percentages.

Source

Responsive Web Design Formula for Percentage – Easy Calculator

Responsive Web Design Formula for Percentage - Easy Calculator

Source

Pixel Density Calculators & Converters

Is This Retina?

Is This Retina?

Pixel density & viewing distance calculator for a retina world.

Source

DPI love

DPI love

DPI Love is a little web application that easily finds the DPI/PPI of any screen.

Source

teehan+lax density converter

teehan+lax density converter

Calculate the height and width of pixel graphics for various hi-dpi-displays.

Source

Snowflake

Snowflake

Pixel density converter widget.

Source

Pixel Density Converter

Pixel Density Converter

This calculator tells you how to scale graphics between four density groups—perfect for building out applications across different devices.

Source

Pixel Density Calculator

Pixel Density Calculator

Free online pixel density calculator. Perfect for calculating pixels per inch (PPI) and dots per inch (DPI) of any display.

Source

Density Converter

Density Converter

It’s actually quite easy to detect the pixel density with just a little CSS.

Source

PX CALC

PX CALC

DPI Calculator with Dot Pitch, Size, Aspect Ratio, Pixels, and Megapixels.

Source

Android DP/PX converter

Android DP/PX converter

This tool helps you convert pixels to and from DPs (density independent pixels).

Source

Android Pixel Calculator

Android Pixel Calculator

Check relation between the dp, px, sp, in, mm and pt measurement units and convert to other unit.

Source

DPI Calculator / PPI Calculator

DPI Calculator / PPI Calculator

Source

Android DP / PX converter

Android DP / PX converter

Source