color conversion - Convert to four hues while preserving values/brightness in Photoshop

I would like to reduce the number of hues in my flat image from the full range to only four, but I would like to preserve the value/brightness (and if possible, saturation as well). I want four hues because I think it will look cool.

I tried using a hue-adjustment layer, but when I used it, it only shifted the range during conversion, so that one range was converted into another range with many colors. I want to shift a specified range to be converted to the same hue while preserving value/brightness (and maybe even saturation, if it can be done).

I am using Photoshop CS5

These are the four HSB/HSV hue values I want to use:

1. 333



2. 58


3. 193


4. 242

This is how I would like to convert the hues:

Note: I have modified this question since first posting it. Initially, I erroneously asked that responders reduce the image to four RGB values, while simultaneously maintaining the tints/values in the source image. This, however, is an impossible task, as RGB values contain tints/brightness AND hues; in RGB tint and hue are inextricably linked.

Thankfully @Wolff was able to understand what I meant, despite my poor phrasing, and along with @Danielillo, @Ryan, and @Emilie, he helped me to understand that what I was really asking for was to target four hues, not four RGB values. He then identified the four hues present in my RGB values (in HSB/HSV). Those HSB/HSV values are the now the ones I am asking responders to target in the image conversion (not RGB).

Also, as noted by @Wolff, in the first version of my post, I didn’t specify how to convert the full HSB spectrum (I didn’t have magenta-like ranges). The updated question also includes that previously omitted range.

For those who want to understand the root of the confusion (rightfully expressed by some users who provided alternate answers), these were the original 4 RGB values I posted:

Clarification update: Please know that my intention is only for screen, not print. I built a site, based on those four hues, and I thought it would be slick if the images all had the colors warped to match them. At the same time, within each of the four collapsed colors' ranges, I wanted to keep as much of the dynamics which are encoded by original value/brightness as possible. I hope this helps. Points will not be awarded by me, the original poster, for print answers, but any explanation for a print solution will likely be appreciated by the community. @Emilie, who placed the bounty on the question, can reward whomever she desires.

Thanks to @Emilie for placing the bounty on this! I really was bummed that no one seemed able to answer it before.

Answer

As others have pointed out, the logic of this question is a bit flawed, but very interesting nonetheless.

My answer is mostly based on RGB/HSB math and I admit that there are many questionable aspects when it comes to percieved color, color profiles etc., but I'll give it a shot anyway.

---

I'm taking the liberty to redefine the question a little bit to be able to answer it.

First of all, the spectrum you are showing us is going from red to blue. The magenta is missing - what to do with the colors in that part of the spectrum?

So I'm extending your spectrum to include magenta in both ends.

Another problem we have is your list of four hues as you call it. They are not just hues, they are colors with individual saturation and brightness values. This doesn't make too much sense if we are to compare them with the spectrum, so we have to "reduce them to hues" by changing both the saturation and the brightness to 100.

---

We'll use the HSB/HSL Filter (must be dowloaded from Adobe's site) in Photoshop to get the hue of an image as an alpha mask. Then we'll use Gradient Map to map the hue values to the wanted values and then we'll convert the image back to RGB using HSB/HSL Filter again.

The math is a bit funky because the range of hue is 0-360 (and it wraps), the range of alpha is 0-255 and the range of gradient stops is 0-100.

First I'll make a table to get an idea of what's going on. We might not need all the numbers.

(The values are rounded and the hues not exactly how you've defined them, because I've extended the spectrum. They could of course have been placed differently.)

Let's take a colorful image and add the spectrum as a reference. (Image by Mike Goad from Pixabay).

Using HSB/HSL Filter gives us the following hue channel:

I copy the hue channel to a new grayscale document (the color profile must be Gray Gamma 2.2) in order to be able to use Gradient Map on it. I set up the Gradient Map as follows:

Setting up the gradient stops requires a bit of fiddling (it's quite annoying to work with). I'm getting the values from the table I made before. There are 8 stops in total, some of them must overlap to get hard transitions:

The resulting hue channel looks like this:

I finally copy this hue channel back into the initial HSB image, replacing the old hue channel and convert the image back to RGB using HSB/HSL Filter.

I believe this does as requested, but I'm not sure if it looks as cool as you hoped. The transitions are very abrupt, but they could of course be softened by changing the gradient map.

---

Edit: Javascript approach

Here is a JSFiddle with a Javascript version of the same concept. Drop an image on the resulting page and it gets converted to the four hues. Change the "hueRanges" to customize the result. The main part of the code is annotated.

The result differs slightly from the Photoshop method, but it's very close:

Since I don't know the math behind Photoshop's filters I can't tell why there is this difference.