Color, CSS and Sketching Tools
These tools help with the small visual decisions that end up in a stylesheet or a design review: converting a designer's HEX value into HSL, checking that text passes WCAG contrast, writing a gradient, card shadow or transform without guessing at syntax, and sketching a layout or flowchart before anyone opens a design file. Front-end developers, designers and engineers explaining a system on a whiteboard are the usual users.
7 free tools · no sign-up · no ads
All Design Tools (7)
Color Picker & Converter
Pick and convert colors between RGB, HSV, and Hex formatsCSS Gradient Generator
Generate CSS gradients visuallyBox Shadow Generator
Generate CSS box shadow effectsCSS Transform Generator
Generate CSS transform propertiesContrast Checker
Check color contrast for accessibilityDrawing Tool
Simple drawing and sketching canvasDiagram Tool
Draw flowcharts, diagrams and wireframes on an infinite Excalidraw canvas
Which tool do I need?
Convert a HEX color from a design file into HSL or RGB for CSS
Type the HEX value into the Color Picker and copy the format you need. All four formats stay in sync.
Check whether a text color passes WCAG AA
Enter text and background colors to get the exact ratio and pass or fail for normal and large text at AA and AAA.
Write CSS for a gradient background or a card shadow
Adjust the sliders until the preview looks right, then copy the declaration. Add extra stops or layers by hand.
Rotate, scale or skew an element and get the CSS
The transform generator writes only the functions you changed, in a fixed order, with a live preview square.
Sketch a flowchart or system diagram
Use the Diagram Tool for boxes and arrows that stay connected and export to SVG. Use the Drawing Tool for quick freehand marks on a fixed canvas.
About Design Tools
Color work runs in one direction: settle the palette in the Color Picker, then check each text and background pair in the Contrast Checker before the values reach CSS. The three CSS generators each produce one declaration you can paste, and they combine well on a single component: a gradient background, a box shadow for elevation and a transform for a hover state. For pictures rather than code, the Drawing Tool is a raster sketchpad that exports PNG or JPEG, and the Diagram Tool embeds Excalidraw for flowcharts and architecture sketches that export to SVG.
Each generator covers the common case and stops there. The gradient generator writes two color stops, the shadow generator one layer and the transform generator 2D functions only, so multi-stop gradients, layered elevation shadows and 3D transforms need hand edits to the output. The Color Picker works with opaque sRGB and has no alpha channel. The Contrast Checker truncates ratios instead of rounding, so 4.49:1 fails AA as it should. Drawings and diagrams are saved in this browser's localStorage, one scene each, so export files you want to keep.
Guides
- HEX, RGB, HSL and HSV: A Developer's Guide to Color FormatsWhy designers think in HSL, browsers store RGB and your design file exports HEX. How the color models relate and when each one is the right tool.
- WCAG Color Contrast: How the Ratio Works and How to Pass AAWhere 4.5:1 comes from, how relative luminance is calculated, what counts as large text in CSS pixels, and the contrast mistakes that fail audits most often.
- CSS Gradients, Box Shadows and Transforms: The Parts People Get WrongGradient angles, why background-color ignores gradients, how blur and spread really behave, and why the order of transform functions changes where an element ends up.
- Sketching and Diagramming in the Browser: Canvas, Excalidraw and When to Use EachHow browser drawing tools store shapes, when a quick sketch beats a formal diagram, and how to export, save and keep diagrams that teammates can edit later.
Frequently asked questions
What contrast ratios does WCAG 2 ask for?
Level AA needs 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. Success criterion 1.4.11 also asks for 3:1 on UI components and meaningful graphics such as focus rings and input borders.
Which color format is best to use in CSS?
Any of HEX, rgb() and hsl() renders identically, so pick the one your team reads most easily. HSL is handy for building shades because lightness is one number you can step up or down.
Should I use a drawing tool or a diagram tool for technical diagrams?
Use the diagram tool. Excalidraw keeps arrows bound to shapes when you move them and exports SVG that stays sharp in documentation. The drawing tool suits quick annotated sketches.
Can the CSS generators make layered shadows or multi-stop gradients?
Not in one go. Each generates a single shadow layer or a two-stop gradient. Generate each layer separately and join them with commas, or add color stops to the copied gradient by hand.
Where are my sketches and diagrams saved?
In this browser's localStorage, one drawing and one diagram scene at a time. Clearing site data or switching device loses them, so download a PNG, SVG or .excalidraw file for anything you want to keep.