Color Quiz: a web app to hone your color sense

And brushes! Sharing is caring <3

Color Quiz: a web app to hone your color sense

Postby Erik » Sat Jan 09, 2016 6:50 pm

Hey everybody, Erik here, keeper of the humble sketchbook you'll find in my signature. If you were to check out my sketchbook, you'd find a lot of black and white: I find color intimidating. As I've tried to learn it, I've had to wean myself off of that Crayola sense of color we all got in grade school.

To speed up that process, I've made a web app called Color Quiz. It's a trainer that will hopefully free us from the eyedropper tool, by teaching us to see past the illusions of color.

It works like this: it shows you an image with a few circles on it. You then try to match the colors, and it tells you how you did.

Screenshot 2016-01-09 19.39.58.png
Screenshot 2016-01-09 19.39.58.png (425.03 KiB) Viewed 2637 times

Right now I've just got the core functionality working, and to go forward with development I could use your help. I'd like to establish a baseline for artists of various experience, so if you create an account and let me know how long you've been practicing, then we can do something really cool: empirically define the artist's eye at every stage of development. Do rookies overrate the brightness of reds and blues? Do intermediate painters underrate the value of distance objects?

Once this thing's fully operational it'll be able to tailor advice specific to your skill level. In my own testing, I haven't noticed any improvements yet, but I *have* noticed that I miss in consistent ways. An artist that knows that can then correct for it. And I'm optimistic that the rapid-fire value guessing game will actually train your perceptual abilities (this type of game is how they teach pilots to read their instrument panels).

Thanks very much for checking it out, and let me know if you have any questions or ideas for the app.
Erik
Level 2: Steller Sea Lion
 
Posts: 44
Joined: Sun Feb 08, 2015 9:28 am

Re: Color Quiz: a web app to hone your color sense

Postby ubem » Sun Jan 10, 2016 9:47 am

Hello Erik,
Thank you for sharing your trainer, I think it's a brilliant tool to train for values and color! I think you're on to something. I would really love to see artists using this and learning from it. Perhaps you can even get support with a donations button or a paid membership down the road.


I've completed part A of the color test, and maybe a dozen or so of the value scales.
Here's some feedback with my limited experience so far, I hope this can help to make an even better app:

