Color & Design for Designer
59 color & design tools hand-picked for Designer.
-
CSS Border Radius Generator
Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.
-
CSS Box Shadow Generator
Visual CSS box-shadow builder — multi-layer, inset, color/blur with live preview.
-
CSS Design Token Contrast Matrix
Paste CSS variables or JSON tokens, select fg/bg pairs, and flag every WCAG AA/AAA failure across your design system at once.
-
Classroom Color Wheel
Interactive color wheel with harmony explorer and color mixing — complementary, analogous, triadic, split-complementary, and tetradic schemes for teachers and students.
-
CSS Clip-Path Generator
Visual CSS clip-path builder — polygon, circle, ellipse, inset with drag handles.
-
Color Blindness Simulator
Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.
-
Color Contrast Checker
Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.
-
Color Converter
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only
-
Color Mixer
Color mixer — blend any two colors with adjustable ratio, RGB/HSL/LAB color space, predict the result and copy hex.
-
Color Shades Generator
Turn one base color into a Tailwind-style 50–950 tint & shade scale — copy each step, export to Tailwind / CSS / SCSS / JSON — browser-only
-
Color Temperature to RGB
Kelvin color temperature to approximate RGB and HEX, with a live swatch and lighting references, all in your browser
-
Complementary Color Calculator
One base color → complementary, split, triadic, tetradic, analogous and monochromatic schemes on the HSL color wheel — copy every HEX, browser-only
-
Tailwind Palette Contrast Matrix
Paste Tailwind colors, CSS theme tokens, or JSON palettes and audit every foreground/background pair for WCAG AA and AAA contrast.
-
CSS Button Generator
Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export
-
CSS Color Format Converter
Convert any color between HEX, RGB, HSL, OKLCH, CSS variable, and Tailwind — with live preview.
-
CSS Filter Generator
Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string
-
CSS Grid Generator
CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.
-
CSS Keyframes Animation Generator
Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only
-
CSS Loaders Generator
CSS loaders — 40+ pure-CSS spinners/skeletons, customize color/size/speed, copy ready-to-use code.
-
CSS Media Query Generator
CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.
-
CSS Pattern Generator
Pure-CSS geometric backgrounds — dots, grid, stripes, checkerboard, diagonal, cross — live preview, one-click copy, zero images
-
CSS Scrollbar Generator
Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only
-
CSS Specificity Calculator
Score any CSS selector as an (a, b, c) triple, compare which rule wins the cascade, and see exactly which digit decided it — browser-only
-
CSS Text Gradient Generator
Paint a gradient INTO your text with background-clip: text — live preview, font size/weight, copy cross-browser CSS with -webkit- prefixes.
-
CSS Text Shadow Generator
Visual CSS text-shadow builder — multi-layer, color, blur with live preview and shareable links.
-
CSS Transform Generator
CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.
-
CSS Triangle Generator
Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only
-
CSS Variable Deduplicator
Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.
-
CSS Variable Extractor
Extract, dedupe, and export css variables from pasted text or uploaded local files.
-
CSS Variable List Converter
Convert css variables from pasted text or uploaded local files.
-
CSS Variable List Validator
Validate and explain issues in css variables from pasted text or uploaded local files.
-
CSS Variable Normalizer
Normalize, sort, and prepare css variables from pasted text or uploaded local files.
-
Delta E Color Difference Calculator
Two HEX colors in, perceptual ΔE out — CIE76, CIE94 and CIEDE2000 with a plain reading of the result — browser-only
-
Emoji Kitchen
Emoji mashup — combine two emojis to make a new one (Unicode-only, no Google API, with 500+ pre-defined combos).
-
Flexbox Playground & CSS Generator
Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.
-
Font Pairing Generator
Font pairing generator — 50+ curated Google Fonts pairs (heading + body) with live preview, classifications, CSS export.
-
Golden Ratio Calculator
Split any length by φ = 1.618 — long/short segments, golden sequence, font scale, layout columns, golden rectangle — browser-only
-
CSS Gradient Generator
Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.
-
Gradient Mesh Generator
Gradient mesh generator — 4-12 control points with bilinear blend, output as SVG, PNG, CSS multi-radial-gradients fallback for older browsers.
-
Hex Color Deduplicator
Find duplicates and keep one clean copy of hex colors from pasted text or uploaded local files.
-
Hex Color Extractor
Extract, dedupe, and export hex colors from pasted text or uploaded local files.
-
Hex Color List Converter
Convert hex colors from pasted text or uploaded local files.
-
Hex Color List Validator
Validate and explain issues in hex colors from pasted text or uploaded local files.
-
Hex Color Normalizer
Normalize, sort, and prepare hex colors from pasted text or uploaded local files.
-
HTML Color Names
HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.
-
Google Fonts CSS2 URL Builder
Parse, edit, and generate Google Fonts CSS2 links, HTML preconnect tags, @import CSS, variables, and Tailwind font stacks.
-
Image Cropper
Image cropper — drag to crop, fixed ratios (1:1 / 16:9 / 9:16 / 4:3), zoom, rotate, fully client-side.
-
Image Format Converter
Image format converter — JPG ↔ PNG ↔ WebP ↔ AVIF, batch + transparent background handling, 100% client-side.
-
Image Resizer
Image resizer — resize JPG/PNG/WebP by pixels/%/preset, fully client-side, no upload.
-
Image Watermark
Image watermark — text or image watermark with position grid, opacity, tile mode, batch processing.
-
OKLCH Color Converter
OKLCH ⇄ HEX, RGB and HSL with a full sRGB → OKLab → OKLCH pipeline, live swatch and sRGB gamut warning — browser-only
-
RAG Status Color Generator
Build traffic-light RAG palettes — pick hex codes, export CSS variables, JS tokens, or Tailwind config for any process dashboard
-
RGB to CMYK Converter
RGB and HEX to CMYK for print, plus CMYK back to RGB, with a live swatch and one-click copy, all in the browser
-
Social Media Aspect Ratio Guide
Social media aspect ratio guide — Instagram / TikTok / YouTube / X / LinkedIn / Xiaohongshu / Bilibili exact pixel dimensions and ratios.
-
SVG Blob Generator
Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only
-
SVG Wave Generator
Generate smooth SVG wave dividers for landing pages — adjustable waves, amplitude, layers, seed — flip top/bottom — export SVG / CSS — browser-only
-
Tailwind CSS Cheatsheet
Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.
-
Type Scale Generator
Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only
-
WCAG Color Contrast Fixer
WCAG color contrast fixer — input fg/bg, get current ratio, auto-suggest 4 fixed colors hitting AA/AAA while preserving hue.