AuthorTopic: Color Palette Visualization  (Read 9803 times)

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Color Palette Visualization

on: September 06, 2010, 04:16:43 pm
I recently read through the featured "Generic 16 color palette" topic by Arne.  It was the first structured approach to palette construction and color selection that I've read and it was a worthwhile read.  In that thread Rosse posted an image of the palette and some gradients.  It was a very useful visual aid for me.

I took the idea of Rosse's image and made a mockup for a little program to visualize a palette.  Is this already handled elsewhere, say by pixel-optimized image editors?  Is it useful to be able to visualize a palette like this?

The idea is that the color boxes along the top of the image are widgets where you select the colors in the palette.  The boxes along the left correspond to those same color selections.  The dither box in the far upper left would let you change the pattern applied to the color grid.  Is there a list of common dither patterns available?

This mockup has Arne's v20 palette selected.

« Last Edit: September 06, 2010, 04:23:03 pm by brainsick »

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #1 on: September 06, 2010, 05:53:24 pm
A couple color ramps represented in the same interface:





Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #2 on: September 06, 2010, 07:00:13 pm
Helm had color ramps represented in another style, something more akin to this:



First inclusion of alternative dithering styles.

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Color Palette Visualization

Reply #3 on: September 07, 2010, 05:17:34 am
I don't see the validity of this work. What is it's merit? As a pixel artist, I first of all avoid dithering 90% of the time, and secondly don't need tools like this to understand my palette, nor do I or most others create large areas of 50% dither. The need is very specific and uncommon. I automatically know how to dither colors in my palettes to get desired gradation because my palettes are always organized by luminosity.

Plus, this sort of research has already been widely discussed on this site.

But I see you have an interest in pixel art. Perhaps your efforts could be redirected more productively? Do you aspire to actually create pixel art, or are you mainly into color theory applied to pixel artwork?
« Last Edit: September 07, 2010, 01:11:57 pm by Mathias »

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: Color Palette Visualization

Reply #4 on: September 07, 2010, 06:53:06 am
I think this is an interesting way to measure dithering performance. Knowing what colors dither together to produce what apparent color is indeed something that you develop a sense for..
I believe your idea, brainsick, is appropriate specifically for assessing palettes to see whether there are colors that you wish to represent but appear too ugly
when represented as dithering.

As for common dither matrices: For a program such as described, a single, thresholded 4x4 Bayer matrix would be adequate.
Code: [Select]
    16   8  13   5  
      4  12   1   9  
     14   6  15   7  
      2  10   3  11
(which would provide 15 levels of mixing, which are plenty. a 2x2 matrix (3 mixing levels) might even be sufficient))

I have a truckload of dither patterns from my own research. I doubt there will ever be any 'official' ones, though -- it just doesn't really merit standardization.
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #5 on: September 07, 2010, 12:04:57 pm
I don't see the validity of this work. What is it's merit?

That was a major part of my question.  Is this useful?  I guess not; during the creation process anyway.  Not sure if there's more merit in analyzing completed pieces, but I don't have a particular goal in mind there, so I'll just table this for now.

I saw Rosse's dither grid and in the context of the palette discussion, it was kind of a diamond in the rough for me.  A picture is worth a 1,000 words and it brought a lot of the discussion into a kind of focus for me.

But I see you have an interest in pixel art. Perhaps your efforts could be redirected more productively? Do you aspire to actual create pixel art, or you mainly into color theory applied to pixel artwork?

I am interested in pixel art.  I have no artistic background or education though.  I'm mostly just lurking and picking up what I can.  I thought I had gained some insight into palette creation and color selection so I was trying to "practice" or codify it in my mind by producing the images and posting this topic.  Back to the drawing board.

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #6 on: September 07, 2010, 12:19:10 pm
I think this is an interesting way to measure dithering performance. Knowing what colors dither together to produce what apparent color is indeed something that you develop a sense for..
I believe your idea, brainsick, is appropriate specifically for assessing palettes to see whether there are colors that you wish to represent but appear too ugly
when represented as dithering.

My idea wasn't even that refined.  I saw the dither grid and wanted to explore the concept more.  If anything, I was trying to visualize the "implied" colors of any palette; the ones you get by mixing the "real" colors of the palette.  I was also curious in what others saw; what are the various applications of the dither grid?

