Tadi lab

Splash

Splash is a colour format.

Every splash colour is a 3-digit number. Each digit represents a different colour channel: red, green, and then blue.

For example, 900 has a full red channel (9) and nothing in green (0) or blue (0).

000 is black, 999 is white, 555 is grey, 079 is a light blue, and so on.

Splash colours can help you avoid decision paralysis when picking colours. It's an emotional tool that stops you fussing around— trying to pick the "perfect" colour.

There aren't too many ways to make the most popular colours.

090 green 099 cyan 009 blue 409 purple 909 pink 900 red 940 orange 990 yellow

But it still gives you some wiggle room with choosing your own style. Here's how I made my personal colour theme.

093 green 289 cyan 059 blue 529 purple 947 pink 922 red 942 orange 991 yellow

Or something like that roughly... It doesn't matter if it's not perfect. The restriction has made me more open to errors and it's totally fine. It's liberating.

There are only 1000 splash colours, so you can realistically list them all out. Okay let's do it. (see you at the bottom)

000001002003004005006007008009010011012013014015016017018019020021022023024025026027028

02903003103203303403503603703803904004104204304404504604704804905005105205305405505605705805906006106206306406506606706806907007107207307407507607707807908008108208308408508608708808909009109209309409509609709809910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418

51861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413

42343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498

4995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546

55656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811

81281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796

8969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999

The above grid isn't generated by your web browser. It's static. I've generated it beforehand and it's small enough that I can include it all here. It doesn't take up too much space.

This is a strategy I developed / used for Cellpond. It's part of why it runs so fast. It also means the user can deal with discrete / individual colour values in the drag-and-drop user interface. They don't have to deal with large numbers at all. Only one to nine.

Implementing splash is easy. There's no library or framework or anything because it's slippy enough to build from scratch yourself.

For example, you could make a function like this. It converts from splash to hex.

function getHexFromSplash(splash) { // Pull out the channels into an array const splashChannels = splash.toString().padStart(3, "0").split("")

// Remap from "0 to 9" to "0 to 255" const rgbChannels = splashChannels.map((v) => Math.floor((v / 9) * 255))

// Convert to hexadecimal const hexChannels = rgbChannels.map((v) => v.toString(16).padStart(2, "0")) return "#" + hexChannels.join("") }

It remaps each channel from being between 0 and 9 to being between 0 and 255. Then it converts each one to hexadecimal. Then it smacks it all together.

But wait! Hold up. You can implement it any way you want :)

It can even be another way to customise your theme.

In Cellpond, I handpicked hexadecimal values for each channel so that the resultant colours would better fit my app's theme and needs.

For example, I needed the darkest colour to be visible in front of the black background. So in my theme, 000 is a little bit off-black.

And I like my colours to have a bit more blue and green in them, so I skewed everything that direction. Colours like 222 look a tiny bit bluer / greener than you'd expect. It might be hard to see but trust me, it's true babe

Here's a selection of colours from Cellpond.

093 green 289 cyan 059 blue 529 purple 947 pink 922 red 942 orange 991 yellow

You'll notice they're more pastel than the same colours in raw splash.

093 green 289 cyan 059 blue 529 purple 947 pink 922 red 942 orange 991 yellow

To implement this, I handwrite a lookup table for each channel. Then I map the splash number onto it.

const CHANNEL_VALUES = [ ['17', '37', '46', '62', '80', '9f', 'ae', 'cc', 'f2', 'ff'], ['1d', '43', '62', '80', '9f', 'ae', 'cc', 'de', 'f5', 'ff'], ['28', '46', '62', '80', '9f', 'ae', 'cc', 'de', 'f7', 'ff'] ]

function getHexFromSplash(splash) { // Pull out the channels into an array const splashChannels = splash.toString().padStart(3,

"0").split("")

// Look up the hexadecimal values for each channel const hexChannels = splashChannels.map((v, i) => CHANNEL_VALUES[i][v]) return "#" + hexChannels.join("") }

This way, you can abstract away your particular theme preferences and let the user play with the much more human-readable splash numbers.

Of course... Like I said earlier, "one thousand" is not a very big number really. So you can just use a lookup table if you want. No calculations required.

// Easy! function getHexFromSplash(splash) { return SPLASH_TO_HEX[splash] }

// Long! (but not too long) const SPLASH_TO_HEX = [ "#000000", "#00001c", "#000038", "#000055", "#000071", "#00008d", "#0000aa", "#0000c6", "#0000e2", "#0000ff", "#001c00", "#001c1c", "#001c38", "#001c55", "#001c71", "#001c8d", "#001caa", "#001cc6", "#001ce2", "#001cff", "#003800", "#00381c", "#003838", "#003855", "#003871", "#00388d", "#0038aa", "#0038c6",

