How do I visualize a RRRGGGBB color palette? - Page 1
Forum section: electronics / general

author: MarkS
author_rank: Unknown
timestamp: February 06, 2025, 05:44:43 pm
content: I'm working on a VGA circuit that will be in the format of RRRGGGBB. I'd like to write some code to visualize the palette, but I'm not getting the results I want. I googled and found this site:https://www.bigmessowires.com/2008/07/04/video-palette-setup/The first two palettes shown are what I'm looking to achieve; either would work. Now, I could just leave it there, since I can see the result from the site, but now I want to figure out why I cannot get the same results in my code. It would seem that simply stringing bits together doesn't result in a palette. I'm not sure how to achieve this. I'd like to have this code working so I can visualize palettes with different bits per component. The attached image is the result I'm getting. I do understand that the final result in hardware will depend on the DACs used, and thus the generated palette in hardware may not match the one I generate in software.The relevant code:***WARNING!! INCOMING WINDOWS GDI CRAP!***Code:int x,y;x = 0;y = 0;for (int color = 0; color < 256; color++){int red = (color >> 5) & 0x07;int green = color & 0x07;int blue = (color >> 3) & 0x03;std::cout << std::bitset<8>(red) << " " << std::bitset<8>(green) << " " << std::bitset<8>(blue) << std::endl;RECT rect = {x, y, x + 32, y + 32};HBRUSH brush = CreateSolidBrush(RGB(0xff >> red, 0xff >> green, 0xff >> blue));FillRect(hDC, &rect, brush);x += 32;if(x >= 512){x = 0;y += 32;}}

author: MarkF
author_rank: Super Contributor
timestamp: February 06, 2025, 06:07:06 pm
content: It looks like you're inverting the values instead of scaling them up to a 0 to 255 range.It seems to me...instead of this:HBRUSH brush = CreateSolidBrush( RGB(0xff >> red, 0xff >> green, 0xff >> blue) );you want this:HBRUSH brush = CreateSolidBrush( RGB(red << 5, green << 5, blue << 6) );

author: MarkS
author_rank: Unknown
timestamp: February 06, 2025, 06:10:25 pm
content: Quote from: MarkF on February 06, 2025, 06:07:06 pmThat did it! Thank you!Actually, no. Something is still not quite right. I cannot get pure white with this method.Fixed. Needed to map the r, g and b values to 0..255.

author: radiolistener
author_rank: Super Contributor
timestamp: February 18, 2025, 05:55:37 pm
content: here is nice color picker palette for 8-bit 332 color:Code:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>8-bit palette RRRGGBB</title><style>body { font-family: Arial, sans-serif; text-align: center; }/* Grid layout for the palette */.palette {display: grid;grid-template-columns: repeat(16, 24px);gap: 0px;margin: 20px auto;width: max-content;}/* Color box style with a thin 1px border */.color-box {width: 24px;height: 24px;cursor: pointer;outline: 1px solid #888; /* Thin border without affecting layout */outline-offset: -0.5px; /* Moves outline inside, preventing double thickness */box-sizing: border-box;margin: 0;}.selected-color { margin-top: 20px; font-size: 20px; }.missing-values { margin-top: 10px; font-size: 16px; white-space: pre-wrap; }</style></head><body><h2>8-bit RRRGGGBB Color Palette</h2><div class="palette" id="palette"></div><div class="selected-color" id="selectedColor">Selected Color: None</div><div class="missing-values" id="missingValues"></div><script>// Prepare colormapconst array = [];for (let i = 0; i < 256; i ) {let col = i & 15;let row = i >> 4;if (col < 8) col ^= 7;if (row >= 8) row ^= 7;if (row >= 8) {col = 16;row -= 8;}const index = row*32 col;const ir = Math.floor((index >> 5) & 7);const ig = Math.floor((index >> 0) & 7);const ib = Math.floor((index >> 3) & 3);const rgb332 = (ir << 5) | (ig << 2) | ib;array.push(rgb332);}const palette = document.getElementById('palette');const usedIndex = new Set();for (let i = 0; i < 256; i ) {const div = document.createElement('div');div.className = 'color-box';palette.appendChild(div);const rgb332 = array;const r = (rgb332 >> 5) & 7;const g = (rgb332 >> 2) & 7;const b = (rgb332 >> 0) & 3;const rgb888 = (Math.floor(255 * r / 7) << 16) | (Math.floor(255 * g / 7) << 8) | Math.floor(255 * b / 3);const hexColor332 = `#${rgb332.toString(16).padStart(2, '0')}`;const hexColor888 = `#${rgb888.toString(16).padStart(6, '0')}`;if (usedIndex.has(rgb332)) continue;div.style.backgroundColor = hexColor888;div.title = `rgb332(${r},${g},${b}) => ${hexColor332}`;div.onclick = () => document.getElementById("selectedColor").innerText = `Selected Color: ${hexColor332} => ${hexColor888}`;usedIndex.add(rgb332);}// Check missing values...const missingValues = [];for (let i = 0; i < 256; i ) {if (!usedIndex.has(i)) {missingValues.push(i);}}var div = document.getElementById("missingValues");div.innerText = `Missing Values (${missingValues.length}):\n${missingValues.join(', ')}`;div.style.display = missingValues.length === 0 ? 'none':'block';</script></body></html>