Home › Professions › Design

Design & UI/UX Tools

Twenty-five tools for choosing colour, styling CSS, setting type and building layouts. Colour work happens in OKLCH, contrast is judged at full precision, and nothing you make here — no colour, no image, no generated code — leaves your browser.

Colour

Generated perceptually, so the steps look even rather than merely measuring even.

Palette StudioFive to twelve colours generated in OKLCH so the steps look even. Lock what is fixed, undo anything, and see every one of the pairings contrast-checked.Start here UI Theme GeneratorOne brand colour becomes primitive ramps and twenty-six semantic roles, with light and dark generated from the same primitives rather than one inverted into the other.Flagship Brand Colour SystemBrand, neutral and status ramps with the semantic roles chosen by measurement — the ramp is walked until a step actually meets the threshold.Open Colour ConverterAny CSS colour syntax in, all the others out, with the gamut and the Lab white point stated rather than assumed.Open Colour PickerA saturation square and hue bar, fully keyboard operable, with the OKLCH coordinates and what the colour can carry beside them.Open Colour HarmonyComplementary, triadic, analogous and the rest — rotated in OKLCH so the set comes back at one perceived lightness.Open Tints and ShadesA 50–950 ramp where your colour keeps its own lightness at the step you anchor it to, and the hue holds throughout.Open Tailwind PaletteThe same perceptual ramps in the shape Tailwind expects, for both the v4 CSS @theme and the v3 config file.Open Image Palette ExtractorDecoded in your browser and clustered in OKLab, with the coverage of every swatch reported so you can tell dominant from useful.Open

Accessibility

Measured against the criterion that actually applies, and honest about what a ratio does not prove.

Contrast CheckerThe WCAG 2.2 ratio at full precision. #777777 on white displays as 4.50 and fails, and this says so.Start here Accessible PaletteForegrounds that genuinely meet your target against a given background, found by walking OKLCH lightness while holding your hue.Open Colour Blindness SimulatorLeads with the pairs that stop being distinguishable, because a simulated palette is hard to judge if you have typical colour vision.Open

CSS and visual styling

Every value copyable, every slider paired with a number field.

Gradient GeneratorLinear, radial and conic, interpolated in OKLab with an sRGB fallback — and the same stops shown both ways so you can see the difference.Open Mesh GradientLayered radial gradients over a base colour: pure CSS, no image, no canvas, and reproducible from a seed.Open Box ShadowLayered shadows with growing blur and falling opacity, the way real light behaves — because a single large blur reads as a smudge.Open GlassmorphismFrosted panels with the text contrast measured against the composited surface, and advice that follows the actual direction.Open Border RadiusFour independent corners in px, rem or percent, with the shorthand collapsed to the shortest equivalent.Open Clip PathTwelve shapes and regular polygons, with every point editable by typing rather than only by dragging.Open Blob GeneratorOrganic shapes reproducible from a seed, measured after they are built so they cannot clip against their own frame.Open

Typography and units

With the derivation shown, because a value you cannot explain is one you will delete.

Type Scalesize(n) = base × ratio^n, rounded only at display so a scale extended later still lines up.Start here Fluid TypographyA clamp() that moves between two viewports, with the intercept in rem so text still responds to a reader's font-size setting.Open Clamp CalculatorThe same line for any property, with the slope, the intercept, both endpoint checks and what it renders at nine widths.Open px / rem / em ConverterFourteen CSS units plus Android dp and screen PPI, each answer naming which of your settings it depends on.Open Line HeightLeading derived from the font size and the measure together, with a warning when the line length is the real problem.Open Letter SpacingBetween the thousandths of an em that Figma and Photoshop count in and the em that CSS wants, with a live sample.Open

Layout

The parts that are hard to type, built from controls.

Flexbox PlaygroundEvery container and item property, with the axes named — and a warning when a property you have set is having no effect.Open CSS Grid Playgroundrepeat(auto-fit, minmax()) and named template areas, built from controls and shown as the CSS you would write.Open BreakpointsMedia queries in px or em, the fractional-pixel gap handled — and the container queries that make most of them unnecessary.Open Fluid SpacingEvery step of a spacing scale gets its own clamp over the same range, so the whole scale grows at once and the ratios hold.Open Aspect RatioThe simplest ratio, the dimensions that fit a box, the crop that fills one — and what each of those costs.Open Golden RatioA usable constant for dividing space, with an honest account of which famous claims about φ do not survive measurement.Open Composition GridThirds, quarters, golden sections and a phi grid as an exportable overlay, with the intersection coordinates given.Open Responsive ImagesThe widths worth generating, the srcset and picture markup, and a plain account of what sizes is actually for.Open

Surfaces and effects

Including the two styles whose whole aesthetic is in tension with a WCAG criterion, measured rather than shipped quietly.

Text ShadowOffset, blur and an eight-offset outline — with the text contrast measured against the background, which a shadow does not change.Open CSS FiltersOnly the functions that differ from neutral are emitted. A no-op in the list still forces the element onto its own compositing layer.Open Background PatternsTen repeating backgrounds from gradients alone, with the text contrast measured over the pattern rather than the background.Open Noise and GrainAn SVG turbulence filter inlined as a data URI: nothing to download, seamless tiling, reproducible from a seed.Open NeumorphismSoft UI with the edge measured against WCAG 1.4.11 — and an honest account of why no setting satisfies both the style and the criterion.Open NeubrutalismSolid borders and hard offset shadows. The border carries the boundary, which is why this style passes where neumorphism cannot.Open

