What is the range of White colour in RGB? - colors

I want to exclude range of white colours (all type of whites) based on RGB in my code.
For example, something like:
if(redColorValue < 230 && greenColorValue < 230 && blueColorValue < 230)
{
//It's not white colour
}
else
{
//It's white colour.
}

White needs to have the greatest value of all rbg. that is:
R = 255, G = 255, B = 255.
any value that falls below the given absolute is not considered as absolute white.

Related

Create a colour histogram from an image file

I'd like to use Nim to check the results of my Puppeteer test run executions.
Part of the end result is a screenshot. That screenshot should contain a certain amount of active colours. An active colour being orange, blue, red, or green. They indicate activity is present in the incoming data. Black, grey, and white need to be excluded, they only represent static data.
I haven't found a solution I can use yet.
import stb_image/read as stbi
var
w, h , c:int
data: seq[uint8]
cBin: array[256,int] #colour range was 0->255 afaict
data = stbi.load("screenshot.png",w,h,c,stbi.Default)
for d in data:
cBin[(int)d] = cBin[(int)d] + 1
echo cBin
Now I have a uint array, which I can see I can use to construct a histogram of the values, but I don't know how to map these to something like RGB values. Pointers anyone?
Is there a better package which has this automagically, I didn't spot one.
stbi.load() will return a sequence of interleaved uint8 color components. The number of interleaved components is determined either by c (i.e. channels_in_file) or desired_channels when it is non-zero.
For example, when channels_in_file == stbi.RGB and desired_channels == stbi.Default there are 3 interleaved components of red, green, and blue.
[
# r g b
255, 0, 0, # Pixel 1
0, 255, 0, # Pixel 2
0, 0, 255, # Pixel 3
]
You can process the above like:
import colors
for i in countUp(0, data.len - 3, step = stbi.RGB):
let
r = data[i + 0]
g = data[i + 1]
b = data[i + 2]
pixelColor = colors.rgb(r, g, b)
echo pixelColor
You can read more on this within comments for the stb_image.h.

Calculate a colour in a linear gradient

I'd like to implement something like the powerpoint image below. A gradient that goes between three values.
It starts at A (-1), the mid point is B (0), and the end is C (1).
I have realised that I can save some effort by calculating the 'start' as a-to-b, and the 'end' as b-to-c. I can do as 2 sets of 2 gradients, instead of 1 gradient with three values.
But I'm stumped (despite googling) on how to get from one colour to another - ideally in the RGB colour space.
I'd like to be able to have something like this -
const colourSpace = (value, startColor, endColor) => {...}
colorSpace(-0.25, red, yellow) // some sort of orangey color
colorSpace(1, yellow, green) // fully green
colorSpace(0.8, yellow, green) // mostly green
This isn't a front-end application, so no CSS gradients - which is what google was mostly referencing.
Thanks all,
Ollie
If you aren't too worried about being perceptually consistent across the color space (you would need to work in something like LAB mode to do that), you can just take the linear interpolation in RGB space. Basically you take a distance (between 0 and 1), multiply it by the different in the coordinates, and add it to the first one. This will allow you to find arbitrary points (i.e colors) along the line between any two colors.
For example between red and yellow:
let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');
let rgb1 = [255, 0, 0] // red
let rgb2 = [255, 255, 0] // yellow
function getPoint(d, a1, a2) {
// find a color d% between a1 and a2
return a1.map((p, i) => Math.floor(a1[i] + d * (a2[i] - a1[i])))
}
// for demo purposes fill a canvas
for (let i = 0, j = 0; i < 1; i += .002, j++) {
let rgb = getPoint(i, rgb1, rgb2)
ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
ctx.fillRect(j, 0, 1, 200);
}
<canvas id="canvas" width="500"></canvas>
You can repeat this to get multiple 'stops' in the gradient.
I ended up using Chroma for converting between colour spaces.

How to use HSLA colors with RMagick?

