Colour-rich code for UK makers
British map legends already behave like a design system: brown contours, green woodland, red access land and blue water. This piece turns those cartographic cues into an OKLCH token set, checks the contrast, and builds a small SVG legend that stays readable as it shrinks.
A browser-based tartan designer is mostly a list, a mirror and a modulo operation — but the details are where it earns its keep. Here's how to expand a sett into a proper 2/2 twill weave in SVG or canvas, catch the halving-and-doubling mistakes before they ship, and handle named setts with the care they deserve.
Vintage tabletop football gives us claret, amber, sky blue and referee black — a joyful palette that can go badly wrong on a 12px badge. Here is how to turn those strips into tokens, check contrast for tiny UI, and build a CSS Grid pitch with a procedural match-day scene that stays readable.
Traditional narrowboat livery is a confident British colour system hiding in plain sight. Here is how to sample its maroon, cream, teal and mustard, turn them into reusable OKLCH tokens, and keep the result usable well beyond the towpath.
Pub signs are a masterclass in working colour: cream grounds, gold leaf, Brunswick green and a red that means business. Here is how to turn that palette into a p5.js generative sign painter, with brush-like strokes, SVG export and contrast checks that stop the whole thing turning to mush on a phone screen.
A practical walkthrough for turning galvanised steel, creosoted timber, terracotta pots, masking tape and safety orange into a VS Code theme that stays readable through long coding sessions. We cover real-world sampling, OKLCH conversion, token mapping and contrast testing for light and dark variants.
UK church windows are hand-built colour systems: saturated glass, black lead lines and a rhythm you can read from across the nave. This tutorial turns that structure into a small browser palette generator that outputs OKLCH tokens you can actually use.
UK street furniture already has a working colour language: postbox red, Belisha amber, motorway blue and the grey of municipal kit. This walkthrough turns those cues into semantic CSS tokens, checks them against WCAG contrast targets and adjusts the ramp for dark mode without losing the civic signal.
Ceefax's eight-colour palette is a shortcut to instant recognition, but pure teletext colours were never designed for WCAG. This guide rebuilds the mode-7 look in Canvas with OKLCH tokens, automatic contrast checks and a few responsible-use rules for UK maker sites.
A colour-rich audit of ten familiar UK shopfront types, turned into practical CSS custom-property palettes and tested for contrast without tipping into nostalgic pastiche.
A practical WebGL build for a West End-style theatre marquee, covering warm bulb colour, instanced geometry, human-looking failures, reduced-motion fallbacks and a performance budget that keeps the glow on a mid-range laptop.
Orange-banded tickets, amber departure boards and folded timetable cards are accidental colour systems built for function. Here are five found palettes from UK rail ephemera, plus a small browser tool for sampling your own and turning them into accessible CSS custom properties.
A practical walkthrough for pulling UK forecast data into a small JavaScript or p5.js sketch, then mapping rain, temperature and wind into a restrained OKLCH palette. Includes API-key handling, sensible caching, and fallbacks for when the feed — like the weather — refuses to cooperate.
Woad, madder and weld are not Pantone chips, and a shader is not a dye vat. But translating historic British dye colours into GLSL is a useful exercise in restraint, spectral honesty and knowing when digital mixing lies to you.
Fixed light and dark modes treat the British day like a switch, but our winters fade by mid-afternoon and our summers stretch past nine. Here is a small, accessible system for shifting palette temperature and contrast with the sun — without turning your site into a gimmick.
Too many UK creative tools look like they were designed in the same grey waiting room. Here is a practical argument for colour with a point of view — plus a token structure, testing routine and checklist for teams that want to stand out without breaking usability.
London stock brick, Welsh slate, weathered copper and Portland stone all have a colour story worth stealing. This hands-on p5.js guide shows how to sample those references, layer noise and repeat patterns, keep sketches light in the browser, and export tiles you can actually use.
Forget generic trend palettes. These ten British coastal landscapes give you ready-to-use hex, HSL and OKLCH colours, plus creative-coding prompts for p5.js, Three.js and CSS heroes.
Accessible colour does not have to mean grey buttons and apologetic links. Here is a practical OKLCH and token workflow for UK public-sector and charity sites that keeps brand colour rich while meeting WCAG 2.2 contrast checks, with a starter palette and a p5.js ratio preview.