SVG and icons

An SVG is a document, not a picture. Everything here sanitises on the way in, from an allowlist, and lists what it removed.

SVG OptimizerOnly the lossless steps, with rounding optional. It also sanitises scripts and external references, and lists everything it removed.Start here SVG Colour EditorEvery colour found by parsed value, so all three spellings of red change together — plus a one-click conversion to currentColor.Open SVG WavesSection dividers where every layer runs edge to edge, so the shape spans any width without a seam.Open SVG ShapesPolygons, stars, gears, arcs and a real superellipse as path data, with CSS clip-path and mask output.Open Favicon GeneratorA scalable monogram, previewed at every real size, with the 16-pixel contrast measured and the four link tags that are actually needed.Open App Icon PreviewerOne SVG under the iOS superellipse, Android circle and squircle masks and at tab size, with the Android safe area marked.Open

Motion

Every output carries a reduced-motion branch, and every loading indicator carries the role and the name that make it announce.

Cubic BezierProgress and velocity plotted together, because velocity is what you feel. Overshoot detected, and a reduced-motion branch always emitted.Start here Animation TimingA duration scale with what each step is for, and a warning when the property you chose forces layout on every frame.Open CSS SpinnersFive styles with role=status and an accessible name, and a reduced-motion branch that slows the animation rather than freezing it.Open Skeleton LoadersFour layouts with aria-hidden shapes and a real status message beside them — because a bare grey rectangle announces nothing.Open

More accessibility

Held to the criterion that actually applies, and clear about which level each figure comes from.

Touch TargetsWCAG 2.5.8 at AA, 2.5.5 at AAA, Apple and Material — including the spacing exception that lets a smaller target pass.Open Focus RingsMeasured against every surface it will land on, with a two-tone ring that stays visible on light and dark alike.Open Accessible ButtonsLabel contrast, boundary contrast, target size and focus visibility checked together — because passing four of six is not passing.Open ReadabilityFlesch, Flesch–Kincaid and Gunning Fog with the long sentences named, and an honest account of what these formulas cannot measure.Open

Design systems and tokens

Primitives, semantic references, and formats that keep them — with the lossy conversions named at the point of export.

Design System GeneratorSix answers produce primitive ramps, semantic roles chosen by measurement, scales, component recipes, a dependency graph and a documented bundle.Flagship Design TokensPrimitives and semantic aliases in DTCG, exported to eleven formats — with the ones that cannot express a reference saying so.Open Token ConverterBetween DTCG, CSS variables and flat JSON, catching reference cycles by name and refusing prototype-polluting token names.Open Spacing ScaleThe value of a spacing scale is not the numbers — it is that there are only eight of them.Open Radius ScaleThree or four steps plus a full round, with a side-by-side showing why 9999px gives a pill and 50% gives an ellipse.Open Shadow ScaleTwo shadows per level with the distance doubling, and a dark preview showing why a shadow scale does nothing there.Open WorkspaceEverything these tools have stored in this browser: see it, export it, load one from a file, or clear it. Nothing is ever uploaded.Open

Why everything here works in OKLCH

HSL and sRGB are how a screen addresses its pixels. They say almost nothing about how a colour looks next to another one, and arithmetic on them produces the failures every designer recognises: the ramp with a muddy middle, the yellow that glares beside a blue that sinks, the gradient with a grey band through it.

OKLCH is built so that equal numbers look equal. A ramp with even lightness steps has even perceived steps. A hue rotated 180° comes back at the same perceived lightness. A straight line between two colours passes through the colours a person would name in between. That is the whole reason these tools produce different output from the generation of tools before them.

Colours that sRGB cannot show

OKLCH and Display P3 can name colours no standard screen reproduces. Where that happens the colour is brought into gamut by reducing its chroma at constant lightness and hue, and the amount lost is reported.

The obvious alternative — clipping each channel to its range — is faster and silently moves the hue. A vivid cyan clipped that way comes back a different cyan, and nothing downstream can tell that happened. No tool here does it.

What a contrast ratio proves

It satisfies one WCAG success criterion. It does not make an interface accessible, and it says nothing about focus order, labelling, motion, or whether the thing is usable at all. Automated checks find a minority of real barriers.

Within that limit these tools are careful: the ratio is computed at full precision and rounded only for display, alpha is composited against a stated backdrop rather than assumed white, and a role is judged against the criterion that actually applies to it — a surface sitting a shade off the canvas is not a component, and failing it against 3:1 would be inventing a requirement WCAG does not make.

Nothing you make here is uploaded

Colours, images, SVG and generated code are processed on your own device. There is no server to send them to. The image palette extractor decodes your file in the tab and releases the pixels when you clear it.

A palette made on one page is available on the next through a workspace kept in this browser's local storage. It is never synced, never uploaded, and clearing your site data deletes it.

Related tools already on the site

The grid splitter and image tools handle raster work; developer tools cover encoding and formatting. For applying colour to a document rather than an interface, the PDF tools are next door.