About six months to a year ago I sort of completed a personal website of mine called “The Scale Model Paint Finder”. In this article I am going to talk about the paint finder in a way that someone interested in the paint finder would find informative, rather than the key points someone looking to procure my services would find interesting. Not that I’m closed to offers, I want to share something I am passionate about at the moment.
What does the Scale Model Paint Finder Do?
I picked up scale modelling a while back and when I got my first model I pulled out the instructions wrote down all the colors needed to complete the model and I headed for the hobby store. The model instructions required Tamiya brand paints. Well, the store only carried Testor products. So what I did was buy all the paints by name, if I had Nato Green written down I bought a green that closest matched the color I thought it should be. Some of the colors had typical names like Gun Metal and Flat Black etc., but the end result once I compared it to a real model was quite off. Granted the untrained eye won’t catch it, the other hobbyists out there could definitely spot the errors.
So I did some research on cross brand paint choices. I found a bunch of flow charts and a few apps that worked decent but nothing that would help me at the store. I wanted something that I could store a list of colors that I could set up at home and when I got to the store I could look at my list on my phone and easily find the best choice for an alternative that is available to me at that time. I also wanted to keep an inventory of paints that I could keep that would save me from buying redundant bottles of paint.
The Scale Model Paint Finder allows you to do just that, and a bit more. It has a database of over 2800 colors and counting including color standards such as Federal Standard colors and RAL colors. You can find the colors you are looking for easily, and find the closest matching paints of that color just as fast. When you create an account you are able to maintain your inventory, tag paints you need and search for the closes matching paints in your inventory.
What’s the future of the Scale Model Paint Finder?
I really haven’t marketed the site to any extent yet. But I would like to expand its usefulness by adding a sort of profile portal for hobbyists to add their completed models, brag about the work they done and connect with other hobbyists. But that’s a ways down the road depending on if people start actually using the site.
The Geeky Web Design Stuff
So the site was originally designed around adaptive design techniques. This at least made the site somewhat accessible on a phone. The design needed some honing, and still does. I recently updated the design a little. I changed the background colors and some icons and widgets here and there, but more importantly I implemented a responsive design to the layout framework. Amazingly, in just one year Adaptive design turned into mobile first responsive design and the responsive design turned into mobile first responsive design. I remember reading that responsive design article in 2010 from A List Apart’s Ethan Marcotte. At the time I remember that true responsive design was not possible quite yet, so we did adaptive design, adaptive design had gone through its methodologies and then morphed into what we claimed to be responsive design, which was really adaptive design with a flexible grid. Then we realized even though our sites look great on all these devices, it takes two years to look at this on a mobile device. So now we have mobile first responsive design. We load the smallest background images needed to complete the experience on the given view port. And that is where the Scale Model Paint Finder really excels. Not much work was needed in terms of background images as the site has very few background images and the ones that are there are small anyway. To improve that even more I utilized Sprites. Like I said this is still a work in progress but the next step I will make what foreground pictures the site does have into vector images (at least the non-raster images). Then this site should be truly responsive.
The Techy Back End
Now I don’t claim to be a web developer, or any shade of developer for that matter. However, I did build the backend of this site from header to footer. Normally, I like to use frameworks, such as WordPress, Drupal or the like, I wanted to get a truly custom built feel to this. This site is extremely heavy in jQuery, more so than I care to admit (not that jQuery is back end). But the PHP of this site uses MySQL to manage the database dirty work. The code is written using current object oriented programming methods. There are various classes that make up the application and the meat of this entire site resides in the function that determines the similarities of the colors. This was a tricky thing to accomplish. For example you can make a calculation to get you most of the way there:
$red = pow(2,$red * 0.30); $green = pow(2,$green * 0.80); $blue = pow(2,$blue * 0.11); return $red + $green + $blue;
The problem with this calculation is that yeah it gets me close but it calculates a color to a single value. For example, take the three colors below:
Looking at these three colors on your screen you would probably choose color 2 as more of a match to the base color. But the calculation determines color 1 to be much closer a color than color two. So I found this to be fairly accurate when you’re dealing with thousands of colors, but I didn’t want fairly accurate. So I created a rating system and devised ways to calculate difference in hue, shade, brightness, paint finish (when applicable), variant (solid, metallic, clear etc.) and the kind of binder used in the paint (acrylic, enamel etc). Of course certain criteria have more value than others (binder does not hold as much weight as say hue) and the result is as close to perfect as I can make it. I still fiddle around with the algorithm from time to time to see if I can improve result but in the end it’s the data that makes the difference here.
Ok, I realize if there were any readers to this article, I probably lost most of you by now. For those few people who are actually still reading this, you have my appreciation. Now on to the super dry stuff; the data. Initially, I wanted to call up all the paint manufacturers and ask them to send me some sample paint of all their colors so that I can paint some chips and be able to give the users a true color comparison. I never did that and still may inquire if users begin to use. Until then I went to each manufacturer listed in the paint finder site and entered each color individually. For a few of the manufacturers websites I was able to use some php to suck out all the info out of the page and place it into the database, but for the most part each are entered manually. The bad thing about this approach is that I have no idea how far off their online representation of these colors are from their actual product. For example, the Vallejo Model Aire online representation of their flat black is #000000, however the true color of the paint (I know because I have it) is actually a dark gray. Now of course this is due to being painted onto a white surface, the lighting and a few other reasons but the gist is that if every color is processed exactly the same, then each color can have a more accurate comparison. Anal? Yeah, but so are most of the other hobbyists out there trying to get accurate results. You can also argue that some batches of paint may vary from lot to lot and you’re right, but I am explaining that the data used on this site is not perfect, and needs to be improved, the road of enlightenment is to get the cleanest data possible.
The Scale Model Paint Finder is a fun project… trivial, but fun. I learned a lot during this project as so much of it was new territory. I hope that in time all the work put in to this site comes to use for one or two folks.