◐
Color & design
All 25 color & design on Tapwerk — free, no sign-up, and everything runs right in your browser.
#→oklchColor Converter (HEX, RGB, HSL, OKLCH, Lab, CMYK)Convert any CSS color to every other format›Aa◐Color Contrast Checker (WCAG & APCA)Check text/background contrast and get the nearest passing color›50–950Color Shades GeneratorA 50–950 scale (Tailwind-style) or tints & shades from one color›◐◑Color Scheme GeneratorComplementary, analogous, triadic, split and tetradic harmonies›🎨+Color MixerBlend two colors in any ratio – with intermediate steps›🎨?Color Name FinderThe nearest of the 148 CSS named colors for any value›▤🌈CSS Gradient GeneratorLinear, radial and conic gradients with smooth OKLCH interpolation›▢⌁CSS Box-Shadow GeneratorSmooth, layered shadows for natural-looking elevation›🔲✨Glassmorphism CSS GeneratorFrosted-glass cards with backdrop blur – copy the CSS›[btn]CSS Button GeneratorAccessible button styles with hover, focus and pressed states›Aa↕Type Scale GeneratorModular font-size scale (major third, perfect fourth, golden ratio …) as CSS›↔AaLine Length & Line Height CalculatorCharacters per line for a text width – and a matching line height›▫▢◻Spacing Scale Generator8-pt (or 4-pt) spacing tokens as CSS variables and Tailwind config›◼→🎨CSS Filter Color GeneratorFind the CSS filter that turns a black icon or SVG into any color›▦AaPalette Contrast GridContrast of every color pair in a palette – which combos pass WCAG?›👁◐Color-Blind Palette CheckerSee your palette with protanopia, deuteranopia, tritanopia – and find clashing pairs›☀☾UI Theme Generator (Light & Dark)CSS variables for a light and dark theme from one brand color – contrast-checked›▦▧SVG Pattern GeneratorSeamless background patterns (dots, grid, stripes, zigzag …) as CSS›⬮〰SVG Blob & Wave GeneratorOrganic blobs and wave dividers as clean SVG›◉◎Mesh Gradient GeneratorSoft multi-color “aurora” backgrounds in pure CSS›😀icoEmoji / Letter Favicon Generatorfavicon.ico, PNG sizes, Apple touch icon and SVG favicon from an emoji or letters›🖼1200Social Share Image Generator (Open Graph)1200 × 630 preview images for links, blogs and posts›❝🖼Quote Image MakerTurn a quote into a square, portrait or story image›AB◯Monogram Logo MakerA clean initials logo in a circle, square or hexagon – SVG and PNG›🖥ℹScreen & Viewport InfoYour screen resolution, viewport size, pixel ratio and display settings›