Design & Color Tools
Colour conversion, contrast auditing, palette building and CSS generators that output code you can paste straight into a stylesheet.
Built for designers, front-end developers, accessibility auditors. 24 tools published.
Aspect Ratio
1280×800 reduces to 8:5, and a modern phone is 422:195 — a ratio with no name. Get the exact ratio, the nearest standard one, and the error between them.
🎨Bleed mm to Pixels
Translate physical bleed and trim size into pixel dimensions at a chosen PPI.
🎨Booklet Creep
Estimate the cumulative outward shift in a saddle-stitched stack from measured sheet caliper.
🎨Border Radius
The slash syntax gives each corner a separate horizontal and vertical radius, which is how organic shapes are made in CSS without touching SVG.
🎨Border Style Generator
Build both declarations, calculate outer footprint and keep keyboard focus visible.
🎨Box Shadow Generator
Real objects cast a tight contact shadow and a soft ambient one. Stack two box-shadow values and the result stops looking like CSS.
🎨Chart Palette Generator
Distribute hues, preview labeled swatches and expose the closest RGB pair.
🎨Color Swatch Sheet
Validate CSS hex colors and create a deterministic proof-sheet manifest.
🎨Colour Blind Check
Red-for-bad and green-for-good is the most common convention in software and the exact pair that collapses. Paste your palette and see which colours merge.
🎨Colour Palette Generator
Press space for a new palette, lock the ones you like, keep going. Spaced by lightness rather than randomly, so the result is actually usable in an interface.
🎨Colour Palette Harmony
HSL says the complement of blue is a much brighter yellow. Your eye disagrees. This rotates in OKLCH and shows both, so you can see the difference.
🎨Contrast Checker
Test any foreground and background pair against every WCAG threshold at once, with a live preview and a one-click suggestion for the nearest passing colour.
🎨Dark Mode Palette
Transform light tokens into editable dark candidates and report WCAG contrast for text pairs.
🎨Greyscale Weights
All three average to exactly 85. Weighted by luminance they are 54, 182 and 18 — which is roughly how the eye sees them.
🎨Hex Opacity Calculator
Convert between hex alpha and percentage, and see the flat colour a semi-transparent layer actually produces over your background.
🎨Hex Shorthand
Shorthand doubles each digit, so #f61 is #ff6611 — not #ff6601. Shortening by truncation changes the colour.
🎨HEX to RGB
Paste any hex — 3, 4, 6 or 8 digits — and get RGB, RGBA, HSL, HSV and OKLCH at once, plus a tint and shade scale you can drop straight into a design system.
🎨HSL / HSV Converter
HSV at 100% saturation and 100% value is a vivid colour. HSL at 100% and 100% is white. Design tools show HSV, CSS wants HSL, and nothing warns you.
🎨Ink Coverage Cost
Scale a cartridge's rated-page yield to the coverage of the planned job.
🎨Label Sheet Yield
Fit labels inside explicit margins and gaps, then compare portrait and rotated layouts.
🎨Named Colour Finder
148 names with a century of accumulated history. Finding the closest one needs a perceptual distance, because RGB distance picks a different answer.
🎨px to rem
em multiplies with each nested level, so four levels of 0.9em is 10.5px, not 14.4. Convert between all three and see the compounding.
🎨RGB to CMYK
A vivid screen green has no CMYK equivalent. Converters return the nearest printable colour and say nothing. This shows you the gap before it surprises you.
🎨Tiled Poster Pages
Tile a finished poster across printable sheets with an explicit overlap allowance.