Color & Design for Developer

41 color & design tools hand-picked for Developer.

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.
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 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
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 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 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.
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.
CSS Gradient Generator

Visual CSS gradient builder — linear, radial, conic with multi-stop colors, live preview, copy CSS, PNG export.
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 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.
OKLCH Color Converter

OKLCH ⇄ HEX, RGB and HSL with a full sRGB → OKLab → OKLCH pipeline, live swatch and sRGB gamut warning — browser-only
SVG Blob Generator

Generate smooth organic blob shapes — adjustable complexity, randomness, seed — export SVG / CSS clip-path — 100% browser-only
Tailwind CSS Cheatsheet

Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.
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.