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)
000001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048049050051052053054055056057058059060061062063064065066067068069070071072073074075076077078079080081082083084085086087088089090091092093094095096097098099100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999
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", "#38e21c", "#38e238", "#38e255", "#38e271", "#38e28d", "#38e2aa", "#38e2c6", "#38e2e2", "#38e2ff", "#38ff00", "#38ff1c", "#38ff38", "#38ff55", "#38ff71", "#38ff8d", "#38ffaa", "#38ffc6", "#38ffe2", "#38ffff", "#550000", "#55001c", "#550038", "#550055", "#550071", "#55008d", "#5500aa", "#5500c6", "#5500e2", "#5500ff", "#551c00", "#551c1c", "#551c38", "#551c55", "#551c71", "#551c8d", "#551caa", "#551cc6", "#551ce2", "#551cff", "#553800", "#55381c", "#553838", "#553855", "#553871", "#55388d", "#5538aa", "#5538c6", "#5538e2", "#5538ff", "#555500", "#55551c", "#555538", "#555555", "#555571", "#55558d", "#5555aa", "#5555c6", "#5555e2", "#5555ff", "#557100", "#55711c", "#557138", "#557155", "#557171", "#55718d", "#5571aa", "#5571c6", "#5571e2", "#5571ff", "#558d00", "#558d1c", "#558d38", "#558d55", "#558d71", "#558d8d", "#558daa", "#558dc6", "#558de2", "#558dff", "#55aa00", "#55aa1c", "#55aa38", "#55aa55", "#55aa71", "#55aa8d", "#55aaaa", "#55aac6", "#55aae2", "#55aaff", "#55c600", "#55c61c", "#55c638", "#55c655", "#55c671", "#55c68d", "#55c6aa", "#55c6c6", "#55c6e2", "#55c6ff", "#55e200", "#55e21c", "#55e238", "#55e255", "#55e271", "#55e28d", "#55e2aa", "#55e2c6", "#55e2e2", "#55e2ff", "#55ff00", "#55ff1c", "#55ff38", "#55ff55", "#55ff71", "#55ff8d", "#55ffaa", "#55ffc6", "#55ffe2", "#55ffff", "#710000", "#71001c", "#710038", "#710055", "#710071", "#71008d", "#7100aa", "#7100c6", "#7100e2", "#7100ff", "#711c00", "#711c1c", "#711c38", "#711c55", "#711c71", "#711c8d", "#711caa", "#711cc6", "#711ce2", "#711cff", "#713800", "#71381c", "#713838", "#713855", "#713871", "#71388d", "#7138aa", "#7138c6", "#7138e2", "#7138ff", "#715500", "#71551c", "#715538", "#715555", "#715571", "#71558d", "#7155aa", "#7155c6", "#7155e2", "#7155ff", "#717100", "#71711c", "#717138", "#717155", "#717171", "#71718d", "#7171aa", "#7171c6", "#7171e2", "#7171ff", "#718d00", "#718d1c", "#718d38", "#718d55", "#718d71", "#718d8d", "#718daa", "#718dc6", "#718de2", "#718dff", "#71aa00", "#71aa1c", "#71aa38", "#71aa55", "#71aa71", "#71aa8d", "#71aaaa", "#71aac6", "#71aae2", "#71aaff", "#71c600", "#71c61c", "#71c638", "#71c655", "#71c671", "#71c68d", "#71c6aa", "#71c6c6", "#71c6e2", "#71c6ff", "#71e200", "#71e21c", "#71e238", "#71e255", "#71e271", "#71e28d", "#71e2aa", "#71e2c6", "#71e2e2", "#71e2ff", "#71ff00", "#71ff1c", "#71ff38", "#71ff55", "#71ff71", "#71ff8d", "#71ffaa", "#71ffc6", "#71ffe2", "#71ffff", "#8d0000", "#8d001c", "#8d0038", "#8d0055", "#8d0071", "#8d008d", "#8d00aa", "#8d00c6", "#8d00e2", "#8d00ff", "#8d1c00", "#8d1c1c", "#8d1c38", "#8d1c55", "#8d1c71", "#8d1c8d", "#8d1caa", "#8d1cc6", "#8d1ce2", "#8d1cff", "#8d3800", "#8d381c", "#8d3838", "#8d3855", "#8d3871", "#8d388d", "#8d38aa", "#8d38c6", "#8d38e2", "#8d38ff", "#8d5500", "#8d551c", "#8d5538", "#8d5555", "#8d5571", "#8d558d", "#8d55aa", "#8d55c6", "#8d55e2", "#8d55ff", "#8d7100", "#8d711c", "#8d7138", "#8d7155", "#8d7171", "#8d718d", "#8d71aa", "#8d71c6", "#8d71e2", "#8d71ff", "#8d8d00", "#8d8d1c", "#8d8d38", "#8d8d55", "#8d8d71", "#8d8d8d", "#8d8daa", "#8d8dc6", "#8d8de2", "#8d8dff", "#8daa00", "#8daa1c", "#8daa38", "#8daa55", "#8daa71", "#8daa8d", "#8daaaa", "#8daac6", "#8daae2", "#8daaff", "#8dc600", "#8dc61c", "#8dc638", "#8dc655", "#8dc671", "#8dc68d", "#8dc6aa", "#8dc6c6", "#8dc6e2", "#8dc6ff", "#8de200", "#8de21c", "#8de238", "#8de255", "#8de271", "#8de28d", "#8de2aa", "#8de2c6", "#8de2e2", "#8de2ff", "#8dff00", "#8dff1c", "#8dff38", "#8dff55", "#8dff71", "#8dff8d", "#8dffaa", "#8dffc6", "#8dffe2", "#8dffff", "#aa0000", "#aa001c", "#aa0038", "#aa0055", "#aa0071", "#aa008d", "#aa00aa", "#aa00c6", "#aa00e2", "#aa00ff", "#aa1c00", "#aa1c1c", "#aa1c38", "#aa1c55", "#aa1c71", "#aa1c8d", "#aa1caa", "#aa1cc6", "#aa1ce2", "#aa1cff", "#aa3800", "#aa381c", "#aa3838", "#aa3855", "#aa3871", "#aa388d", "#aa38aa", "#aa38c6", "#aa38e2", "#aa38ff", "#aa5500", "#aa551c", "#aa5538", "#aa5555", "#aa5571", "#aa558d", "#aa55aa", "#aa55c6", "#aa55e2", "#aa55ff", "#aa7100", "#aa711c", "#aa7138", "#aa7155", "#aa7171", "#aa718d", "#aa71aa", "#aa71c6", "#aa71e2", "#aa71ff", "#aa8d00", "#aa8d1c", "#aa8d38", "#aa8d55", "#aa8d71", "#aa8d8d", "#aa8daa", "#aa8dc6", "#aa8de2", "#aa8dff", "#aaaa00", "#aaaa1c", "#aaaa38", "#aaaa55", "#aaaa71", "#aaaa8d", "#aaaaaa", "#aaaac6", "#aaaae2", "#aaaaff", "#aac600", "#aac61c", "#aac638", "#aac655", "#aac671", "#aac68d", "#aac6aa", "#aac6c6", "#aac6e2", "#aac6ff", "#aae200", "#aae21c", "#aae238", "#aae255", "#aae271", "#aae28d", "#aae2aa", "#aae2c6", "#aae2e2", "#aae2ff", "#aaff00", "#aaff1c", "#aaff38", "#aaff55", "#aaff71", "#aaff8d", "#aaffaa", "#aaffc6", "#aaffe2", "#aaffff", "#c60000", "#c6001c", "#c60038", "#c60055", "#c60071", "#c6008d", "#c600aa", "#c600c6", "#c600e2", "#c600ff", "#c61c00", "#c61c1c", "#c61c38", "#c61c55", "#c61c71", "#c61c8d", "#c61caa", "#c61cc6", "#c61ce2", "#c61cff", "#c63800", "#c6381c", "#c63838", "#c63855", "#c63871", "#c6388d", "#c638aa", "#c638c6", "#c638e2", "#c638ff", "#c65500", "#c6551c", "#c65538", "#c65555", "#c65571", "#c6558d", "#c655aa", "#c655c6", "#c655e2", "#c655ff", "#c67100", "#c6711c", "#c67138", "#c67155", "#c67171", "#c6718d", "#c671aa", "#c671c6", "#c671e2", "#c671ff", "#c68d00", "#c68d1c", "#c68d38", "#c68d55", "#c68d71", "#c68d8d", "#c68daa", "#c68dc6", "#c68de2", "#c68dff", "#c6aa00", "#c6aa1c", "#c6aa38", "#c6aa55", "#c6aa71", "#c6aa8d", "#c6aaaa", "#c6aac6", "#c6aae2", "#c6aaff", "#c6c600", "#c6c61c", "#c6c638", "#c6c655", "#c6c671", "#c6c68d", "#c6c6aa", "#c6c6c6", "#c6c6e2", "#c6c6ff", "#c6e200", "#c6e21c", "#c6e238", "#c6e255", "#c6e271", "#c6e28d", "#c6e2aa", "#c6e2c6", "#c6e2e2", "#c6e2ff", "#c6ff00", "#c6ff1c", "#c6ff38", "#c6ff55", "#c6ff71", "#c6ff8d", "#c6ffaa", "#c6ffc6", "#c6ffe2", "#c6ffff", "#e20000", "#e2001c", "#e20038", "#e20055", "#e20071", "#e2008d", "#e200aa", "#e200c6", "#e200e2", "#e200ff", "#e21c00", "#e21c1c", "#e21c38", "#e21c55", "#e21c71", "#e21c8d", "#e21caa", "#e21cc6", "#e21ce2", "#e21cff", "#e23800", "#e2381c", "#e23838", "#e23855", "#e23871", "#e2388d", "#e238aa", "#e238c6", "#e238e2", "#e238ff", "#e25500", "#e2551c", "#e25538", "#e25555", "#e25571", "#e2558d", "#e255aa", "#e255c6", "#e255e2", "#e255ff", "#e27100", "#e2711c", "#e27138", "#e27155", "#e27171", "#e2718d", "#e271aa", "#e271c6", "#e271e2", "#e271ff", "#e28d00", "#e28d1c", "#e28d38", "#e28d55", "#e28d71", "#e28d8d", "#e28daa", "#e28dc6", "#e28de2", "#e28dff", "#e2aa00", "#e2aa1c", "#e2aa38", "#e2aa55", "#e2aa71", "#e2aa8d", "#e2aaaa", "#e2aac6", "#e2aae2", "#e2aaff", "#e2c600", "#e2c61c", "#e2c638", "#e2c655", "#e2c671", "#e2c68d", "#e2c6aa", "#e2c6c6", "#e2c6e2", "#e2c6ff", "#e2e200", "#e2e21c", "#e2e238", "#e2e255", "#e2e271", "#e2e28d", "#e2e2aa", "#e2e2c6", "#e2e2e2", "#e2e2ff", "#e2ff00", "#e2ff1c", "#e2ff38", "#e2ff55", "#e2ff71", "#e2ff8d", "#e2ffaa", "#e2ffc6", "#e2ffe2", "#e2ffff", "#ff0000", "#ff001c", "#ff0038", "#ff0055", "#ff0071", "#ff008d", "#ff00aa", "#ff00c6", "#ff00e2", "#ff00ff", "#ff1c00", "#ff1c1c", "#ff1c38", "#ff1c55", "#ff1c71", "#ff1c8d", "#ff1caa", "#ff1cc6", "#ff1ce2", "#ff1cff", "#ff3800", "#ff381c", "#ff3838", "#ff3855", "#ff3871", "#ff388d", "#ff38aa", "#ff38c6", "#ff38e2", "#ff38ff", "#ff5500", "#ff551c", "#ff5538", "#ff5555", "#ff5571", "#ff558d", "#ff55aa", "#ff55c6", "#ff55e2", "#ff55ff", "#ff7100", "#ff711c", "#ff7138", "#ff7155", "#ff7171", "#ff718d", "#ff71aa", "#ff71c6", "#ff71e2", "#ff71ff", "#ff8d00", "#ff8d1c", "#ff8d38", "#ff8d55", "#ff8d71", "#ff8d8d", "#ff8daa", "#ff8dc6", "#ff8de2", "#ff8dff", "#ffaa00", "#ffaa1c", "#ffaa38", "#ffaa55", "#ffaa71", "#ffaa8d", "#ffaaaa", "#ffaac6", "#ffaae2", "#ffaaff", "#ffc600", "#ffc61c", "#ffc638", "#ffc655", "#ffc671", "#ffc68d", "#ffc6aa", "#ffc6c6", "#ffc6e2", "#ffc6ff", "#ffe200", "#ffe21c", "#ffe238", "#ffe255", "#ffe271", "#ffe28d", "#ffe2aa", "#ffe2c6", "#ffe2e2", "#ffe2ff", "#ffff00", "#ffff1c", "#ffff38", "#ffff55", "#ffff71", "#ffff8d", "#ffffaa", "#ffffc6", "#ffffe2", "#ffffff"
]
This might seem silly but this is what I do in Cellpond and I promise u it works really well. If you're interested, here's the big lookup file I use. But yeah if you want to explore the SOURCE of the CELLPOND more then please be brave
Doing something with colours? Consider splash. It's human-readable. It's computer-readable. It's performant. It stops you being perfect. Now play!
999999
#ffffff
rgb(255, 255, 255)
Thanks very much for reading / trying my thing! Please let me know what you think. I'm @todepond everywhere.
And if you like splash colours, consider sharing this page with your friends! 🥺
This page was heavily inspired by Felix Roos's garten which is a great website. pls check it out!!
But yeah. Whether u wanna be slippy or scrappy, i think that being splashy can help ok bye.
back to the wikiblogardenite