UI StackColors
Sites
UI StackThe eight sites, read bottom upTypefacesFont pairingsColorsColour names and palettesPatternsBackgrounds and texturesOrnamentsBorders, badges, seals and stampscarduiCards and tilesLayoutsPage layouts: shells, patterns and reflowMotionMoves with their numbers and ownersWorldsBrand worlds that join the layers

Tools

Six tools, all computed in your browser. Each takes its input from the URL, so any result can be linked, and each hands its colours to the tray.

Picker

Pick on OKLCH, HCT or HSL planes with the sRGB gamut edge drawn, and read the colour in every space.

picker.html?hex=3B82F6Open picker

Tonal generator

Material 3 tonal palettes and scheme roles from one seed, plus an OKLCH ramp in Tailwind steps.

tonal.html?seed=3B82F6Open tonal generator

Contrast and vision

WCAG ratios and APCA Lc for every pair, and the whole set seen with protan, deutan and tritan vision.

contrast.html?c=141413,FAFAF9,3B82F6Open contrast and vision

Colours from an image

Drop a photo or a swatch image and get its colours with their share of the picture, ready for the tray.

image.htmlOpen colours from an image

Brand builder

From one to three anchor colours to a full brand: tinted neutrals, semantic colours, light and dark themes, exports.

brand.htmlOpen brand builder

Score

The palette scorecard for any colours: give each a role and nine checks say Sound, Watch or Rework, then try a collection's rubric on it.

score.html?c=F4ECE1,4A3328,E2503C&roles=bg,text,accentOpen score