Color of the Day & Quick Actions
🎲 Random palette
Jump straight into a fresh 5-color palette.
🕘 Recently generated
Your saved colors — or some inspiration.
Trending Palettes
Open generator →Color Converters
HEX to RGB
Convert HEX to RGB instantly — live preview, copy button and every other format included.
RGB to HEX
Convert RGB to HEX instantly — live preview, copy button and every other format included.
HEX to HSL
Convert HEX to HSL instantly — live preview, copy button and every other format included.
HSL to HEX
Convert HSL to HEX instantly — live preview, copy button and every other format included.
RGB to HSL
Convert RGB to HSL instantly — live preview, copy button and every other format included.
Popular Gradients
Make your own →Image Tools
Image Compressor
Compress multiple JPG, PNG and WebP images — and PDF pages — at once, with a live…
Image Resizer
Resize images to exact pixels or percentages with aspect-ratio lock — download as PNG,…
Image Converter
Convert images between PNG, JPG, WebP and AVIF in your browser — free and private.
PNG to JPG
Convert PNG images to JPG with adjustable quality — transparency is flattened to white.
JPG to PNG
Convert JPG images to lossless PNG in one click, right in your browser.
Color Library
Developer Utilities
QR Code Generator
Generate QR codes for URLs and text with custom colors and sizes — download as PNG.
JSON Formatter
Format, beautify and validate JSON with 2-space, 4-space or tab indentation — errors…
Base64 Encoder
Encode text to Base64 — Unicode-safe, instant and local.
URL Encoder
Percent-encode URLs or individual components for safe transmission.
Regex Tester
Test regular expressions live with match highlighting and capture-group display.
Palettes & Gradients
Palette Generator
33 palette modes — harmonies, styles, seasons — with lock, export and share.
Gradient Generator
Linear, radial, conic and mesh gradients with CSS, SVG and PNG export.
Curated Color Palettes
Browse a hand-picked library of beautiful color palettes — filter by mood, click any…
CSS Gradient Library
A curated collection of beautiful, named CSS gradients — preview them live and copy the…
Color Combination Generator
Generate beautiful two-color combinations with live preview cards and WCAG contrast…
Color Utilities
Color Picker
Interactive wheel, RGB/HSL/HSV sliders, alpha channel and screen eyedropper.
Color Library
Search 700+ named colors with full format breakdowns and accessibility scores.
Color Mixer
Mix any two colors at any ratio, with perceptual OKLab blending and a ready-to-copy CSS…
Random Color Generator
Generate random colors in bulk — any style, pastel, vivid, dark, light, warm or cool —…
Color Blender
Create smooth in-between steps from one color to another — perfect gradient stops and…
CSS Generators
Flexbox Generator
Visual flexbox playground: direction, justify, align, wrap and gap with instant…
Grid Generator
Visual CSS Grid builder: columns, rows, gap and auto-flow with live preview and…
Animation Generator
Generate complete CSS @keyframes animations from presets — pulse, bounce, spin, float,…
Border Radius Generator
Visual border-radius editor with per-corner control and an organic blob mode using…
Text Shadow Generator
Design CSS text shadows with offset, blur, color and opacity controls and a live type…
CSS Color Tools
Box Shadow Generator
Tinted, layered box-shadow utilities from any color.
Glassmorphism CSS Generator
Frosted-glass card CSS with live blur, opacity and radius controls.
Neumorphism CSS Generator
Soft-UI shadow CSS generated from your surface color.
Tailwind Config Generator
Build a tailwind.config.js color scale (100–700) from any HEX color.
CSS Variables Generator
Turn any brand color into a complete :root custom-property scale.
Accessibility Tools
Contrast Checker
Check the WCAG contrast ratio between any text and background color, with instant…
Color Blind Simulator
See any palette through protanopia, deuteranopia, tritanopia and achromatopsia.
WCAG Checker
Full WCAG 2.2 AA and AAA compliance check for a color pair — normal text, large text and…
Accessible Color Suggestions
Enter a color pair and get the nearest accessible alternative that passes WCAG AA.
Accessibility Score
Get a 0–100 accessibility score for your color combination based on WCAG thresholds.
Icon & Favicon Tools
Favicon Generator
Generate a complete favicon set — 16 to 512px plus a real favicon.ico — from an image,…
Emoji Favicon Generator
Turn any emoji into a favicon — pick from the grid or type your own, download PNG sizes,…
Favicon Grabber
Grab any website's favicon in multiple sizes just by typing the domain — preview and…
ICO Generator
Create a real multi-size favicon.ico file (16/32/48) from any image or letter — built in…
App Icon Rounder
Round the corners of any app icon or logo — iOS-style radius, padding and background…
Typography Tools
Font Pair Generator
Curated Google Font pairings — heading + body combinations with live previews and…
Typography Scale Generator
Generate a modular type scale from any base size and ratio — major third, perfect…
Text Gradient Generator
Create gradient text with background-clip — pick colors and angle, copy the CSS.
Font Preview
Preview any text across fonts, sizes, weights, line heights and letter spacing — with…
Letter Spacing Generator
Tune letter spacing (tracking) for headings, body and uppercase labels with live preview.
SVG Tools
SVG Blob Generator
Generate smooth organic SVG blobs with adjustable complexity, randomness and gradient…
SVG Wave Generator
Create layered SVG wave section backgrounds with amplitude, frequency and layer controls.
SVG Optimizer
Compress SVG files in your browser: strip metadata and comments, round decimals,…
SVG to React Component
Convert any SVG into a ready-to-paste React/JSX component with camelCased attributes and…
SVG Pattern Generator
Seamless SVG patterns — dots, grids, lines, triangles, crosses, zigzags — as CSS…
Background Generators
Mesh Gradient Background
Layered radial-gradient mesh backgrounds — the soft, organic look of modern SaaS heroes…
CSS Background Patterns
Pure-CSS background patterns — stripes, checkerboard, polka dots, zigzag — no images…
Aurora Background
Glowing aurora backgrounds on dark bases — atmospheric hero sections with CSS and PNG…
Animated Background
Smoothly animated CSS gradient backgrounds with speed control and complete keyframes code.
Dots Pattern Background
Classic dot-grid pattern backgrounds with size, spacing, color and opacity controls.
Developer Export
Export: CSS Variables
Convert your palette into ready-to-use CSS Variables code with named tokens.
Export: Tailwind Config
Convert your palette into ready-to-use Tailwind Config code with named tokens.
Export: SCSS
Convert your palette into ready-to-use SCSS code with named tokens.
Export: JSON
Convert your palette into ready-to-use JSON code with named tokens.
Export: React Theme
Convert your palette into ready-to-use React Theme code with named tokens.
Branding Tools
Brand Palette Generator
Generate a complete brand palette — primary, secondary, accent, neutrals and status…
Website Theme Generator
A production-ready website color system with WCAG-conscious text colors.
UI Theme Generator
A full light/dark UI theme — backgrounds, surfaces, borders, text and status colors.
Logo Color Generator
Explore industry-appropriate logo color directions with instant previews.
Dashboard Theme Generator
Data-dense dashboard themes with proper hierarchy and chart-friendly accents.
UI/UX Design Tools
Responsive Device Preview
Preview any URL in phone, tablet and desktop viewport sizes side by side.
Responsive Breakpoint Generator
Standard responsive breakpoints with ready-to-copy mobile-first media queries and SCSS…
Spacing Scale Generator
Build a consistent spacing scale — linear, geometric or Fibonacci — with visual preview…
Design Token Generator
Generate a complete starter token set — colors, spacing, radii, shadows — as CSS…
Layout Grid Calculator
Calculate column widths for any container, column count, gutter and margin — with CSS…
Playgrounds
HTML Playground
Write HTML, CSS and JavaScript with an instant sandboxed live preview — no setup, no…
Tailwind Playground
Prototype with Tailwind utility classes and a live preview — the Play CDN loaded for you.
CSS Animation Playground
Experiment with @keyframes animations in a live sandbox, starting from a working example.
React Snippet Generator
Generate React component boilerplate — props, state, effects, optional TypeScript —…
Vue Snippet Generator
Generate Vue 3 script-setup component boilerplate with props and reactive state.
Latest color trends
OKLCH has become the default way serious design systems define color — perceptually uniform, wide-gamut ready and now supported in every major browser. Meanwhile mesh gradients, glassmorphism accents and adaptive dark-mode palettes continue to dominate modern UI. Read our UI color trends deep-dive or explore why OKLCH matters.