AuthorTopic: Color Palette Visualization  (Read 9877 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 »