How to set an arbitrary HSLA color instead of gray20?
draw = Magick::Draw.new
draw.font_family = 'arial'
draw.pointsize = 12
draw.gravity = Magick::CenterGravity
draw.annotate(#canvas, size,size, x,y, text) { self.fill = 'gray20' }
Also, using gc.rectangle, how to set the HSLA color of the fill?
gc = Magick::Draw.new
gc.fill ????
gc.rectangle(x,y, x + size,y + size)
From the RMagick documentation:
Many RMagick methods expect color name arguments or return color names. A color name can be
an X11 color name such as "red", "chocolate", or "lightslategray".
an SVG color name (similar to the X color names), or
a string in one of the formats shown in the following table.
...
hsla(h,s,l,a)
And HSL documentation
hsla(33.3333%, 100%, 50%, 1.0) green with an alpha value of 1.0
hsla(120, 255, 127.5, 1.0) green with an alpha value of 1.0
So, use a string: fill 'hsl(0%,100%,100%,1)'

RGB range for cold and warm colors?

What are ranges of cold and warm colors (http://www.diy-bathroom-remodel.com/images/color_wheel.gif) in RGB?
Taking the image you linked to as a reference of what is "warm" and "cold", we get the following.
The hottest colour is completely red (R=255, G=0, B=0).
The coldest colour is completely blue (R=0, G=0, B=255).
So the more R you have, the warmer the colour, and the more B you have, the cooler the colour. The G takes you through shades of turquoise, green, and yellow, each being increasingly warmer. When G is zero, you move in the lower left diagonal of the circle when R and B change. As G approaches 255, you cross over the upper right diagonal when R and B change.
However, the adjacent warm and cool colours have a different amount of green in them. The red immediately below the diagonal line has less green than the red immediately above it. The blue immediately below the diagonal line has less green than the blue immediately above it. This colour wheel looks like it doesn't represent the RGB space all that well especially in the blue end of the spectrum.
Ultimately, what you perceive as warm and cold depends on your monitor settings and light conditions. A lot of it is also your perception and cognition – what you think is warm or cold. In an image, the colour contrasts will affect your judgement. An "in-between" colour next to a clearly cool colour will look warm, but if the same colour is next to a clearly warm colour, it will look cool. Take a look at this colour wheel:
Here, every single 24-bit colour is shown (8 bits for each of R, G, and B), and the RGB values for the top, right, bottom, and left colours are shown. To my eye, there are more "cool" colours than "warm". Hope this helps you decide what the RGB values are for what you perceive as cool and warm colours.
Bonus: In the image above, you can also see the colours expressed in the hue, saturation, and value (HSV) colour model. Hue basically encodes the colour. Saturation encodes how "full" the colour is – less saturation makes it more "bleak", ie. white. Value encodes how dark it is – less value makes it more black, and also makes the white of the saturation more grey. Hue goes from 0 to 360 and corresponds to the angle of a circle, with 0 being totally red, 90 being a sort of neon green, 180 being bright blue, 270 being bluish purple, and 360 going back to red again. S and V go from 0 to 100 and will influence the exact shade – these examples are with S=V=100.
To my eye, H values in the ranges 0-80 and 330-360 are warm while H>80 and H<330 are cold (approximately).
You may want to open the colour selector in your favourite paint program. They can usually show HSV and RGB side by side and let you play with a colour wheel and see the effects on the HSV and RGB numbers. If you don't already have one, I would suggest GIMP. It has the colour wheel I've been using to get the numbers for this answer.
Bonus 2: All of the above assumes a subjective assessment of what is warm and what is cool. I think the only way to make an objective measurement of colour temperature is to measure it and express it on a temperature scale. Often Kelvin seems to be used. This measure takes into account not only shade of the colour, but its brightness (or how much light it emits) too. If you have a modern monitor, it probably has a temperature setting with some Kelvin values to choose from. It is possible to calculate the temperature of each RGB colour on your display, as long as you know the temperature of your white (the white balance). However, this calculation is very complex and I don't know how to do it. You may find Bruce Lindbloom a good source for further information, or any book on colour science. But I guess this is more than you bargained for with your question... ;-)
Looks to me like
if (B>R) {
color=cool
} else {
color=warm
}
is a pretty good approximation. You can check this out on your color wheel using:
http://www.colorzilla.com/firefox/
already answered but need to add this:
If you are interested in physical temperature and color dependencies then this is the scale you are looking for:
It is the color of light emitting from blackbody of given temperature. In astronomy is this used for star color classification (like BV color index).
It also can be used for indirect temperature measurements.
I've found these parameters satisfactory
For Warm color :
R from 128 to 255
G from 0 to 128
B from 0 to R
For Cold color :
R from 0 to B
G from 0 to 255
B from 128 to 255
Note that high green makes the color more cold (in my view but that's debatable ^^), that's why it's restricted for warm colors but not for cold ones.
Warm colors have more red,
and cool colors have more blue.
In RGB:
red = 0
blue = 0
if (red > blue) {
isWarmColor = true
isCoolColor = false
}
else if (red < blue) {
isWarmColor = false
isCoolColor = true
}
else {
isWarmColor = false
isCoolColor = false
}
In HSL:
hueAngle = 0
if (hueAngle < 0 || hueAngle > 360 || hueAngle == 90 || hueAngle == 270) {
isWarmColor = false
isCoolColor = false
}
else if (hueAngle > 90 && hueAngle < 270) {
isWarmColor = false
isCoolColor = true
}
else if (hueAngle < 90 && hueAngle > 270) {
isWarmColor = true
isCoolColor = false
}
Simple and accurate:
def is_hot(a):
return (a[..., 'RED'] > 128)
where 'RED' stands for the index of the red channel in the array a.
This works -- you can see for yourself by: (a) looking at the second wheel by Fabian Fagerholm and/or (b) go to the following link and move the bar up and down towards the two warm ends.
https://www.colorspire.com/rgb-color-wheel/
For me below calculation, with the inclusion of saturation, gives a better result. Since fully desaturated colors like Black, White and Gray are considered neutral colors.
if (hueAngle == 90 || hueAngle == 270 || (hueAngle == 0 && saturation == 0))
{
isWarmColor = false;
isCoolColor = false;
}
else if (hueAngle > 90 && hueAngle < 270)
{
isWarmColor = false;
isCoolColor = true;
}
else
{
isWarmColor = true;
isCoolColor = false;
}

How to generate a set of random colors where no two colors are almost similar?

I currently use the following function to generate a random hexadecimal representation of a color.
function getRandomColor($max_r = 192, $max_g = 192, $max_b = 192) {
if ($max_r > 192) { $max_r = 192; }
if ($max_g > 192) { $max_g = 192; }
if ($max_b > 192) { $max_b = 192; }
if ($max_r < 0) { $max_r = 0; }
if ($max_g < 0) { $max_g = 0; }
if ($max_b < 0) { $max_b = 0; }
return '#' . dechex(rand(0, 192)) . dechex(rand(0, 192)) . dechex(rand(0, 192));
}
Notice that I set the max value to be 192 instead of 255 for the sole reason that I am avoiding very light colors, for the purpose that I would be using the random color as foreground in a white background.
My question is how do I generate an indefinitely numbered set of colors where there are no colors that are almost the same. e.g.: #D964D9 & #FF3EFF ?
It might be better to use HSV coordinates. If you don't need white or black, you can set S and V to their maximum values, and generate H values that are not too close to each other (mod 360 degrees). Then convert to RGB.
There are several methods which spring to mind:
Set up a array of n standard colors and interchange them randomly to produce the desired "random" colors.
Fill an array of n colors; generate a random color and check if there is something "close" already in the array. If so, choose another random color.
Select each color as a deterministic sequence, like a simple hash value, designed to not produce duplicate values. Grey code springs to mind.
Your algorithm could randomly generate RGB colors (as it's doing now) however you could for example verify that the two R's are sufficiently different before accepting the color choice. The algorithm could repeat that step (say up to 4...10...N times) for a given R, G and/or B.
while ( (R1 > $max_r/2) && (R2 > $max_r/2) ) {
// Both are in the upper half of range, get a new random value for R1.
}
Other possibilities:
Repeat for the lower half of range
Further sub-divide ranges (into 1/3's or 1/4's)
Repeat for G and B tones

Resources