I need to calculate the hex value for a few colours which should be 40% tint of the given colours.
For example I'm given this colour: #46A3E0
How can I calculate 40% of its tint?
in css add filter: brightness(40%) for a darker tint for example
also check this https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function for more useful "filters" to use in CSS for other types of tints
Related
I hI have a website that runs several colour themes. I want to change the text select colour based on the colour theme.
p::selection,
li::selection,
div::selection{
background-color: #hex;
color: #ffffff;
}
I'm also using the -moz and -o prefixes.
For the colour theme where I'm using #274569 the default colour of #339aff is acceptable and I've calculated the contrast. What I want to do is work out how to calculate the colour from another (#148545 for example) if I have the contrast.
There is no shortage of resources to the web to calculate the contrast of two colours but I'm after doing it the other way round, unless there a better way of choosing the colour.
Is there a way to do this?
I have a base color with an alpha channel. I need to create two separate colors based on this color, so when I mix them together I get the initial color (for example, when I fill the screen with the first color and then the second, I get the initial color).
So far I was being able to calculate just a 50% color. Apparently, taking the alpha channel and dividing it by whatever ratio doesn't work. I came up with the formula for getting a 50% alpha: 1 - sqrt(1 - alpha) (based on this article on Wikipedia https://en.wikipedia.org/wiki/Alpha_compositing). It does work, but I also need to get a 10% alpha or any other percent. I know, there must be a way to calculate it.
How can I retain a specific colour of an object (or layer) but change the transparency?
I have 2 objects which I want to have a specific colour but currently the opacity is 100%. I need to maintain the current colours but with a opacity of 50%.
Obviously if I change the opacity the colours change (dependent on the background). I need to know how to get an original colour at 100% opacity to make my desired colour at 50% opacity.
Okay so couldn't find a specific way to do it with photoshop so I worked out the math based off the RGB values and came up with a formula to do the job.
For each colour channel I used this formula:
Colour value = Desired Colour + (Background Colour - Desired Colour)*(1-1/Desired Opacity)
eg. 30 = 120 + (255-120)*(1-1/0.6)
Obvious only values between 0-255 are applicable and you may need to round values. This also needs to be done 3 times for red, green and blue.
I have two color values in HSI (Hue Saturation and Intensity) and I want a number which represents the visual difference between the two colors. Hue is a number between 0 and 360 inclusive. Saturation is 0 to 1 and Intensity is 0 to 1.
Lets consider for example Red and Blue at Saturation of 100% and Intensity of 100%.
At this website is a way to display the color by entering in the following text.
red is:
hsv 0, 100%, 100%
blue is:
hsv 240, 100%, 100%
Clearly these are two very different colors, and so a simple way I could try to calculate the difference between colors is to use the Hue component and calculate the absolute difference in hue which would be 120 (360-240) since 360 is also equal to 0 in hue.
The problem arises where the Saturation or Intensity is very dark or light, consider a very dark red and blue.
dark red is:
hsv 0, 100%, 20%
dark blue is:
hsv 240, 100% 20%
Obviously the visual difference between these two colors is less than the bright red and blue colors, as a human would state if asked to compare the differences. What I mean here is, ask a friend "Which pair of colors is most different?" they will likely say the top bright red blue.
I am trying to calculate the difference between two colors as a human would notice. If a human being looked at two colors a and b, then two colors c and d, he could notice which ones are the most different. Firstly if the colors are bright (but not too bright) then the difference is hue based. If the colors are too bright such as white or too dark such as black or too grey then the differences are smaller.
It should be possible to have a function diff where x=diff(a,b) and y=diff(c,d) yields x and y, and I can use x and y to compare the differences to find the most different color or least different color.
The WCAG2.0 and 1.0 guidelines both make reference to different equations on perception of color difference:
contrast ratio (http: //www.w3.org/TR/2008/REC-WCAG20-20081211/Overview.html#contrast-ratiodef)
brigtness difference and 3. color difference (http://www.w3.org/TR/AERT#color-contrast).
I tried the Delta-e method(http: //colormine.org/delta-e-calculator/) but it is quasimetric so the difference measurement may change depending on the order you pass the two colors. If in your example you expect diff(a,b) to always equal diff(b,a) then this is not what you want(there may be different algorithms under this name that aren't quasimetric but I haven't looked into it past that site).
I think that the color difference metric is the closest to matching my expectations of color difference measurements. For your example it will yield that diff(a,b) > diff(c,d)
You can test it out for yourself using the tool at this website: http://www.dasplankton.de/ContrastA/
The general answer seems to be what David van Driessche said, to use Delta E. I found some Java code here: https://github.com/kennyliou/GAI
This is a answer to the question, may not be the best answer.
how to get RGB values in percentage in photoshop.
and is cmyk percentage values are similar to RGB?
RGB and CMYK are different color modes.
RGB colors are screen colors. It is expressed in absolute values, usually in integer values from 0 to 255, representing the brightness on the screen. The exact range of values depends on the color depth of the image. The higher the value, the more light of that color is added, so the highest color is white.
CMYK colors are printing colors. They are used to represent the amount of ink used for a pixel. This is no absolute value, because it is merely a ratio between the color components. The higher the value, the darker it gets. 100% of each is (near) black, although real black is usually constructed by using 100% of K (key) and about 30% of each of the other components.
integer values from 0 to 255 are for 8 bit color, in the day of 16 or 32 bit color it would make sense to be able to view rgb as percentage values.
this is being added to Adobe lightroom currently does percentaes unless you're in the develop module, in soft proof mode