[Advanced color] How do software developers decide colors for swatches? (Photoshop, Microsoft Paint, etc.)


aquaartist

New Member
The last thread I posted confused everybody, including myself. But I think I'm able to phrase my question a little better this time.

My question is, how do the software developers decide which colors to use for swatches?

I really need to understand the theory behind this because I am trying to achieve a certain group of colors for a specific use.


- For example in Microsoft Paint, you could have black text, white background, and any of the colors you chose for a colored text box would work the same way! It contrasts just perfectly.
- They must all share a certain characteristic. What this characteristic or property is, I don't know the proper term for it.


If you have any idea what I am talking about, a program, feature, tool, technique to make color sets that all match, please let me know. I've been searching for an answer for a very long time!
 

Attachments

aquaartist

New Member
It is a bit disappointing because all I find online is how to create color swatches. That is not what I am looking for. I am trying to understand how and why these specific colors were selected.
 

Levi

Moderator
Staff member
It's all based on the information you learn when you learn about colour theory
 

hankscorpio

Moderator
Staff member
The people who code the software are not designers they are coders. A lot of the time it's a 50/50 decision on what way something is going to work. Is it on or is it off.

RGB colours are literally that - they take Red, Green and Blue and make colours from them.
Starting at Red which is R255 G0 B0 on the RGB scale.
They make the different variants of colour, usually by adding in a percentage.

Starting in the middle it's 255 0 0
Far left one is 200 0 0
Far right is 255 210 210

As you can see the R is set to 255 - and the hex code #ff0000 - for web safety colours.

6910


The engineers coding the programme wouldn't take a lot of time to make the swatches, they'd start with 100% R or G or B.
Then make percentages of the tints.

Or perhaps they have predetermined swatches that were derived from day dot.

There are already tables out there for Web Safe Colours which could be preloaded onto a users system for the software

Image result for web safe colours




There's probably a combination of Software Engineer's decision making - and using a suitable table of colours.



For print programmes, like InDesign you will always have swatches CMYK set to 100% in each of the channels, this is print theory.

That's the only reason they are there.


The short of it - it's probably down to a predetermined colour tables, widely available online, and the engineer deciding whether to make 20 shades of a colour or to make 5 shades of a colour.


All these colour swatches are starting points for you - they are not set in stone.
You are free to make your own swatches, and call them what you want - you can even save them out from Illustrator and import them to Photoshop for continuity.
 

fisicx

Active Member
My question is, how do the software developers decide which colors to use for swatches?
They make it up or use existing sets of colours. As @hankscorpio suggests, many will begin with websafe colours and go from there.

But there are no rules. And it's also worth noting that the colours you see are dependent on your eyes, eyewear, device in use, screen settings, lighting conditions and other influences. And if you print a colour it depends on the printer, the inks and the paper you use.
 

aquaartist

New Member
I am glad I noticed this because now I am 100% sure that is where my answers lie.

I have seen artists adjust every pixel in their art using this technique, I am not sure how they do it yet, but it's used to create a consistent effect in the digital artwork.
 

aquaartist

New Member
I examined each of those websafe colors and I can tell they all belong to the same group. When placed next to black text on a white background, they contrast exactly the same way.
 

Paul Murray

Moderator
Staff member
When placed next to black text on a white background, they contrast exactly the same way.
They don't all have the same tonal value though. If you convert them to greyscale you'll see they are differing shades. On a white background, they do look similar, but someone with monochromacy colour-blindness will struggle to tell the difference between some of these:

contrast.png

To answer your original question somewhat, look at the hex values below for the web-safe swatch in Affinity. The designers have basically started started at #FFFFFF (white) and decremented the RGB values to produce new colours. Notice the pattern after black (#000000), they're looping through a function that just lowers the RGB value each time and spits out the colour result. This probably wasn't even planned out in detail in the design phase, it's likely just a result of a quick chat with the developers.

Screenshot 2019-06-14 at 20.59.42.png
 

aquaartist

New Member
I obtained family 3 by adding a curves adjustment, it caused all the random colors to converge into one family.
 
Top