Colour Contrasts - Complete
I did something a little silly last night. Earlier in the day I looked through my Mastodon bookmarks and found a bunch of saved Colour Contrast posts from the random colour contrast bot (which I believe is now defunct, thanks to botsin.space shutting down). I have a standalone hand-coded website that collects some of my favourites: Random Colour Contrasts
There are probably a bunch of ways I could have done this more efficiently but I opted to hand-code it using basic tables. The problem is that it's incredibly repetitive and I either have to type a bunch of <td> entries with individual CSS in-line styles with different hex codes, or do a copy/paste job and pay attention to what I'm changing.
I wanted to clear out my bookmarks on Mastodon and finally finish the site, so I thought a great way to do this was to create a bash script! Here's the code I wrote; a word of warning - this code gets messy really quick.
#!/bin/bash
# Create <td> rows for pasting into contrasts.srgower.com
# Loop 6 times to get 6 matching contrasts
for i in {1..6}
do
printf "Enter the first colour: "
read colour1
printf "Enter the first colour\'s hex code: "
read colour1hex
printf "Enter the second colour: "
read colour2
printf "Enter the second colour\'s hex code: "
read colour2hex
printf "Enter the Mastodon URL: "
read URL
echo "<td style=\"background:#"$colour1hex"; color:#"$colour2hex";\"><a href=\""$URL"\" title=\""$colour1 "#"$colour1hex"\" target=\"blank\">"$colour1 "#"$colour1hex"</a></td>" >> table.txt
echo "<td style=\"background:#"$colour2hex"; color:#"$colour1hex";\"><a href=\""$URL"\" title=\""$colour2 "#"$colour2hex"\" target=\"blank\">"$colour2 "#"$colour2hex"</a></td>" >> table.txt
echo " " >> /home/stephen/Desktop/table.txt
echo "Table Data has been saved to /home/stephen/Desktop/table.txt"
done
echo "Task complete."
So all that was left was to copy and paste the matching pairs. Still not perfect (I bet someone out there could probably automate it even more), but it got the job done.
If you can't tell from the script, I have it set to prompt me for the colour names and hex values. I do two at a time to get the matching pairs, and it prints the data into a separate text file before looping back to the beginning 5 more times.
Why run the loop 6 times? Because I have the table rows (<tr>) grouped in bunches of 6. In the end though I ended up running the loop 14 times because I just wanted to clear out the bookmarks.
Anyway, the result is something like this (using simple colours to make it easier for my brain):
<td style="background:#000; color:#fff;"><a href="https://botsin.space/.../">Black #000</a></td>
<td style="background:#fff; color:#000;"><a href="https://botsin.space/.../">White #fff</a></td>
I can manually paste that into my index.html file and then upload manually to Netlify (where I host my personal domain). I haven't finished that work, and it's living on a USB drive connected to my Linux tower. It's still an annoying, repetitive copy/paste job so I'm not in a hurry to get it done.
Reply by email Share this post
Or if you prefer, find me on Mastodon. And there's also Bluesky!