Calculting colours based on contrast - colors

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?

Related

ruby/caxlsx: how to define different surrounding cell's borders styles?

I cannot find a way to have different borders on a cell with the excellent caxlsx gem on ruby.
From the doc, the expected style for borders is defined using (for instance):
{style: :thick, color: 'FF0000', edges:[:left,:right]}
So, it seems imposible to have a red thick border on the left, and a blue dash border on the right for instance.
Am i wrong?

Given a Primary color, how to decides what will be the OnPrimary color by material design guidelines?

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.

Colour isolation

I'm fairly new to GIMP
I have some black-and-white images in RGB mode. I want to highlight some areas in plain Red (ie, zero Blue+Green), some in plain Blue (ie, zero Red+Green), and the rest in plain Green (ie, zero Red+Blue)
I will be selecting several areas using Paths, though a simple rectangle would be fine for now
The final image will be Green, with 2+ selections of Red, and 2+ selections of Blue
I have experimented with multiple layers & multiple images, but I always get problems with the selection areas
Thanks in advance !
If what you want is keep the value of the R (or G or B) channel in the selection, while setting the other two components to 0:
Create a layer group above your image layer
Add a transparent layer in the group, name it "Green", bucket-fill with green
Add a transparent layer in the group, above "Green", name it "Red+Blue"
Set the group to "Multiply" mode. You should see your image in green.
To add red/blue, make a selection, make sure "Red+Blue" is the active layer, and bucket fill the selection with Red or Blue.
Notes
With some selection tools, (path, ellipse...) you may have to use Select>Sharpen before the bucket-fill to make sure that there are no partially selected pixels
To see the original image when making selections, just make the group invisible.
You can also use two separate layers for Red and Blue (both above the Green one, in the layer group)
If what you want is just areas of #FF0000 and #0000FF over a #00FF00 background, then just hide the initial image layer when exporting.

noUiSlider: Set a background color for the limited area

I'm using noUiSlider with the "soft limits" (https://refreshless.com/nouislider/examples/#section-soft-limits) and I want to set a specific background color for the area that's limited. For example, if I can't drag the handle anywhere across the first 20 values, this section of the bar should have a red background color.
This is because I need three different background colors:
1 For the limited area
2 For the area on the left side of the handle
3 For the area on the right side of the handle
See image here
Hope you understand what I mean. Thanks!
You can do this in CSS, using linear-gradient:
.noUi-background {
background-image: linear-gradient(to right, #a2ea4c 20%, #07aa91 20%, #07aa91 80%, #a2ea4c 80%);
}
Add a padding and more color stops for any number of colored areas.

Retain colour but change transparency in photoshop

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.

Resources