Design Tools

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)

Generate QR for SMS, email or phone calls

Generate QR code for GPS coordinates

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

Scan barcodes from images using ZXing-js

Generate Aztec 2D barcode with options

Generate PDF417 with column & security control

Validate & generate ISBN/ISSN barcodes

Shorten any URL with click tracking, custom alias, expiry, and password protection

Create QR for crypto wallet addresses

Create payment QR (IBAN / PayPal)

Encode data in a customizable color 2D barcode

Build NFC tag content (NDEF text/URL records)

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

Check color contrast against WCAG standards

Simulate how color blind people see images

Find the nearest named color for any hex value

Extract colors with count, precision, multi-format export

Mix two colors at any ratio

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

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

Build rich linear-gradient

Generate beautiful mesh gradient CSS backgrounds

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

Generate Tailwind CSS color palette from base color

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

Per-corner radius designer

Triangles via border tricks

CSS speech bubble

Pure CSS spinners

CSS glassmorphism preset

Soft inset/raised shadow

Shimmer placeholder

feGaussianBlur / feColorMatrix...

Generate CSS variables from brand colors

Closest Pantone (approximate)

Extract palette from logo/image

Build ready-to-use @keyframes

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

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

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

Get standard size and spacing specifications for UI components

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

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

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

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

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

Get optimal image dimensions for every social media platform in 2025

Get exact dimensions for common print sizes in pixels and centimeters

Get standard icon sizes across different platforms and contexts

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

Calculate correct logo proportions for different sizes and contexts

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

Choose professional harmonious font pairs for your project with pairing rationale

Evaluate your brand identity completeness and identify missing elements

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

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

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

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

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

Generate a consistent shadow system reflecting visual elevation levels

Calculate precise column widths and gutters for any design grid

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

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

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

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

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

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

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

Check color contrast ratio according to WCAG 2.1 accessibility standards

Calculate image and video dimensions while maintaining aspect ratio

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

Create professional CSS box shadows with live preview and code copy

Discover perfect font combinations for your design projects

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

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

Generate harmonious color palettes based on color theory

Create a harmonious type scale for your design project

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

Generate random abstract art using CSS

Generate CSS animation code and copy it ready to use

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

Create a consistent Design Tokens system for your design project

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

Calculate ideal print size based on image dimensions and resolution

Generate professional random color palettes with one click