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.
Related
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.
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?
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 boxes filled with colors, a green one on the left, and gray one on the right. They go right up against each other in the middle of the screen, and I would like each one to extend the width of the browser, so the green one extends all the way to the left, and the gray one extends all the way to the right, no matter how wide the browser gets. How can I do this?
the width property supports percentage values, which are relative to the size of the window it exists in.
See:
http://learnlayout.com/percent.html
http://www.w3schools.com/cssref/pr_dim_width.asp
I have these four icons that look like this:
But I want to be able to just have 1 gray icon and then tint them different colors by setting the color in XNA / Monogames Draw function.
I took one of the images and pulled all the colour out and made it a bit lighter it to get
I also tried a version where the center of the gray image is fully white but neither look right in the game, here's an image with the icons on top and my tinted gray on the bottom (the tint color is sampled from the center of the original icons):
I figure there should be a way, given the original icons, to figure out how to make the gray icon and also the colors to plug into the draw function so that I get an exact copy of the original. I assume this is possible? How do you do it?
EDIT:
To elaborate on my issue here is another image all with blue icons, the top images are all the original blue icon for comparison. The bottom images are all grey icons I used to tint to make the middle icons. The grey icons are, from left to right, 0 saturation, 0 saturation and 100 brightness, and auto level + 0 saturation. It seems to me that by setting the saturation to 0 I am losing the ability to make the icon look right as it's not just "darker" blue but also "bluer" blue.
EDIT 2: I don't think it's possible, thanks for the help Goose.
Would it work if the grey icon was full white at the center (it's brightest point) and got darker from there.
Then you could just sample the color at the center of your source image (the colored ones) and tint with that.
I think the issue you are seeing now is that the grey image will darken the color you are tinting with, so you actually want to tint with the source color PLUS the amount of grey at the brightest point in the image (if that makes sense).