Colors: What Determines Colors I Code vs. Colors I Get?

[Eunomiac 6]

I've been experimenting with color in OpenComputers, and I have a few questions relating to how the color values I code are changed into the color values I actually get.

 

I'm trying to create six color schemes (three colors each) to distinguish six modes of a GUI.  After planning a few schemes and programming in the color hex codes, I've found (using gpu.get()) that the colors I enter are very rarely the ones displayed on screen.  Almost all colors are changed to some degree, and quite often (45% of the time in my last test, see spoiler tags) two different colors display as the same color.

 

I realize this has everything to do with Color Depth, of course.  So I'm interested in learning how OC color depth works, and how I can choose colors that will render accurately on-screen:

• Is OC's "8-bit Color Depth" equivalent to "3 bits Red, 3 bits Green, 2 bits Blue" 256-color, as described in this Wikipedia article? 
  • If so, is there a color table anywhere that lists the available colors? (I've been unable to find one).
• Does the color table vary depending on the colors I've already used?  In other words, is it possible that two colors may be valid when used in isolated programs by themselves, but trying to display them together merges them into one color?
• Is there a way to configure Photoshop (or any other color app) to work with OC's color table?  I'm familiar with Indexed Color mode, which gives you a 256-color palette, but none of the "fixed" options (Websafe, Windows System, Mac System, Spectrum, etc.) seem to fit the colors OC is giving me.  I'd love some way to plan colors that will translate properly to OC.

Lastly, here's an example of a palette test program I ran that shows what I mean.  It takes an array of different colors defined by hex code, and draws a square of each on the screen.  Then, it checks each square with gpu.get() and identifies any repeating displayed colors with red frowny faces (as, ideally, all of the colors would be different):

 

E.g. 1: The first red frowny-face is flagging the second square for repeating the first square.  Those squares were set to 0xFFF5EE and 0xFAF0E6, respectively, but both displayed as 0xF0F0F0. 

E.g. 2: The second red frowny-face flags a repeat two squares earlier---the result of 0xFFE4C4 and 0xFFDAB9 both displaying as 0xFFDBBF.  

(I realize these are very close colors, and it's entirely expected that they'd render the same at 8-bit color depth---the point of this test was more to figure out why both colors were altered, and what determines which colors change, and how.)

 

Thanks in advance for your help!

[Eunomiac 6]

Thanks, that fits with the results I get with my testing!  Here's a color table reference that I kinda... over-did (as is my way); it's indexed and includes the 240 main colors plus the 16 greys.  Definitely a good resource for anyone who wants to plan color schemes in an image editor before coding them in (feel free to add it to the wiki or wherever, if you like; I happily cede it to you in delayed payment for adding remote component access to the debug card):

 

 

Does that mean that palette changes are retrocative? e. g. if you write text in palette color 1 and later reassign that palette slot, will the previously displayed text change color? I never understood that part of the color palette mechanics.

 

Yes, if you change the color palette, anything you've drawn in that color will change to the new color.  (It's actually a pretty useful feature; you can create a bunch of 16-color "themes" and switch between them with a single setPalette, changing the colors of everything on-screen.)

[Sangar 92]

1. No, it used to be that, a long, long time ago. Now it uses a 6-8-5 palette. This means 240 "hardcoded" colors and 16 "palette" colors (which default to greyscale, but can be changed, just like the tier two palette).

 

2. No. The colors are what they are. The only values that can change are the ones in the palette, and they only will when you explicitly change them yourself.

 

3. When changing to indexed color mode you can define a custom color table. If you have to do this manually that'll be a pain, however there's an option to load/save tables, so maybe somewhere on the internet someone already did this...

 

 

 

PS: Neat test program

[dgelessus 26]

2. No. The colors are what they are. The only values that can change are the ones in the palette, and they only will when you explicitly change them yourself.

Does that mean that palette changes are retrocative? e. g. if you write text in palette color 1 and later reassign that palette slot, will the previously displayed text change color? I never understood that part of the color palette mechanics.

[dgelessus 26]

Nice, that reference image will probably come in handy at some point. I like what you did there with the heading sizes/layout, looks really fancy yet so simple.

Would those palette changes actually be useful for anything? Color themes are a nice idea, but that's basically it. Most other things that I was thinking of, e. g. highlighting the currently selected text field in a GUI, would require assigning "objects" to the palette slots, and there could only be 16 of them.

[Eunomiac 6]

Nice, that reference image will probably come in handy at some point. I like what you did there with the heading sizes/layout, looks really fancy yet so simple.

Would those palette changes actually be useful for anything? Color themes are a nice idea, but that's basically it. Most other things that I was thinking of, e. g. highlighting the currently selected text field in a GUI, would require assigning "objects" to the palette slots, and there could only be 16 of them.

 

Yeah, I wouldn't use palette swaps for that. I'd recommend a few "nuts & bolts" functions to make working with colours easier, and have your GUI objects call those to change their colours. E.g. I made my own versions of gpu.set and gpu.fill, which use my setColor() function, which uses a custom palette that references colors by name:

 

local palette = {
    Black = 0x000000,
    Grey1 = 0x2D2D2D,
    Grey2 = 0x4B4B4B,
    Grey3 = 0x696969,
    Grey4 = 0x878787,
    Grey5 = 0xA5A5A5,
    White = 0xFFFFFF,
      -- ... and so on, all the colours of the rainbow, till...
    LtPurple = 0xCC92FF
}

function setColour(bg, fg)
  if not (fg or bg) then
    bg = "Black"; fg = "White"
  end
  if bg then
    bg = assert(palette[bg], "Bad BG colour '" .. tostring(bg) .. "' in setColour().")
    component.gpu.setBackground(bg)
  end
  if fg then
    fg = assert(palette[fg], "Bad FG colour '" .. tostring(fg) .. "' in setColour().")
    component.gpu.setForeground(fg)
  end
end

gpuFill(" ", 1, 1, 24, 3, "DkPurple") 
gpuSet("Gold text, purple box.", 2, 2, "DkPurple", "Gold")