The LibXOR colors is a set of sixteen core colors which are designed to be mixed in a 16-bit format for pixel art purposes. They are originally for a work-in-progress graphics library called LibXOR–which has been paused for a little bit of time. Nonetheless, I love these colors and my desire is for them to be true, honest, just, pure, lovely, and of a good report. So, I want to share them with the world. Let me show you how they work. For reference here are the RGB values and Hexadecimal values
|Black||vec3(0.000, 0.000, 0.000)||#000000|
|Gray33||vec3(0.333, 0.333, 0.333)||#555555|
|Gray67||vec3(0.667, 0.667, 0.667)||#aaaaaa|
|White||vec3(1.000, 1.000, 1.000)||#ffffff|
|Red||vec3(1.000, 0.000, 0.000)||#ff0000|
|Orange||vec3(0.894, 0.447, 0.000)||#e47200|
|Yellow||vec3(0.894, 0.894, 0.000)||#e4e400|
|Green||vec3(0.000, 1.000, 0.000)||#00ff00|
|Cyan||vec3(0.000, 0.707, 0.707)||#00b4b4|
|Azure||vec3(0.000, 0.447, 0.894)||#0072e4|
|Blue||vec3(0.000, 0.000, 1.000)||#0000ff|
|Violet||vec3(0.447, 0.000, 0.894)||#7200e4|
|Rose||vec3(0.894, 0.000, 0.447)||#e40072|
|Brown||vec3(0.500, 0.250, 0.000)||#7f3f00|
|Gold||vec3(0.830, 0.670, 0.220)||#d4ab38|
|ForestGreen||vec3(0.250, 0.500, 0.250)||#3f7f3f|
The following gallery shows the colors and their corresponding hue shifts and inverse settings.
A palette of 4, 8, or 16 colors
The colors are not designed to be mixed in greater quantities than a power of two. So, 1-bit color is a foreground and background, 2-bit color is 4 colors, 3-bit color of 8 colors, or 4-bit color of 16 colors. An indexed image would have an associated color lookup, or palette with 16 colors.
Mixing the palette
The palette relies on three kinds of operations: mixing, hue shifts, and color inversion. The colors can have a hue shift of 7.5deg, 15deg, or 180deg. The complementary color is 180deg and is often used to get a vibrant look, but it’s also effective when applying the inverse operation. The 7.5 and 15deg provide a subtle shift of hue that is helpful for getting slightly different shades of color. When you combine all the combinations of the three hue shifts and inverse function, there are ninety colors which may be blended. Check the image at the end of this post to see them in a color test chart.
Just like a painter will often take two colors and mix them, the mix operation is designed to accommodate that. You can get six in between shades of two colors. So, if you mix with white, gray, or black, you can darken, lighten, or dull a color. I suspect this will be the usual way to get different intensities of colors. However, I think the power of modulating the hue shifts, inverse operation, and blend value will result in some remarkably interesting palette effects.
16 bit encoding
The 16-bit encoding works divides a 16-bit unsigned integer into two parts: color selection and color operations. The bottom 8-bits stores the first color index in bits 0 to 3 and the second color index in bits 4 to 7. The upper 8-bits stores the color operations. The bottom 3 bits stores the mix of the two colors after they have had their hues shifted. Bits 3-4 stores the hue shift of color 1 and bits 5-6 stores the hue shift of color 2. Lastly, bit 7 controls whether the inverse is calculated.
|0-3||Color Index 1|
|4-7||Color Index 2|
|8-10||Mixture (0.000, 0.143, 0.286, 0.429, 0.571, 0.714, 0.857, 1.000)|
where $$C’=(1-t)C1 + tC2$$
|11-12||Color 1 Hue Shift (0=none, 1=7.5deg, 2=15deg, 3=180deg)|
|13-14||Color 2 Hue Shift (0=none, 1=7.5deg, 2=15deg, 3=180deg)|
Overall, the colors are great for creating vibrant pixel art images. Limiting yourself to 16 colors at a time helps achieve the aesthetic. Check out the ShaderToy for an interactive view of the blending at LibXOR Color Model (clickable) (shadertoy.com) Altogether, the combination of hue shifts and the inverse function give about ninety colors as you can see in the following figure. There are more colors possible by blending them, but I suspect that white, 33% gray, 66% gray, and black will be the most frequently used blends.