In the material color tool there is a place where you choose the primary color and it shows you the text color on primary.
Given a color in hexadecimal string, how to know what will be the suggested text color on that color?
e.g.
Some colors will suggest that the text should be black
Others will say that it should be white
Observation: Any language is ok, just want to know what is the logic / function to do it.
They wrote something about text legibility. Apart from that, I played around a bit. It seems like it's a weighted mean of the r,g,b parts of the color. Blue has significantly moreimpact than green, which has slightly lessimpact than red. So it is probably something like (1*r + 0.9*g + 1.2*b) / 3.1 > 0xff (2.85 is the sum of the weights). If it surpasses the threshold, the text is black, else it is white.
In react's material-ui they have a "formula" to create it, which uses the same logic as material components.
Related
I need to make a simple color picker. I have a slider that returns a floating point number between 0 and 1, which I'd like to convert into a color in the manner that you typically see in a color line or color spectrum (red on the left, violet on the right, green and yellow somewhere in the middle).
It seems like there must be some algorithm for converting the liner value into RGB values, but I can't find one. I've tried a few things on my own that did not really work.
I don't need anything super accurate or comprehensive, just something where the user can dial in an approximate color by sliding the slider left and right.
I have a table like this one: https://docs.google.com/spreadsheets/d/1Kn4vfbHwpif7u-6ZTznFpBJFNHhnStETPIQVyQq8xgY/edit#gid=0 with bottom / top color and the Red, Green, Blue (RGB) of the result (where it states 'Preparation' for the bottom color means the canvas so essentially its the RGB of the top color - those rows are the 'single colors').
I am looking for a relation between the double colors and the single colors. E.g. could I somehow subtract one color from their combination and get the other? Either by using the RGB values or using the images in some software?
Note that the type/formula/function/relation that I am looking for will be only for specific single colors and their combinations which I have already measured (do not care if it is valid beyond the dataset that I am working with)
I would like to change smoothly the background color of a view over time.
Choosing 2 colors c1 and c2, it is easy in the rgb space to make a color function of the time c(t) = t.c1 + (1-t).c2, which will be a gradient between the two
However the rgb space is 3D and I am looking for a way to enumerate all colors smoothly.
I know there are billions of colors possible but coding RGB on 4x4x4 bits would be ok for my project.
My question is independent of the choice of the programming language
I have tried things like (pseudo code / Python)
for red in xrange(16):
for green in xrange(16):
for blue in xrange(16):
color = rgb(red, green, blue)
however this is not smooth at all, it is like a "step function" if you see what I mean (color will go from plain green to no green at all and a little red for instance)
Any idea how to do that ?
In that case I think you're better of with the HSV values of a color. You can use the same tactic and change only one of these HSV values at a time, to make the color shift more fluently.
Check this out (HSV)
EDIT:
After looking a bit further, I found this argument why NOT to use HSV.
This might be a good solution to your problem:
Solution
I have more then 1 week reading about selective color change of an image. It meand selcting a color from a color picker and then select a part of image in which I want to change the color and apply the changing of color form original color to color of color picker.
E.g. if I select a blue color in color picker and I also select a red part in the image I should be able to change red color to blue color in all the image.
Another example. If I have an image with red apples and oranges and if I select an apple on the image and a blue color in the color picket, then all apples should be changing the color from red to blue.
I have some ideas but of course I need something more concrete on how to do this
Thank you for reading
As a starting point, consider clustering the colors of your image. If you don't know how many clusters you want, then you will need methods to determine whether to merge or not two given clusters. For the moment, let us suppose that we know that number. For example, given the following image at left, I mapped its colors to 3 clusters, which have the mean colors as shown in the middle, and representing each cluster by its mean color gives the figure at right.
With the output at right, now what you need is a method to replace colors. Suppose the user clicks (a single point) somewhere in your image, then you know the positions in the original image that you will need to modify. For the next image, the user (me) clicked on a point that is contained by the "orange" cluster. Then he clicked on some blue hue. From that, you make a mask representing the points in the "orange" cluster and play with that. I considered a simple gaussian filter followed by a flat dilation 3x5. Then you replace the hues in the original image according to the produced mask (after the low pass filtering, the values on it are also considered as a alpha value for compositing the images).
Not perfect at all, but you could have a better clustering than me and also a much-less-primitive color replacement method. I intentionally skipped the details about clustering method, color space, and others, because I used only basic k-means on RGB without any pre-processing of the input. So you can consider the results above as a baseline for anything else you can do.
Given the image, a selected color, and a target new color - you can't do much that isn't ugly. You also need a range, some amount of variation in color, so you can say one pixel's color is "close enough" while another is clearly "different".
First step of processing: You create a mask image, which is grayscale and varying from 0.0 to 1.0 (or from zero to some maximum value we'll treat as 1.0), and the same size as the input image. For each input pixel, test if its color is sufficiently near the selected color. If it's "the same" or "close enough" put 1.0 in the mask. If it's different, put 0.0. If is sorta borderline, put an in-between value. Exactly how to do this depends on the details of the image.
This might work best in LAB space, and testing for sameness according to the angle of the A,B coordinates relative to their origin.
Once you have the mask, put it aside. Now color-transform the whole image. This might be best done in HSV space. Don't touch the V channel. Add a constant to S, modulo 360deg (or mod 256, if S is stored as bytes) and multiply S by a constant chosen so that the coordinates in HSV corresponding to the selected color is moved to the HSV coordinates for the target color. Convert the transformed S and H, with the unchanged L, back to RGB.
Finally, use the mask to blend the original image with the color-transformed one. Apply this to each channel - red, green, blue:
output = (1-mask)*original + mask*transformed
If you're doing it all in byte arrays, 0 is 0.0 and 255 is 1.0, and be careful of overflow and signed/unsigned problems.
Is there an algorithm (I've searched and haven't come up with much) that, given a hex value, is capable of returning the color name? It doesn't have to be anything too specific, any shade of blue coming back as just 'blue' is fine.
Or short of that, is there a large list somewhere that consists of hex values and their corresponding color family. I've found lists, but they only seem to be a couple hundred colors long.
I saw this post, but the solution there seems to only break the color down into three regions.
EDIT
I altered the RGB text file so that each color would only fall into the following color ranges:
white
grey
magenta
brown
black
blue
green
turquoise
yellow
orange
red
As you said you had already found lists, then it is simple.
Calculate Euclidean Distance of the color for RGB (for instance), and call that color the nearest name.
By the way, over a hundred colors is actually a big number for human languages, and even for just a hundred colors, ordinary people may not able to tell the differences between quite a few colors.
rgb.txt is the usual list used for color names. Just find the closest triplet and call it that.