Color Utility

[bfrd]

Hi All,

As many of you may know I have been working on a suite of additions for the forum. Getting our Flickr and imgur images integrated into the new message window is just about complete. I have also been working on a Color Widget (I have no idea what to call it).

Basically, I wanted an easier way to cross reference different paint ranges. I know many of us don't use the same paint ranges that exist in the color callout of our kit instructions. It may be a simple thing for some to come up with suitable replacements, but I tend to not like that process. I have seen some cross reference charts, but I can't say I have liked them very much.

So what to do? Build something that works the way I want it to work. There are some nifty apps for some devices, but they are either clunky or not free. I am into free, I spend enough on the kits and the paint! I also wanted something that didn't require anything but a web browser.

Enter the color widget thing-a-ma-bob...
http://www.scale-modeller.com/paint/colorWidget.html

This is still VERY much in a prototyping phase so don't expect a fully polished product. It still has some goofy stuff in it. I just wanted some feedback before moving too far down my particular idea of how it should work.

How to use:

1. On the "Source Range" side, select the paint range for the color call outs that you have.
2. On the "Actual Range" side select the paint range for the color range you want to use.
3. Back on the source side select a color from the second drop down of any color in the instructions.
4. Double-Click on the square below the drop down when you find a color you want to use.

How it works (or doesn't work):

I have created color lists for some major paint ranges. This data has either been pulled off of the manufacturer's website or extracted from images that have color samples on them. All of this data gets boiled down to a hexadecimal code for each color. This hex value contains the amount of Red, Blue, and Green contained in each color. A mathematical comparison is then done to select the closest match in whatever range is selected. The system is only looking at mathematical functions, it has no idea about names.

Obviously, there are some limitations. The biggest is the source data. There are not exact reference sets to the hex values for a manufacturer's paint range. I have to use sampling tools or their website data. This data is inherently flawed. I can only hope it is close! Secondly, is everyone's screen is different. The color on different monitors will look differently. This shouldn't affect the selection process, but may cause the color chips on the screen to be different from the actual paint. Lastly, different paint finishes (flat, semi-gloss, and gloss) are not taken into account yet. Metallic colors are also a bit problematic as their sheen and tonal variation cannot be described in a single RGB value.

[digger303]

Sounds cool and I can imagine some of the problems encountered, BUT I am limited in understanding the processes involved.
A better set of color selectors is warranted. So I say more power to you

Edit..
Ok I had a quick try and put in Tamiya buff on the source side and the actual side would only tell me how many unique colors there were even if I used tamiya ...??

[Technophobe]

I can certainly see the usefulness of such a Thing-a-ma-bob, do you intend including enamels as these are my preferred paints?

However, given the large number of paint ranges available, you might want to top up on either beer or headache tablets

[DRUMS01]

I am "white" and have various friends of color (black, yellow, etc.); Since I have not problem with that, does that count?

[Gary30]

Sounds cool and I can imagine some of the problems encountered, BUT I am limited in understanding the processes involved.
A better set of color selectors is warranted. So I say more power to you

Edit..
Ok I had a quick try and put in Tamiya buff on the source side and the actual side would only tell me how many unique colors there were even if I used tamiya ...??

Double click on the square colour on the source side....and it generates the alternative(s) on the RHS under your actual range once selected.

[BobM]

I think you need another way to trigger step 4, like a button. Double clicking doesn’t work on a tablet.

[digger303]

Sounds cool and I can imagine some of the problems encountered, BUT I am limited in understanding the processes involved.
A better set of color selectors is warranted. So I say more power to you

Edit..
Ok I had a quick try and put in Tamiya buff on the source side and the actual side would only tell me how many unique colors there were even if I used tamiya ...??

Double click on the square colour on the source side....and it generates the alternative(s) on the RHS under your actual range once selected.

Ok I did that and it works. I then went on to generate a series of alternates from the different brands in a list format....I like that.

[bfrd]

I think you need another way to trigger step 4, like a button. Double clicking doesn’t work on a tablet.

Yeah, I figured that out last night when I got home. To be honest, I have not really ever done any type of coding specifically for mobile devices. I took a look at it on my phone and tablet and it needs some help. I built the entire app with javascript/jquery, something else I have never done. So it will be a bit of a learning curve for me.

Regardless, the double-click issue has been addressed (I hope). I forgot to bring the tablet with me to work this morning. Now you can just hold the color swatch for 1.5 seconds to select. I guess someone with a table will have to let me know if that worked.

[bfrd]

Ok I did that and it works. I then went on to generate a series of alternates from the different brands in a list format....I like that.

Glad you got that sorted.

[bfrd]

I added some simple inline instructions and support for tablet devices. I think phones will need a bigger re-write due to the overall layout. I added support for paint finishes (gloss, flat, etc.). However, I had to guess at some of the values. I went with flat when I couldn't decide. I haven't tied the searching to the same finish yet, and not sure if I will. I did my best to remove any metallic finishes as they do not translate well. I also added a link to see the entire range of colors when you select the "actual" range.

Check it out and let me know what you think of the changes.

http://www.scale-modeller.com/paint/colorWidget.html

[digger303]

I had a look. Yes that is good although it would be more useful if the colors were grouped not numerically, but by color spectrum.
Could you add life color to the range ?
Also if it could be done...I have no idea. Select the color that the instructions specify then simply double click on the color to through up a range of possible candidates so a person could select the closest match. I would find that immensely useful.
Your doing a great job there and I can see it could become the go to paint matcher.

[bfrd]

I had a look. Yes that is good although it would be more useful if the colors were grouped not numerically, but by color spectrum.
Could you add life color to the range ?
Also if it could be done...I have no idea. Select the color that the instructions specify then simply double click on the color to through up a range of possible candidates so a person could select the closest match. I would find that immensely useful.
Your doing a great job there and I can see it could become the go to paint matcher.

I will see what I can do about adding multiple matches and will look into Life Color. I have been toying with the idea of adding multiple sorting options on the main color selector. I can play around with that as well. Thank you so much for the feedback! It really (really) helps.

[Tomcat64]

Had a quick play over the weekend and worked great - I do like Digger's idea of being able to select a colour and then seeing a range of alternatives.

Great work again on this one!

[MarkB15]

I got the same as Digger303, but i am watching keenly. I also like the idea os select a colour and get the closest matches, Much better than other utilities i have seen that say there is no alternative for a colour, I was trying to get a conversion for green.

[bfrd]

I have put in a request for a Lifecolor reference list. I haven't been able to get a good one online anywhere. All of the color chips they provide have minor variations in them.

I have also been working on returning multiple results. Each result is classified with a "distance" variable that shows how far away it is from the reference on a color chart. I have modified the code to return multiple results, I just don't know how best to show them yet. Still working on that part.

[digger303]

[bfrd]

Ok, multiple return values are live. Not sure how i like the display. Any suggestions are welcomed.

[digger303]

That's a good improvement, but can it show multiple paint ranges. I have 4 paint ranges on my desk so to be able to show that would be a great time saver. I'm happy with the way it displays. It is very much a no nonsense look with no distractions and is easy to use.

[bfrd]

That's a good improvement, but can it show multiple paint ranges. I have 4 paint ranges on my desk so to be able to show that would be a great time saver. I'm happy with the way it displays. It is very much a no nonsense look with no distractions and is easy to use.

Oops! I misread your original request. Showing paint from multiple ranges is slightly problematic, but I think I can figure out a way to make that happen. However, I would want to clarify something. Is your intention that if you add 4 ranges to the search criteria, that you would see the top 4 matches across all ranges, or the top match in each range? I think I will limit the searching to 4 ranges. If it gets any bigger then memory usages and time to process becomes an issue. Limiting the result set to 4 is more of a space issue.

I also want to integrate the distance calculation some how to show the confidence of the match.

I am also working on a completely custom color selection (just a normal color picker do dad) and the ability to mix two colors together. I can do the mixing part, again working on a way to display the data and a workflow to select the two colors. I think the overall workflow is simple and user friendly and I don't want to interrupt that too much.

[AlexBB]

Beta Test Feedback
Just tried for a check on Humbrol 29 Dark Earth convert to Vallejo Model Air.

Reports back 4 colours but not the correct one which is 71.323 Dark Earth ... Not sure why this may be the case..

Results reported back are 71.029, 71.032, 71.129, 71.026 (L-R)

Screen Shot 2018-06-13 at 12.22.48 by Alex Beebee, on Flickr

[bfrd]

Beta Test Feedback
Just tried for a check on Humbrol 29 Dark Earth convert to Vallejo Model Air.

Reports back 4 colours but not the correct one which is 71.323 Dark Earth ... Not sure why this may be the case..

Results reported back are 71.029, 71.032, 71.129, 71.026 (L-R)

Screen Shot 2018-06-13 at 12.22.48 by Alex Beebee, on Flickr

You are correct, 71.323 is a better match. I am looking into why it wasn't picked. Also, looking into why i got a different list for the same match. I got 71.032 71.037 71.129 71.026. Something is definitely amiss. I have been working so much on the workflow and the layout, that I disregarded the quality of the matches.

[bfrd]

Happy Father's Day to all the dads out there!

I have made a fairly large update to the Color Thing...

http://www.scale-modeller.com/paint/colorWidget.html

I am going to need loads of feedback on how to make this part understandable. I am going to try and flub my way through explaining the changes.

1. I completely revamped how the colors are matched using a new Color Space (CIE-LAB). I think the matches are better. Obviously, still constrained by the source data.

2. I added the ability to search against up to 4 paint ranges. So before you just selected an option for "Step 2", now you will select the option and click "Add". I did my best to keep it from being able to add the same range twice. The top 4 matches will be shown, but it is possible that all of the top matches are from the same range.

3. (this is the one that made my brain hurt) Color Mixing!

This is also the one that is the hardest to explain, so bear with me.

To mix two colors together select the first color as normal. It will appear just like it always has, with the appropriate matches to the right. Pick the next color from the main drop-down on the "source" side of the application. However, do NOT click "Add", instead click the "+" icon to the right of the color you want to mix it with.

You should get something like this:
2018-06-17 10_30_27-Color Widget Doo Dad Thing-a-ma-bob_mixer_1 by Matthew Morvant, on Flickr

The two smaller squares on the left represent the two original colors and the larger rectangle on the right is the mix of the two colors.

In this case the text reads "100 mixed 50:50 with 63" For brevity I only use the color id here, for Humbrol those ids are just numbers. I realize that may be a little confusing. If I have to explain the 50:50 part, this tool is not for you. (I may reduce the ratio at some point, but the idea is the same)

The slider on the far left allows you to control the amount of each paint in your mix. The image changes according to how much of each color is used. The matches on the right side change as the mix changes.

Please give it a try and let me know what you think.

[MarkB15]

Like it, Like it, Like it. Now I have worked out how to get results, it was me the first time. Almost an explain the 50:50 moment. Love the idea of the mixing option, means I may be able to by a match rather than the too much, what am i going to use the left over for or too little and never get the same shade again.

As others have said, in awe of the skill.

[digger303]

I think I did as per instructions, yet I can't get past this step



If I click on the add button to the left I get the message view whole range and if I click on the add button from source side I get message must select a paint range to use. doing that I get this



If I click on the plus sign it tells me to choose another color to mix.
I must be doing something wrong, yet I can't see any other options.

Love this new idea though, get the bugs out, expand the options and this program with be the go to default !

[bfrd]

I think I did as per instructions, yet I can't get past this step



If I click on the add button to the left I get the message view whole range and if I click on the add button from source side I get message must select a paint range to use. doing that I get this



If I click on the plus sign it tells me to choose another color to mix.
I must be doing something wrong, yet I can't see any other options.

Love this new idea though, get the bugs out, expand the options and this program with be the go to default !

I had a feeling that this part would be hard to explain. Once you get to the part in your second screenshot you need to select a different color from the “step 2” drop down. Then click on the plus sign. The error message is because the system won’t allow you to mix the same color to itself.

If anyone can help me out on instructions or the workflow I would welcome your input. The steps make sense to me, but I have it on good authority that I am not exactly right in the head.

[digger303]

Nope I'm as dense as ! can't get the hang of it.

[bfrd]

Nope I'm as dense as ! can't get the hang of it.

No I disagree. I wan't this tool to be useful to anyone regardless of computer proficiency. If you can't use it, I didn't design it well enough. Below is a link to a screen cast I made that shows its use. I couldn't annotate it on the screen so I will just describe here what I did.

Scenario: I only use Vallejo colors but I am building an Airfix kit and they list Humbrol colors. (For sake of brevity, I am only choosing two colors)

Color 1: Humbrol 24 (Trainer Yellow)
Color 2: 50:50 mix of Humbrol 186 (Brown) and Humbrol 226 (Interior Green)

First I will select Humbrol from the drop-down on the "Source" side of the application.

Next, I will choose a few Vallejo paint ranges (or Vajello if you are Scott) from the "Actual" side. I select "Vallejo Model Air" and then click "Add". I know this is sucessful because it lists the range underneath the drop down. If I want to see all of the colors in that particular range I can click the "View All" link to the right of the name. I do the same procedure for the other two ranges of paint I want to match against.

Now I will go back to the "Source" side and find the first color. The "Step 3" drop-down contains all of the colors in the "Source" range, which is in this case Humbrol. The sorting is still a little funky, but it should be easy enough to find the color you want. Once I found Humbrol 24 I simple selected it. Once selected the "Step 4" area shows a larger color chip and the paint information. To add it, click the "Add" button. It should then appear below. One the "Source" side it just shows the same information. On the actual side it displays the 4 best matches against all of the paints in the ranges you selected (439 paints in this case). It tells me that my best is Vallejo Model Air Medium Yellow (71.002).

Now I need to enter the mixed color. I will select the first color just like I did with the First example. I find Humbrol 126 in the list and select it; then I add it to my list by clicking "Add". Now I need to select the second color of the mix. I go to the "Step 3" drop-down and find the second color in the mix- Humbrol 226 and select it. This time I don't click "Add", I click the smaller "+" next to the color that I want to mix it with. That creates a square with three different colors in it. The smaller squares are the original colors and the larger rectangle is the mixed colors. If I want I can use the slider on the left to vary the mixing ratio. The "Actual" side will always update to show me the best matches. Vallejo Model Air Ochre (71.081) in my example.

**Use the middle mouse button (wheel button) to click the link so it will open in a new window.
https://knowledge.autodesk.com/communit ... d13b75c12f

I hope that helps!

[digger303]

yes that did help , but it took me a while and I'm still not overly confident with it. The last step has me unsure of myself. It would be easier if it was one button one function and one could quickly run through them clicking boxes instead of having to go back to a previous box and reuse it.
I like the slider ( so simple ) and the text giving you the mix.
cheers

[bfrd]

I added some new paint lines. Model Master Enamels Acrylics and Testor's Enamels. Again, I am not terribly confident of the values, but they should be close enough.

To clarify the intent of this tool, it is to get you (the modeller) close to the right color. It isn't going to be accurate enough to match shades of color close enough for matching decals. That just isn't possible with the variations in color values from the manufacturer. I wish I could make it that close, but I don't think that is possible for a tool like this.

I am still going to be working to make it the best I can. I have been given some tips from another developer that should get my color distance calculations a little closer to the human eye.

yes that did help , but it took me a while and I'm still not overly confident with it. The last step has me unsure of myself. It would be easier if it was one button one function and one could quickly run through them clicking boxes instead of having to go back to a previous box and reuse it.
I like the slider ( so simple ) and the text giving you the mix.
cheers

Digger,

Sorry for the late reply, but my day job has me running on empty lately!

I did originally want to use a checkbox approach, but I couldn't use checkboxes and show the colors in the same drop-down. Perhaps with more work I could cobble something together, but for now I felt that showing the color was more important.

[GMahaffey]

The slider idea is a great one where you could change the ratio of the paints. For mixing two colors, One slider for the first paint and another slider for the second paint. If a mix calls for 3:1 then on the first slider move to three and the second at one.

[bfrd]

I added Mission Models Paint to the Color tool.

[bfrd]

I added Tamiya Lacquer (LP Line) to the color utility.

[Twokidsnosleep]

Thanks for all these Matthew

[digger303]

Great work and thanks for you invaluable contribution to keeping this site current.

[bfrd]

Great work and thanks for you invaluable contribution to keeping this site current.

Thanks digger! Luckily, I am much better at writing software than I am at making models!