"#0038e2", "#0038ff", "#005500", "#00551c", "#005538", "#005555", "#005571", "#00558d", "#0055aa", "#0055c6", "#0055e2", "#0055ff", "#007100", "#00711c", "#007138", "#007155", "#007171", "#00718d", "#0071aa", "#0071c6", "#0071e2", "#0071ff", "#008d00", "#008d1c", "#008d38", "#008d55", "#008d71", "#008d8d", "#008daa", "#008dc6", "#008de2", "#008dff", "#00aa00", "#00aa1c", "#00aa38", "#00aa55", "#00aa71", "#00aa8d", "#00aaaa", "#00aac6", "#00aae2", "#00aaff", "#00c600", "#00c61c", "#00c638", "#00c655", "#00c671", "#00c68d", "#00c6aa", "#00c6c6", "#00c6e2", "#00c6ff", "#00e200", "#00e21c", "#00e238", "#00e255", "#00e271", "#00e28d", "#00e2aa", "#00e2c6", "#00e2e2", "#00e2ff", "#00ff00",

"#00ff1c", "#00ff38", "#00ff55", "#00ff71", "#00ff8d", "#00ffaa", "#00ffc6", "#00ffe2", "#00ffff", "#1c0000", "#1c001c", "#1c0038", "#1c0055", "#1c0071", "#1c008d", "#1c00aa", "#1c00c6", "#1c00e2", "#1c00ff", "#1c1c00", "#1c1c1c", "#1c1c38", "#1c1c55", "#1c1c71", "#1c1c8d", "#1c1caa", "#1c1cc6", "#1c1ce2", "#1c1cff", "#1c3800", "#1c381c", "#1c3838", "#1c3855", "#1c3871", "#1c388d", "#1c38aa", "#1c38c6", "#1c38e2", "#1c38ff", "#1c5500", "#1c551c", "#1c5538", "#1c5555", "#1c5571", "#1c558d", "#1c55aa", "#1c55c6", "#1c55e2", "#1c55ff", "#1c7100", "#1c711c", "#1c7138", "#1c7155", "#1c7171", "#1c718d", "#1c71aa", "#1c71c6", "#1c71e2", "#1c71ff", "#1c8d00", "#1c8d1c", "#1c8d38", "#1c8d55",

"#1c8d71", "#1c8d8d", "#1c8daa", "#1c8dc6", "#1c8de2", "#1c8dff", "#1caa00", "#1caa1c", "#1caa38", "#1caa55", "#1caa71", "#1caa8d", "#1caaaa", "#1caac6", "#1caae2", "#1caaff", "#1cc600", "#1cc61c", "#1cc638", "#1cc655", "#1cc671", "#1cc68d", "#1cc6aa", "#1cc6c6", "#1cc6e2", "#1cc6ff", "#1ce200", "#1ce21c", "#1ce238", "#1ce255", "#1ce271", "#1ce28d", "#1ce2aa", "#1ce2c6", "#1ce2e2", "#1ce2ff", "#1cff00", "#1cff1c", "#1cff38", "#1cff55", "#1cff71", "#1cff8d", "#1cffaa", "#1cffc6", "#1cffe2", "#1cffff", "#380000", "#38001c", "#380038", "#380055", "#380071", "#38008d", "#3800aa", "#3800c6", "#3800e2", "#3800ff", "#381c00", "#381c1c", "#381c38", "#381c55", "#381c71", "#381c8d", "#381caa", "#381cc6",

"#381ce2", "#381cff", "#383800", "#38381c", "#383838", "#383855", "#383871", "#38388d", "#3838aa", "#3838c6", "#3838e2", "#3838ff", "#385500", "#38551c", "#385538", "#385555", "#385571", "#38558d", "#3855aa", "#3855c6", "#3855e2", "#3855ff", "#387100", "#38711c", "#387138", "#387155", "#387171", "#38718d", "#3871aa", "#3871c6", "#3871e2", "#3871ff", "#388d00", "#388d1c", "#388d38", "#388d55", "#388d71", "#388d8d", "#388daa", "#388dc6", "#388de2", "#388dff", "#38aa00", "#38aa1c", "#38aa38", "#38aa55", "#38aa71", "#38aa8d", "#38aaaa", "#38aac6", "#38aae2", "#38aaff", "#38c600", "#38c61c", "#38c638", "#38c655", "#38c671", "#38c68d", "#38c6aa", "#38c6c6", "#38c6e2", "#38c6ff", "#38e200",