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.
10 tools
- Color Converter & Contrast CheckerHEX ↔ RGB ↔ HSL color converter with WCAG AA/AAA contrast checker. For designers and accessibility audits.
- Color Palette GeneratorGenerate harmonized palettes: analogous, complementary, triadic, monochromatic. From a single seed color.
- WCAG Contrast CheckerCheck 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 GeneratorBuild 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 GeneratorStack 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 GeneratorDrag 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 WhiteboardSketch diagrams and wireframes in the browser. Saved in this browser only — no account, no sync, nothing uploaded.
- Cubic Bezier GeneratorDrag 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 SimulatorUpload 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 ViewerRotate, 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.