Design
Design and frontend utilities for color formats, CSS gradients, accessibility contrast, and OKLCH palette generation across design systems, theme work, and UI debugging.
10 tools
Design
-
Color Converter
Convert colors between HEX, RGB, HSL, and other formats for design, frontend development, and consistent visual presentation.
Open tool -
Gradient Generator
Create CSS gradients visually, tuning type, angle, center point, color stops, and opacity for UI backgrounds, component states, and brand visuals.
Open tool -
Box Shadow Generator
Build multi-layer CSS box-shadow with visual controls for offset, blur, spread, color, and opacity, then copy production-ready code.
Open tool -
Contrast Checker
Check text, icons, buttons, and UI component contrast against WCAG AA and AAA accessibility requirements.
Open tool -
Palette Generator
Generate OKLCH color scales, color schemes, neutral palettes, readable text colors, CSS variables, and JSON from one base color.
Open tool -
SVG Pattern Generator
Build tileable SVG background patterns with dots, grids, stripes, triangles, and waves, then copy CSS or download a clean SVG.
Open tool -
Flexbox and Grid Generator
Build responsive flexbox and CSS grid layouts visually with a live preview, then copy production-ready CSS for navbars, cards, and galleries.
Open tool -
Cubic Bezier Generator
Design CSS cubic-bezier easing curves by dragging control points, preview the motion live, and copy the transition timing function.
Open tool -
CSS Animation Generator
Build CSS keyframe animations from a library of fade, slide, zoom, and attention effects, preview the motion live, then copy the @keyframes and animation shorthand.
Open tool -
PX to REM Converter
Convert px, rem, em, pt, and % against an adjustable root font-size, build a modular type scale, generate fluid clamp(), and batch-convert a CSS block.
Open tool
About this category
Modern UI work lives between design tokens and live CSS. A spec gets handed off in HEX, a designer wants to see HSL, the codebase uses OKLCH, and the accessibility audit asks for a contrast ratio — all on the same color.
These tools translate, generate, and audit those colors in one place. Convert between formats, build a CSS gradient with stops, check contrast against WCAG thresholds, or generate a perceptually-even palette from a single brand hue.
What you can do here
-
Color format conversion
Translate between HEX, RGB(A), HSL(A), HSV, OKLCH, and named colors, with safe fallbacks for older browsers.
-
CSS gradient builder
Compose linear, radial, and conic gradients with multiple stops, copy the production-ready CSS, and preview live.
-
WCAG contrast checker
Test foreground / background pairs against AA, AA Large, and AAA thresholds before shipping new components or themes.
-
OKLCH palette generation
Derive perceptually-even palettes around a brand color for backgrounds, surfaces, states, and charts.