🎨

Design Tools

Colors, fonts, gradients, patterns, QR and graphics

90 tools

Advanced QR Codes 8

QR Code Generator + Scanner

Create QR codes with full customization + scan and verify

Read QR codes from images or camera

Create QR code with custom colors and optional logo

Create QR to share WiFi network quickly

Create QR for contact card

Generate QR code for calendar event (iCal format)

SMS/Email/Phone QR

Generate QR for SMS, email or phone calls

Geo Location QR

Create a QR code for coordinates you enter or allow the browser to locate; loading the QR library requires a connection.

Barcode & Codes 9

Barcode Generator

CODE128 · EAN · UPC · ITF · Code39 with full options

Barcode Scanner

Scan barcodes from images using ZXing-js

Generate Aztec 2D barcode with options

Generate PDF417 with column & security control

ISBN/ISSN Barcode

Validate & generate ISBN/ISSN barcodes

Crypto Wallet QR

Create QR for crypto wallet addresses

Create payment QR (IBAN / PayPal)

Color 2D Barcode

Encode data in a customizable color 2D barcode

NFC Tag Builder

Build NFC tag content (NDEF text/URL records)

Color Analysis & Picking 6

Color Picker & Converter

Pick a color and convert between HEX/RGB/HSL/HSV/CMYK

Contrast Checker

Check color contrast against WCAG standards

Color Blindness Simulator

Simulate how color blind people see images

Find the nearest named color for any hex value

Extract Palette

Extract colors with count, precision, multi-format export

Mix two colors at any ratio

Generate Colors & Gradients 6

Professional Palette Generator

7 harmony algorithms + lock colors + WCAG check + CSS/Tailwind/SCSS/JSON/PNG export

Professional Gradient Builder

Stop editor + Linear/Radial/Conic + visual angle + 20 presets + CSS/PNG export

Multi-Stop Gradient

Build rich linear-gradient

Generate beautiful mesh gradient CSS backgrounds

Tint & Shade Generator

Generate tints (lighter) and shades (darker) of a color

Tailwind Palette

Generate Tailwind CSS color palette from base color

CSS & Design Tools 13

Professional Shadow Builder

Multiple shadows + presets + live preview (card/button/circle) + inset + CSS

Border Radius Generator

Per-corner radius designer

CSS Triangle Generator

Triangles via border tricks

Speech Bubble Generator

CSS speech bubble

Loading Spinner CSS

Pure CSS spinners

Glassmorphism Generator

CSS glassmorphism preset

Neumorphism Preset

Soft inset/raised shadow

Skeleton Loader CSS

Shimmer placeholder

SVG Filter Generator

feGaussianBlur / feColorMatrix...

CSS Variables Generator

Generate CSS variables from brand colors

Pantone Matcher

Closest Pantone (approximate)

Brand Color Extract

Extract palette from logo/image

CSS Animation Generator

Build ready-to-use @keyframes

Design Systems 5

Typography Type Scale Generator

Generate a harmonious type scale for your project using proven mathematical ratios

Spacing System Generator

Generate a consistent spacing system for your project using 4px or 8px base

Grid System Generator

Design a professional grid system for your project with columns and gutters

UI Component Specs

Get standard size and spacing specifications for UI components

Line Height Calculator

Calculate optimal line height for each font size to ensure comfortable reading

Advanced Design Colors 4

Color Harmony Palette Generator

Generate a harmonious color palette from your primary color using color harmony theories

Color Tints & Shades Generator

Generate 10 tints and shades from your base color for a complete color system

UI Color System Builder

Build a complete UI color system from your primary color with semantic state colors

Color Contrast Checker (WCAG)

Check the contrast ratio between text and background colors for WCAG accessibility compliance

Design Dimensions & Sizes 5

Social Media Image Sizes

Get optimal image dimensions for every social media platform in 2025

Print Size Reference

Get exact dimensions for common print sizes in pixels and centimeters

Icon Sizes Reference

Get standard icon sizes across different platforms and contexts

Aspect Ratio Calculator

Calculate image and video dimensions based on required ratio while maintaining proportions

Logo Proportion Calculator

Calculate correct logo proportions for different sizes and contexts

Miscellaneous Design 4

Golden Ratio Calculator

Calculate the golden ratio for your design dimensions for optimal visual results

Font Pairing Guide

Choose professional harmonious font pairs for your project with pairing rationale

Brand Identity Checklist

Evaluate your brand identity completeness and identify missing elements

Professional Thumbnail Planner

Plan a YouTube thumbnail or compelling content design to increase click-through rates

Advanced Design Systems 8

Animation Timing Calculator (CSS/Motion)

Calculate optimal CSS animation timings and cubic-bezier values for smooth professional motion

White Space & Visual Breathing Evaluator

Evaluate spacing in your design according to professional design principles and spacing systems

Responsive Design Breakpoints Guide

Get correct breakpoints and CSS code for any design system or framework

Z-Index Management System Guide

Create an organized z-index system for your project to avoid element stacking chaos

Shadow & Elevation System Generator

Generate a consistent shadow system reflecting visual elevation levels

Grid Column Width Calculator

Calculate precise column widths and gutters for any design grid

UI Density Selector

Choose the right UI density level for your application and get correct dimension guidelines

Design Tokens Generator

Generate a complete set of design tokens ready for use in CSS, Tailwind, and Figma

Color & Accessibility 4

Color Blindness Simulator for Designers

Test how color blind users see your design and verify accessibility compliance

Font Pair Comparison & Selector

Compare proven Google Fonts pairings and see a live preview for each pair

Icon Style Consistency Guide

Define the right icon style for your project and verify consistency across the application

Image Ratio Design Guide

Choose optimal image aspect ratios for each context in your design with precise dimensions

Other Tools 18

Random Color Picker

Get a beautiful random color with HEX, RGB, and HSL codes

WCAG Color Contrast Checker

Check color contrast ratio according to WCAG 2.1 accessibility standards

Aspect Ratio Calculator

Calculate image and video dimensions while maintaining aspect ratio

CSS Gradient Generator

Create professional CSS gradients and copy the ready-to-use code

CSS Box Shadow Generator

Create professional CSS box shadows with live preview and code copy

Font Pairing Guide

Discover perfect font combinations for your design projects

Hex Color Identifier & Namer

Enter a Hex code and get the color name, RGB and HSL values

DPI & Print Resolution Calculator

Calculate required print resolution for specific dimensions and verify image quality for print

Harmonious Color Palette Generator

Generate harmonious color palettes based on color theory

Typography Scale Calculator

Create a harmonious type scale for your design project

Arabic Font Style Showcase

Display your text in different Arabic font styles to choose the most suitable

CSS Abstract Art Generator

Generate random abstract art using CSS

CSS Animations Generator

Generate CSS animation code and copy it ready to use

Major Brand Colors Analyzer

Discover colors used by major companies and the color theory behind them

Design Tokens Generator

Create a consistent Design Tokens system for your design project

Color Blindness Simulator

Check how your colors appear to people with different types of color blindness

DPI to Image Size Converter

Calculate ideal print size based on image dimensions and resolution

Random Color Palette Generator

Generate professional random color palettes with one click