I think the biggest thing that would benefit from the color test would be an explanation/examination on where artists made mistakes. For example:
Explanation of the scores (I got from scores from 5-14 which I couldn't know if it were good or bad)
A hue cube/color picker showing the differences in saturation and value between the guess and the actual color
Saving progress, seeing if there's improvement or not
Sorting images by difficulty, in my experience the more saturated and contrasting the image is, the more difficult it is to identify
More precision in the numbered circle, there were a couple of times where there was another different tone in the circle


For the value portion:

Most digital artists tend to use the RGB mode, which acts more like traditional paint, the thing that threw me off a few times was the use of LAB color to value scale, here's where I color picked an exmaple:
Screenshot (8).jpg
Screenshot (8).jpg (417.53 KiB) Viewed 2630 times


I would've rated it much higher than 19 using my hue cube, so I picked closer to 50. Perhaps having the option to pick in terms of RGB mode would be much more useful and understandable.

Other things I think could benefit are:
More pure black and white images, at least to begin with. then the option to move on from there to more and more difficult/saturated images
Saving progress, seeing past results
Lining the guess and actual values side to side, allowing a better view of the difference

The last thing to consider is that values (and colors) are very interdependent and rely heavily on each other. It's not so much as the actual color/value itself, but the relationship between tones, hues, saturation, and temperatures that make a beautiful and believable image. Which I think you nailed it on the head with the colors portion, making you pick from a variety of sources in the image, perhaps you could implement that with picking just values as well?


I hope this sheds some light on a student's point of view, I'm still a beginner myself with only a couple years of serious practice. And hope to practice more with the app, so far it's very fun and addicting! Thanks once again for sharing your app!
ubem
Level 7: Leopard Seal
 
Posts: 220
Joined: Thu Sep 25, 2014 9:33 am
Location: Chicago

Re: Color Quiz: a web app to hone your color sense

Postby Erik » Mon Jan 11, 2016 8:52 pm

I was a little anxious about putting up a half-finished app, but now I'm glad I did -- thanks for your feedback, ubem. It's a big help, and a lot of that stuff is going right onto the to-do list. Wanted to ask you some follow up questions.

I think the biggest thing that would benefit from the color test would be an explanation/examination on where artists made mistakes. For example:
Explanation of the scores (I got from scores from 5-14 which I couldn't know if it were good or bad)

So the scores are based on an equation called CIEDE2000. In that formula, a score below 2.3 is consider a match -- 2.3 is the "just noticeable difference" threshold. Now in practice, you may be able to notice a difference between two blues when you've scored like a 0.9, and that's because the equation can't fully account for our various sensitivities across the spectrum. 14 is on the higher side; I score 14s when I badly overestimate the brightness of a white in darkness, as in spot 4 on Image C of the Color Quiz.

A hue cube/color picker showing the differences in saturation and value between the guess and the actual color

Something like this?
huecube-mockup.jpg
huecube-mockup.jpg (116.63 KiB) Viewed 2612 times

Saving progress, seeing if there's improvement or not

That'll definitely be part of the full release.

Sorting images by difficulty, in my experience the more saturated and contrasting the image is, the more difficult it is to identify

This will also be there. It's one of the things I'm most excited to find out. For me, I do the worst in the dimmer images. We'll see how that works for everyone else!

More precision in the numbered circle, there were a couple of times where there was another different tone in the circle

I was unsure about this; it's surprisingly tough to find consistent and large patches of color in an image, particularly in the colors that will be most important to the image. I think I'm going to continue having spots that are somewhat inconsistent, but I'll see how much the adulterating colors throw off the average color of that spot. Do you remember any of the spots that seemed unfair to you?

Most digital artists tend to use the RGB mode, which acts more like traditional paint, the thing that threw me off a few times was the use of LAB color to value scale, here's where I color picked an exmaple.

I would've rated it much higher than 19 using my hue cube, so I picked closer to 50. Perhaps having the option to pick in terms of RGB mode would be much more useful and understandable.

The LAB thing is tricky, because it's the color system that does the best job of mimicking human perception. I know that people are comfortable in RGB and HSB/V, but none of those actually match what your eyes are seeing. For instance, when you pick a 50 value for that red on George Washington, that means you were going half of the max brightness of a fully saturated red. But in terms of actual value, a fully saturated red is about a 54. So in essence you weren't that far off, since half of 54 is 27, and that's pretty close to 19.

Image

I think it's important that artists know about this distinction, because I know it surprised the hell out of me to realize that the brightness in my HSB didn't actually correspond with real grayscale values. If you want to work from grayscale to color, you have to understand that you cannot generate a deep crimson from a 60% gray.

More pure black and white images, at least to begin with [...] Lining the guess and actual values side to side, allowing a better view of the difference[

No brainer, I'll definitely implement both of those.

The last thing to consider is that values (and colors) are very interdependent and rely heavily on each other. It's not so much as the actual color/value itself, but the relationship between tones, hues, saturation, and temperatures that make a beautiful and believable image. Which I think you nailed it on the head with the colors portion, making you pick from a variety of sources in the image, perhaps you could implement that with picking just values as well?


This raises an interesting point. The reason I put the beta out is because I've been testing myself, and noticed something: I haven't been improving with the color picking quiz. Here's what I think is happening: the 50% gray background throws players off. Instead of imagining the color and picking it, people are comparing the colors. As you well know, the appearance of a color depends so much on its surroundings, and so this color matching is leading people to make the same mistakes again and again -- at least I think that's what's happening in my case. So while I think the color quiz looks and feels better to play, when it comes to actually improving color sense, I think the format of the value quiz is the way to go.

I don't want to bore you with the research I've been doing, but it seems that the best bet here will be to make this into a largely unconscious training process. We make the artist play fast, and make snap judgements on a limited pool of colors. Theoretically, with time, our eyes will begin to develop an intuitive sense of what colors should be what; and then, hopefully, it'll transfer back to real painting.

But to find out if any of this makes sense, we'll have to get some testers who are willing to play the game over a larger timespan. I will say that if you want to take a crack at some more images, they're available here.

Thanks again for your help in this project, it means a lot to me.
Erik
Level 2: Steller Sea Lion
 
Posts: 44
Joined: Sun Feb 08, 2015 9:28 am

Re: Color Quiz: a web app to hone your color sense

Postby ubem » Tue Jan 12, 2016 5:22 am

Erik,
Thanks for your concise reply! I'm sure we're more than happy to help out with this app.


a score below 2.3 is consider a match

Thank you for explaining it in depth, aiming for a 2.3 gives me a better understanding of how well I should do.

--

Those Hue Cubes look perfect!

For instance, when you pick a 50 value for that red on George Washington, that means you were going half of the max brightness of a fully saturated red. But in terms of actual value, a fully saturated red is about a 54. So in essence you weren't that far off, since half of 54 is 27, and that's pretty close to 19.

I'm ignorant about the LAB and RGB conversion from saturated colors to values, so thank you for clearing that up. I have forgotten hues at maximum saturation have their own set of inherent values.

The reason I put the beta out is because I've been testing myself, and noticed something: I haven't been improving with the color picking quiz... As you well know, the appearance of a color depends so much on its surroundings, and so this color matching is leading people to make the same mistakes again and again

I don't think we can be certain people will make the same mistakes over and over. I feel that the color picking quiz has a lot of potential in terms of improving people's color sense, especially when something like a hue cube (from your mockup) showing how much your hue, saturation, and values were off. Improvement happens with good and accurate feedback and then making corrections accordingly in my experience.

So while I think the color quiz looks and feels better to play, when it comes to actually improving color sense, I think the format of the value quiz is the way to go.

Though I do like the easiness of the value quiz, where it's intuitive to use and not as overwhelming in choices as the color quiz; I feel like the color quiz would be a better fit for improving color sense. Whereas the value quiz would be better suited for improving just value sense.Though the values quiz make me a little dizzy trying to translate both saturation and natural hue into a values.

--

I'm looking forward to practicing more, especially with the color picker! Please keep up the awesome work, and thanks again for sharing!
ubem
Level 7: Leopard Seal
 
Posts: 220
Joined: Thu Sep 25, 2014 9:33 am
Location: Chicago

Re: Color Quiz: a web app to hone your color sense

Postby Erik » Fri Jan 22, 2016 7:28 pm

Just wanted to drop a line and say that I've got a new version of the beta up on the web. There's a ten minute quiz up there if you want to give it a shot. Right now I'm doing testing with friends and family, but it's also important to me to get some people who are active artists, so if you do check it out, consider sending it to some of your artist friends? Thanks again.
Erik
Level 2: Steller Sea Lion
 
Posts: 44
Joined: Sun Feb 08, 2015 9:28 am

Re: Color Quiz: a web app to hone your color sense

Postby ErnieTheMighty » Wed Feb 24, 2016 2:43 am

Erik wrote:Just wanted to drop a line and say that I've got a new version of the beta up on the web. There's a ten minute quiz up there if you want to give it a shot. Right now I'm doing testing with friends and family, but it's also important to me to get some people who are active artists, so if you do check it out, consider sending it to some of your artist friends? Thanks again.


Hey, Erik! Is this still alive? I can only work with the first image and I don't see any other quizzes. How do I progress? :D

Edit: Do I need to get a great score to move on forward? :D
Sketchbook | DeviantART | Tumblr | Facebook | Skype - cyklopas261 | Yeeeeeah!
User avatar
ErnieTheMighty
Level 9: Spotted Seal
 
Posts: 426
Joined: Mon May 12, 2014 9:59 am
Location: Lithuania

Re: Color Quiz: a web app to hone your color sense

Postby Erik » Fri Mar 25, 2016 5:50 pm

Hey there Ernie!

It is still alive, and no, the app is not punishing you for poor performance :D

You're now the second person who has reported getting stuck on the first image, a bug that doesn't occur on my machine. I'll look at some logs, see if that can tell me anything.

Did you fill out every guess before you hit "Save Changes"? If you don't, the form won't submit.
Erik
Level 2: Steller Sea Lion
 
Posts: 44
Joined: Sun Feb 08, 2015 9:28 am


Re: Color Quiz: a web app to hone your color sense

Postby Erik » Mon May 30, 2016 1:57 pm

Hi! I'm sorry you guys are getting errors, my host only keeps a small amount of these logs and so your particular errors vanished into the aether before I got a look at them. I'm switching to a new host soon, so we can get that tracked down once I do.

But here's the more pressing issue! This is a chart showing my how off I am on the tonal value of my guesses. This is about 650 guesses worth of data:

delete.jpg
delete.jpg (27.47 KiB) Viewed 1957 times


So as you can see, I haven't been getting any better. I think I'm just getting ahead of myself. This sort of game seems like a fair evaluation tool, but apparently you can't really learn from it. So I want to take it back to absolute basics.

Screenshot 2016-05-30 15.32.51.png
Screenshot 2016-05-30 15.32.51.png (44.86 KiB) Viewed 1957 times


That's the prototype for the new trainer. It's real simple: it shows you a spot of gray and you try to guess its value. I was inspired by a guy who taught himself perfect pitch. His strategy was to weight the output of his computer, so that it played him C's more frequently than others -- so he could use that middle C as an anchor to judge the others. I'm trying the same with a 50% gray. I'll be honest, even this seems tough to me! It's really easy to mix up 40-50-60-70, and 90/100 are also tricky on a pure black background. Anyway, here's my plan:

    Value
    * Patch on black
    * Patch on 50 grey
    * Patch on white
    * Patch on random background (explicit percentage)
    * Patch on random background
    * Vary size of patch

    Value to color
    * Sort colors bright to dark
    * Given a color, select its value

I'll update here once I've got that working and on the new host.
Erik
Level 2: Steller Sea Lion
 
Posts: 44
Joined: Sun Feb 08, 2015 9:28 am


Return to Tutorials and Resources

Who is online

Users browsing this forum: No registered users and 1 guest

cron