Profile Banner Maker

The strip across the top of a profile page is the widest picture most people will ever publish about themselves, and it is almost never looked at directly. Eyes go to the face, then the name, then the first line of what you do. The banner is what those three things sit on. That makes it a backdrop, and a backdrop has one job: to be pleasant without asking for attention.

Most people fill it with a photograph because a photograph is what they have. A wide one is rare, though. A holiday picture cropped to a long thin strip loses its subject, and a stock skyline says nothing about you. The alternative this page argues for is plainer and, in a quiet way, more personal: a pattern drawn from a seed, in colours derived from one colour you like, with one line of text and a clear space where your photo will land.

Quiet is a feature, not a lack of effort

A busy banner competes with the only things on the page that matter. Dense texture behind a name makes the name harder to read, and strong colour pulls the eye away from the face it is meant to frame. Restraint here is not modesty. It is how a background does its work.

So the patterns in the tool are deliberately simple. There are contour lines, which a geography lesson will have taught you: a contour line joins points where a function of two variables has the same value, the way a map line joins points of the same height. There is a dot field, a scatter of rounded shapes, diagonal bands and a horizon of layered hills. There is a halftone fade, which borrows the printer’s trick of simulating continuous tone with dots that vary in size or spacing. And there are Truchet arcs.

Truchet tiles have a pleasing history for something so small. They were first described in a memoir of 1704, and the form used here, popularised in 1987 by Cyril Stanley Smith, puts two quarter circles on each square tile, joining the midpoints of adjacent sides. Each tile can sit one of two ways. Turn them at random and the arcs link into long meandering paths that look planned but were not.

None of these is clever mathematics, and that is the point. The tool does not try to dazzle. It asks how few marks it can make while still giving the strip some life, and it keeps every mark well away from the place where your photograph goes.

A seed makes it yours, and makes it again

Random patterns have a reputation for being disposable: press a button, get something, lose it the moment you press again. Seeding removes that problem. The tool turns the words you type into a 32-bit number with a fixed hash, then feeds that number to a xorshift32 generator. Xorshift32 keeps one 32-bit word of state and walks through 2^32 - 1 values before it repeats, using nothing but shifts and exclusive-or. The same seed gives the same stream of numbers, so the same settings give the same pattern.

That has practical value. If you want the banner a little wider next year, you open the link you saved and change the size; the dots and arcs reappear exactly where they were, just drawn at the new size. The pattern is defined in fractions of the banner’s height rather than in pixels, so a 1600 by 400 file and an 800 by 200 file are the same drawing at two resolutions. The tool’s tests confirm the pixels are byte for byte identical across two fresh renders, and that the larger one, averaged down to the smaller size, matches it to within a stated tolerance.

The noise behind the contour lines and the hills is value noise: a lattice of random values, one per grid point, with smooth interpolation in between, summed over a few octaves so that large gentle swells carry smaller ripples. Each lattice value comes from the seeded stream, never from the clock. A test in the build seeds it from the time on purpose and watches the reproducibility check fail, which is how you know the check is watching.

Scattered dots need one more idea. Purely random points clump and leave holes, which reads as untidy. Poisson disk sampling places points at random but refuses any that fall too close to an earlier one, which gives an even, natural spacing. The naive way, throwing darts and rejecting near misses, is slow. Robert Bridson described in 2007 a simple modification of dart throwing that produces such samples in time proportional to their number, and the sampler here follows that idea. Every one of 200 test seeds keeps its minimum distance.

Colours chosen by lightness, text judged by its worst pixel

Most people can name one colour they would like on their banner. Building four from it is where palettes usually go wrong, because the familiar ways of making a colour lighter or softer do not keep its character. The tool works in OkLCh, a polar form of the Oklab space that the CSS Color specification describes as more perceptually uniform than CIE Lab. In it, lightness, chroma and hue can be moved separately, and a step of a given size looks roughly the same size whatever the hue.

Here is the worked example you can repeat. Type the colour #2a8a9a with a light ground and two hues. In OkLCh it is lightness 0.586, chroma 0.089, hue 211. The tool keeps that hue and builds a ground at lightness 0.965 with a whisper of chroma, giving #e8f7fa. It builds a soft step at 0.885 and a mid step at 0.760, both turned 35 degrees to hue 246, giving #c4dcf3 and #91b6d7. The original colour stays as a sparing accent, and the text candidate is a deep #0d262a at lightness 0.25.

Some of those steps would fall outside what a screen can show. When that happens the tool keeps the lightness and hue and reduces the chroma until every channel fits, which is the chroma reduction CSS Color 4 describes for mapping colours into a smaller gamut. Its own example, a vivid yellow pulled into sRGB, comes out the same here to four decimal places.

Then comes the part that matters most to readers. The Web Content Accessibility Guidelines define a contrast ratio from the relative luminance of two colours, and ask for at least 4.5 : 1 for ordinary text. The supporting guidance explains that the figure compensates for the contrast sensitivity lost with moderately reduced vision, and that ratios are not rounded: 4.499 does not pass.

Contrast against the ground is easy to admire. In the example, #0d262a on #e8f7fa measures 14.40 : 1. On the mid step it is 7.44 : 1, still comfortable.

But against the accent it is 3.92 : 1, and an accent contour line running under one letter is enough to make that letter the weakest point. An average over the text area would hide it completely. So the tool reads every pixel actually behind the text and reports the smallest ratio. If it is under 4.5, a soft panel of the ground colour fades in under the text, five percent at a time, until the worst pixel passes.

A hole for the photo, and one line of words

If the site you post to lays a round photo over part of the banner, where it sits and how large it is depends on that site, the screen and the year, and the site’s own help pages are not a source this page can cite. So the tool does not pretend to know. You mark the zone yourself, as a circle positioned in fractions of the banner, and you should check it against the page where you will post.

Inside that circle the pattern stops completely. Around it the pattern fades in over a short distance instead of being cut off by a hard ring, so the photo sits on calm ground rather than on a hole. The text placement treats the circle as forbidden ground too: if your chosen corner would bring the words within a set gap of it, the line moves beside or above the zone, and if nothing fits it shrinks, and finally declines to draw rather than overlap. The tests run this against a thousand random layouts and count every pixel inside the zone.

One line is enough. A name, or a short phrase about the work, perhaps a smaller second line. Anything longer turns the backdrop into a notice board. And because a picture of words is invisible to anyone using a screen reader, the export panel asks for alt text. The guidance on images of text is simple: the text alternative should contain the same words as the image.

What leaves the tool is also kept plain. A PNG file is a signature followed by chunks, and the specification calls everything beyond the picture data ancillary, chunks a decoder does not need to show the image. The tool writes only the picture chunks, and it removes the colour profile, Exif and XMP blocks a browser’s JPEG or WebP encoder may add, then reads each file back to prove it.

There are limits worth saying plainly. The tool cannot tell you what a given site will crop, cover or compress, and it does not try. It cannot judge taste: a seed you dislike is simply a seed to change. Its contrast figure is measured on the exact pixels it writes; a site that recompresses the file can shift colours slightly, so a result near 4.5 deserves a little extra margin.

And a quiet banner will not make anyone read your profile. It only makes sure that nothing behind your name gets in the way when they do.