512 colour RGB333 Palette

Discuss game and other programming topics not specifically covered in another forum

Moderator: Programming Moderators

Post Reply
User avatar
SevenFFF
Posts: 189
Joined: Mon Jun 05, 2017 5:30 pm
Location: USA

512 colour RGB333 Palette

Post by SevenFFF » Tue Jul 03, 2018 1:59 am

Image

Full C# source to generate this is on github. It looks like this:

Code: Select all

static void Main(string[] args)
{
string path = Path.GetDirectoryName(new Uri(Assembly.GetExecutingAssembly().CodeBase).LocalPath);
string outFile = Path.Combine(path, "..", "..", "..", "..", "images", "PaletteGenerator", "Palette333.png");
var dir = Path.GetDirectoryName(outFile);
if (!Directory.Exists(dir))
    Directory.CreateDirectory(dir);
using (var img = new Bitmap(257, 193))
{
    using (Graphics g = Graphics.FromImage(img))
    {
        int i = 0;
        for (int v = 0; v < 32; v++)
        {
            for (int h = 0; h < 16; h++)
            {
                int r3 = (i & 448) >> 6;
                int g3 = (i & 56) >> 3;
                int b3 = i & 7;
                int r8 = (r3 << 5) + (r3 << 2) + ((r3 & 6) >> 1);
                int g8 = (g3 << 5) + (g3 << 2) + ((g3 & 6) >> 1);
                int b8 = (b3 << 5) + (b3 << 2) + ((b3 & 6) >> 1);
                var rgb888 = Color.FromArgb(r8, g8, b8);
                using (var brush = new SolidBrush(rgb888))
                    g.FillRectangle(brush, h * 16, v * 6, 16, 6);
                i++;
            }
        }
        using (var pen = new Pen(Color.FromArgb(128, 128, 128)))
        {
            for (int h = 0; h <= 16; h++)
                g.DrawLine(pen, h * 16, 0, h * 16, 192);
            for (int v = 0; v <= 32; v++)
                g.DrawLine(pen, 0, v * 6, 255, v * 6);
        }
    }
    img.Save(outFile, ImageFormat.Png);
}
Robin Verhagen-Guest
SevenFFF / Threetwosevensixseven / colonel32
Spectron 2084blog

User avatar
SevenFFF
Posts: 189
Joined: Mon Jun 05, 2017 5:30 pm
Location: USA

Re: 512 colour RGB333 Palette

Post by SevenFFF » Tue Jul 03, 2018 2:41 am

The colour arithmetic works like this. We know there are 512 colours, so inside the loops i has values between 0..511. In binary, 511 is %111111111, which is 9 digits long.

In RGB333, we express the colours as %RRRGGGBBB, where each letter corresponds to a binary digit. Thus the numbers 0..511 represent the full gamut of RGB333 colors.

For any given value of i, we can extract the 3-bit red, green and blue components. We do this by masking off the appropriate three bits with & (bitwise AND). We then shift them to the right with >>, to give a number in the range 0..7 (blue is already in the correct range, so doesn't need shifting).

Code: Select all

int r3 = (i & 448) >> 6;
int g3 = (i & 56) >> 3;
int b3 = i & 7;
Once we have the 3-bit RGB components, we can turn them into 24-bit RGB888 colours that modern image tools like Photoshop and GIMP work with. In RGB888, each colour component has 8 bits, e.g. %RRRRRRRR. We start at the left hand side, and fill all 8 bits by repeating our three bits. This gives us the most accurate 24-bit representation of the colour. We can do this by shifting to the far left, shifting to the middle, and shifting slightly to the right, then adding all three together:

Code: Select all

int r8 = (r3 << 5) + (r3 << 2) + ((r3 & 6) >> 1);
int g8 = (g3 << 5) + (g3 << 2) + ((g3 & 6) >> 1);
int b8 = (b3 << 5) + (b3 << 2) + ((b3 & 6) >> 1);
For example, suppose our red component is %101. We fill up the 8 bits by repeating, to get %10110110 (truncating the final 1 because we only need 8 bits, not 9). In hex, %10110110 is #b6, so our Photoshop-friendly RGB888 colour would be #b6----. Repeat for green and blue, and we have the whole thing.
Last edited by SevenFFF on Tue Jul 03, 2018 3:04 am, edited 3 times in total.
Robin Verhagen-Guest
SevenFFF / Threetwosevensixseven / colonel32
Spectron 2084blog

User avatar
SevenFFF
Posts: 189
Joined: Mon Jun 05, 2017 5:30 pm
Location: USA

Re: 512 colour RGB333 Palette

Post by SevenFFF » Tue Jul 03, 2018 2:56 am

Photoshop likes to build swatches and colour tables directly from images, but my initial image had a grey grid (which is between two RGB333 colours, so would have added a 513th invalid colour). Here's another version without the grid:

Image
Robin Verhagen-Guest
SevenFFF / Threetwosevensixseven / colonel32
Spectron 2084blog

User avatar
SevenFFF
Posts: 189
Joined: Mon Jun 05, 2017 5:30 pm
Location: USA

Re: 512 colour RGB333 Palette

Post by SevenFFF » Tue Jul 03, 2018 3:39 am

There are four greys in the palette, as well as black and white. It's quite hard to pick them out, so here they are:

#000000 (%000) - black
#242424 (%001) - 86% grey
#6d6d6d (%011) - 57% grey
#929292 (%100) - 43% grey
#dbdbdb (%110) - 14% grey
#ffffff (%111) - white

Image
Robin Verhagen-Guest
SevenFFF / Threetwosevensixseven / colonel32
Spectron 2084blog

User avatar
varmfskii
Posts: 169
Joined: Fri Jun 23, 2017 1:13 pm
Location: Albuquerque, NM USA

Re: 512 colour RGB333 Palette

Post by varmfskii » Tue Jul 03, 2018 4:55 pm

There should be 6 greys plus black and white in an RGB333 palette. What about 010=>#494949 29% gray and 101=>#b6b6b6 71% gray are missing.
Backer #2741 - TS2068, Byte, ZX Evolution

User avatar
SevenFFF
Posts: 189
Joined: Mon Jun 05, 2017 5:30 pm
Location: USA

Re: 512 colour RGB333 Palette

Post by SevenFFF » Tue Jul 03, 2018 6:31 pm

Yes thanks. Somebody spotted this on Facebook too. I blame the heat and the lateness of the hour!
Robin Verhagen-Guest
SevenFFF / Threetwosevensixseven / colonel32
Spectron 2084blog

Post Reply