As for common dither matrices: For a program such as described, a single, thresholded 4x4 Bayer matrix would be adequate.
Code: [Select]
    16   8  13   5  
      4  12   1   9  
     14   6  15   7  
      2  10   3  11
(which would provide 15 levels of mixing, which are plenty. a 2x2 matrix (3 mixing levels) might even be sufficient))

I have a truckload of dither patterns from my own research. I doubt there will ever be any 'official' ones, though -- it just doesn't really merit standardization.

I don't know that I'm going to pursue this any further right now, but thanks for the information.

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Color Palette Visualization

Reply #7 on: September 09, 2010, 04:40:56 am
Oh so you're a programmer? Do you practice any art at all? Perhaps you could start if not. I'll give you a hint though - don't start with pixel art. That would be like a toddler learning to walk with platform shoes on.

Offline McClaneGames

  • 0001
  • *
  • Posts: 93
  • Karma: +0/-0
  • Evan M
    • View Profile
    • NinetySix, Co.

Re: Color Palette Visualization

Reply #8 on: September 10, 2010, 12:44:59 am
I agree with Mathias.  My very wise art teacher once told me that a traditional art background is imperative for digital art.  And boy was he right!

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #9 on: September 10, 2010, 12:47:26 pm
Oh so you're a programmer? Do you practice any art at all? Perhaps you could start if not. I'll give you a hint though - don't start with pixel art. That would be like a toddler learning to walk with platform shoes on.

Yeah; I come from a programming background.

I initially thought that starting with pixels made a lot of sense.  I'm already comfortable on computers.  I understand that a pixel is a "square" dot (CRT, LCD aside) and I mostly understand how RGB mix to make other colors.  I've been lurking on the forums for a couple weeks now and I've read about pixel clusters and how AA is part of the cluster, etc.  I've looked at a lot of examples of pixel art.  The small canvas size of pixel art and the restricted palettes were attractive because I thought it meant I had less to learn and could thus be "productive" quicker.

With programming, I have an assurance that every line of code I write is "correct".  I don't mean that it's bug free, but as soon as it compiles, I know that the syntax is valid and that it mixes with the rest of the code base.  In a sense, the rules that are enforced by the compiler guide me to my solution.

Art, as a process, seems a lot "messier".  It really seems to be a process of refinement.  Rough shapes, outlines, colors coalesce into forms with light and shadows over a process that might span hundreds of edits.

Believe it or not, that was not apparent to me until I saw how some of the pieces here were done.  The WIP animations are invaluable.  I'm really, REALLY, interested in "The Recorded Pixel Art Project" but the use of the TechSmith codec turns me away.

I'm sure there is probably a set of rules/procedures/best practices that people employ, but without having something to enforce them, they aren't easily discoverable.  They either need to be taught or learned through extensive trial and error.  The journey begins.

Thank you for the advice.
« Last Edit: September 10, 2010, 12:52:21 pm by brainsick »

Offline Helm

  • Moderator
  • 0110
  • *
  • Posts: 5159
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: Color Palette Visualization

Reply #10 on: September 10, 2010, 01:53:45 pm
Quote
Believe it or not, that was not apparent to me until I saw how some of the pieces here were done.  The WIP animations are invaluable.  I'm really, REALLY, interested in "The Recorded Pixel Art Project" but the use of the TechSmith codec turns me away.

Why is that? At the time we couldn't find any better codec for pixel videos. If you've got a better setup to suggest we could use it and put stuff on youtube hopefully.

Offline ptoing

  • 0101
  • ****
  • Posts: 3063
  • Karma: +0/-0
  • variegated quadrangle arranger
    • the_ptoing
    • http://pixeljoint.com/p/2191.htm
    • View Profile
    • Perpetually inactive website

Re: Color Palette Visualization

Reply #11 on: September 10, 2010, 02:15:13 pm
You can compress videos for youtube with camtasia as well. That's how I did my DDP video.
There are no ugly colours, only ugly combinations of colours.

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: Color Palette Visualization

Reply #12 on: September 10, 2010, 08:02:58 pm
Haha! You are such a programmer type, I knew it! No offense at all there believe me, but I adore the mental differences in coder types as opposed to more creative types (coding is certainly a creative exercise, but just in a different . . . spikier . . . more painful way) it's interesting.

