After reading this link, I know how to lighten the opacity of a color.
But is there any method to darken the color's opacity?
If by "darken opacity" you mean moving from a clear blue to a dark blue, and if your question concern HTML/CSS (and not Android like your link suppose) you could use HSL Colors instead of using RGB.
Here is a link where you can find out how tu use CSS colors : http://www.w3schools.com/cssref/css_colors_legal.asp
/** This is CSS **/
#light {background-color:hsl(120,100%,25%);}
#normal {background-color:hsl(120,100%,50%);}
#dark {background-color:hsl(120,100%,75%);}
/** 3rd value reprensent black value **/
But if you just mean make your color more/less opaque, you could just use Alpha (Available in RGBA in CSS for example)
You can find out how to use RGBA in the 1st link to!
/** This is CSS **/
#opaque {background-color:rgba(0,255,0,1);}
#transparant {background-color:rgba(0,255,0,0.5);}
/** The 4th value reprensent alpha/opacity and goes from 0 (transparant) to 1 (opaque)
Hope it helped you
The way to darken a particular colour is to keep the RBG ratios the same but just lower the numbers, if you look at RBG for black its 0,0,0 so by being closer to 0 you get a darker colour.
Hope that sheds a bit of light on how RBG colour system works.
Related
I'd like to use the CSS color function blackness() to make a dark color 20% darker. If I try it out on colorme.io with the color #343a40 and setting blackness to 20% the color does not turn darker, but ends up being this blue color #3380cc. Here is a picture:
So is blackness(%) the right function and is there perhaps a different way to apply it to achieve the result I'm looking for. I may want to take a spectrum of color and make them all 20% darker and 40% darker ...
css hsl() may help you.
343a40 = hsl(210, 10%, 23%)
The last 23% is lightness.
https://www.w3schools.com/colors/colors_picker.asp?colorhex=343a40
I ended up using shade(%) instead of blackness() and tint(%) instead of lightness. The changes were committed to this repository file in case anyone wants to see a postcss example. Here's a sample:
--color-primary-100: color(var(--color-primary) tint(var(--percentage-40)));
--color-primary-300: color(var(--color-primary) tint(var(--percentage-20)));
--color-primary-500: var(--color-primary);
--color-primary-700: color(var(--color-primary) shade(var(--percentage-20)));
--color-primary-900: color(var(--color-primary) shade(var(--percentage-40)));
Also added a test case here where I used the 700 level color for the hover on Bootstrap buttons.
I have currently have a hex value on the frontend that I need to lighten and darken with inline styling. I'm currently attempting to use the css lighten and darken feature like so,
style={{ backgroundColor: lighten(color, 10 %)}}>
but jsx does not like this.
Is there another way to do this? In this post the person suggested using scss but I can't hard code the value into css because I'm fetching it from a database.
This is not really an answer, since it doesn't directly solve your problem or answer what you originally is asking for. But... I don't have 50 rep to post a comment, and I do think this might help.
I don't believe CSS have lighter and darker methods.
Hexdecimal is a 16 based number, ABCDEF corresponds to 11,12,13,14,15,16. For example AA would be 11*11 and FF would be 16*16, minus 1 for 0.
Hexdecimal color codes are 3 numbers, for example white #FFFFFF(ff,ff,ff) would be: 16*16=256th number, or 255 (0 is the first number).
The darker the higher the number. Which means... white is the darkest color and black is the lightest color.
Once you have your hexdecimal color value:
var red = parseInt(hexdecimal[1] + hexdecimal[2],16);
var green = parseInt(hexdecimal[3] + hexdecimal[4],16);
var blue = parseInt(hexdecimal[5] + hexdecimal[6], 16);
then just add to the color value if you want lighter and subtract for darker.
Here is a quick fiddle I just made:
https://jsfiddle.net/3b57L8ss/
Hope this helps you.
You can translate in HSL format and edit Lightness and Saturation.
Ready solution: https://github.com/degtyarev-artyom/lightness-saturation-css-in-js
So lets say I have some code in as3, and it requires a given color (Current one is 0x701100 for example) but instead of giving it a hex color code, I want it to be transparent, aka no color, aka see through, you get what I mean.
This is basically the line of code that determines what color it is: super(0x701100, 0x8D1500); and well the 0x8D1500 represents some other things color, but all I want is the 0x701100 to be transparent/not show.
The color 0x701100 is already "transparent" in that it has no value for an alpha channel. It's the same as 0x00701100. A value such as 0xff701100 would represent a fully opaque color, and 0x80701100 would be about 50% transparent. Obviously, the problem is that your super() method does not support rendering transparency from the hex color.
Natively in chrome/firefox, hovering over an element shows its title with a yellow background with black text.
Does anyone know the exact HEX or RGB colors for each?
thanks,
tim
Took a screen capture, opened it in photoshop, used the color picker to find the values.
In OSX/Chrome the tooltip yellow background is:
#ffffca
In OSX/Chrome the tooltip text is:
#000023
In OSX/FF the tooltip yellow background is:
#feffcd
in OSX/FF the tooltip text is:
#000
There are actually minor variations at some points in the Chrome bg, it's not a purely solid color. I'm not sure what would cause that anomaly. But the hex value I took was the most consistent, and any variations are negligible anyway.
Text is of course antialiased, and values were taken from what I perceived to be the darkest area of the text, which would correspond to its actual RGB/HEX value.
Hexidecimal color value for Windows tooltip background:
FFFFE1
Hexidecimal color value for Linux:
F6F6B9
RGB color value for Windows tooltip background:
(255,255,225)
RGB color value for Linux tooltip background:
(246,246,185)
From RGB space, you convert to Hunter-Lab space, use L condition(>0.5) to set the appropriate value,
http://dataanalysers.com/00ff00
Here I have an arc with some transparency applied to one of the two gradients its using:`
ctx.arc(mouseX,mouseY,radius,0, 2*Math.PI,false);
var grd=ctx.createRadialGradient(mouseX,mouseY,0,mouseX,mouseY,brushSize);
grd.addColorStop(1,"transparent");
grd.addColorStop(0.1,"#1f0000");
ctx.fillStyle=grd;
ctx.fill();
Is there a way to now give the entire arc some transparency affecting only the arc and none of the rest of the canvas?
Thanks
Unlike SVG or HTML, there is no layering or grouping on an HTML Canvas. You can't wrap your arc/gradient in another lower-opacity element; you must propagate opacity (or tinting, or whatever) changes down to the end properties directly.
Your color #1f0000 is equivalent to rgb(31,0,0); use rgba to lower the opacity of this particular color stop.
var opacity = 0.55; //55% visible
grd.addColorStop(1,'transparent');
grd.addColorStop(0.1,'rgba(31,0,0,'+opacity+')');
You could make the color stop at the end an rgba color and give it transparency that way.