Design
Color tools for designers and dev-adjacent folk
HEX ↔ RGB ↔ HSL converter, WCAG contrast checker, palette generators — built for both pixel-pushers and content folks who care about accessibility.
Color Converter & Contrast Checker
HEX ↔ RGB ↔ HSL color converter with WCAG AA/AAA contrast checker. For designers and accessibility audits.
Color Palette Generator
Generate harmonized palettes: analogous, complementary, triadic, monochromatic. From a single seed color.
WCAG Contrast Checker
Check color contrast against WCAG 2.2 AA/AAA — live preview, exact ratio, and an auto-suggested accessible color when your pair fails. 100% local.
CSS Gradient Generator
Build linear, radial and conic gradients with as many colour stops as you need. Copy the CSS with a flat-colour fallback, or the Tailwind arbitrary value — and paste existing CSS back in to edit it.
Box Shadow Generator
Stack as many shadow layers as you need — offset, blur, spread, colour, inset — and see them on a light and a dark card at once. Copy the CSS or the Tailwind arbitrary value.
CSS Clip Path Generator
Drag the vertices of a polygon, or set up a circle, ellipse or inset, and copy the clip-path declaration. Twelve preset shapes, percentage or px output.
Online Whiteboard
Sketch diagrams and wireframes in the browser. Saved in this browser only — no account, no sync, nothing uploaded.
Cubic Bezier Generator
Drag two control points on a live grid and watch a block animate with that exact easing. CSS keyword and overshoot presets, copy as transition-timing-function or a custom property.
Color Blindness Simulator
Upload a photo or enter a hex color and see it through protanopia, deuteranopia, tritanopia or achromatopsia. Side-by-side compare slider, matrices from the Brettel/Viénot-Mollon LMS model.
STL/OBJ Viewer
Rotate, zoom and inspect a .stl or .obj 3D model — triangle count, bounding box, estimated volume, wireframe toggle, PNG snapshot. Runs in your browser, nothing is uploaded.
Choosing between these tools
Three tools around one question: will this colour combination actually be readable?
Contrast is measurable, not a matter of taste. WCAG defines a ratio from the relative luminance of two colours, and the thresholds are 4.5:1 for body text and 3:1 for large text at AA. The checker reports the ratio and the pass or fail at each level, which is the difference between a design review that ends in an opinion and one that ends in a number.
The converter moves a colour between HEX, RGB, HSL and their alpha variants without the rounding drift you get from converting twice by hand, and the palette generator builds harmonies from a base colour. Both are most useful next to the contrast checker: pick a palette, then confirm the pairs you intend to put text on actually clear the threshold before it reaches production.