You're right, most artforms don't have a fraction of the structure programming does.


Hey guys, that youtube thought is a good one. I know someone suggested it a while back. There's been Indigo's concept of a front page and whatnot. Well here's another bridge-pixel-art-with-the-21st-century thought - A Pixelation YouTube channel! Don't laugh. I think it would be great. We could feature video WIP's. We already have a cache of them here. There would be a Pixelation themed skin, or just background for the page, all official like. What else could we toss up and what might a Pixelation channel actually accomplish? What's the goal there? For one thing, viewing the videos would be so much easier, and even easier for people to find. Would it cause a surge in Pixelation traffic and memberships? Would PixelJoint be involved?
There would need to be a link in the videos archive thread OP. Perhaps even a link here in the default Pix interface, like the newsboxes.

Offline blumunkee

  • 0010
  • *
  • Posts: 325
  • Karma: +1/-0
    • View Profile

Re: Color Palette Visualization

Reply #13 on: September 10, 2010, 10:46:09 pm
A Youtube channel would be nice, but the videos would have to be lossless, or perceptually lossless.

H264 can do pixel perfect video, but not all players/browsers support it. (The standard has lots of sub-profiles, not all of which have to be implemented.)

I'm not sure if Google's VP8 can do lossless or not.

Offline Helm

  • Moderator
  • 0110
  • *
  • Posts: 5159
  • Karma: +0/-0
    • View Profile
    • Asides-Bsides

Re: Color Palette Visualization

Reply #14 on: September 11, 2010, 07:31:59 am
I'm sure the hi quality options for youtube will be enough for us. The thing is, I don't want to be in charge of a youtube channel, heh, so some other moderator should step up. I'd certainly contribute new videos, since it seems I'm the one making more.

Offline brainsick

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile

Re: Color Palette Visualization

Reply #15 on: September 14, 2010, 07:06:53 pm
Why is that? At the time we couldn't find any better codec for pixel videos. If you've got a better setup to suggest we could use it and put stuff on youtube hopefully.

YouTube would be awesome.  Especially if you took advantage of embedding videos.  It makes the content so much more accessible.

I may not understand the challenges involved.  Wouldn't any codec that supports 1080p be suitable?  DivX and H.264 come to mind.  WebM is Google backed although I don't know if YouTube supports it yet.

Just set your desktop to 1920x1080 or clip your existing desktop to avoid scaling, no?

I suppose it all comes down to a matter of convenience.  TechSmith is supported on Windows and Mac.  I run Ubuntu Linux.  I've seen someone (AI?) post alternative instructions for Linux, but it requires me to use an alternative media player.

This probably just amounts to me whining (I'm not old, but I am curmudgeonly), but I'd opt for larger file sizes and a longer wait for buffering versus an alternative codec that isn't as ubiquitous and well supported as other codecs.

Offline blumunkee

  • 0010
  • *
  • Posts: 325
  • Karma: +1/-0
    • View Profile

Re: Color Palette Visualization

Reply #16 on: September 14, 2010, 11:41:19 pm
I may not understand the challenges involved.  Wouldn't any codec that supports 1080p be suitable?  DivX and H.264 come to mind.  WebM is Google backed although I don't know if YouTube supports it yet.

It's unfortunate you can't view the videos and see how nice the Techsmith encoder looks. It's perceptually lossless, so there's absolutely no JPEGification of the video. H264 can do the same, but that's completely independent of video resolution.

Just set your desktop to 1920x1080 or clip your existing desktop to avoid scaling, no?

For the existing videos, we set our workspace to as small as is comfortable to keep the file size down, but yeah, if we go to Youtube, it's not a problem. The only problem is that I, and I'm sure a lot of others, couldn't record at 1080p if I wanted to; my monitor's not big enough.

This probably just amounts to me whining (I'm not old, but I am curmudgeonly), but I'd opt for larger file sizes and a longer wait for buffering versus an alternative codec that isn't as ubiquitous and well supported as other codecs.

No, that would be the most convienient for viewers. It might take more work for the people actually recording videos. Anri-chan might be a good start. Also, we're really just talking about screencasting here. I'm sure there's plenty of shrink-wrapped software out there to make things easier.