From what I understand is that the minimum values for this CSS command is:
rgba(0, 0, 0, 0); /equivalent hex rgba #0000
and the maximum values
rgba(255, 255, 255, 1); /equivalent hex rgba #FFFF
Now, say we look at the r: its decimal is 255, and its hex is #F, which is easily expanded/converted to #FF.
#FF = 255
On the computer side, hex reads 0 to F (Base 16). On the human side, the decimal input reads 0.0 to 1.0 (Base 10). Essentially, there is only 10 acceptable inputs out of a possible 16.
So my question, what happens with the other 6 unobtainable input values? How does the alpha channel translate?
If you are looking for finer grained opacity settings you may use Alpha values with more than one decimal place. For example RGBA(255,255,255,0.05) will yield the expected results as a very light tint of White.
The answer was given here: Html rgba color opacity?
If you are using the rgba notation in CSS, remember that the last digit is used for opacity. So it's value it's not counted in the color rgb.
rgba(255, 255, 255, 1); The first 3 digits are for the rgb color value and the fourth digit 1 is for opacity and it could be also decimal like 0.5 for example.
Remember that IE8 does not support this notation.
http://caniuse.com/#search=rgba
Related
This question already has answers here:
CSS hexadecimal RGBA?
(14 answers)
Closed 1 year ago.
How to apply opacity in Hex colors ?
I am working with CSS Hex colors. I am trying to apply opacity in Hex colors. I need #78909c with opacity 0.2.
The hex representation of colors supports the alpha channel to set opacity.
so, take any color in hex e.g. #ffffff and append 00 to ff (in hexadecimal representation) for opacity, i.e. #ffffff00 - #ffffffff
for your color: #78909c33
20% implies 33 in hex
Here is a demo
Reference: Hexadecimal notation
HEXA - #RRGGBBAA
There's a relatively new way of doing transparency, it's called HEXA (HEX + Alpha). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA
I am not sure about its browser support for now but, you can check the DRAFT Docs for more information.
§ 4.2. The RGB hexadecimal notations: #RRGGBB The syntax of a
is a token whose value consists of 3, 4, 6,
or 8 hexadecimal digits. In other words, a hex color is written as a
hash character, "#", followed by some number of digits 0-9 or letters
a-f (the case of the letters doesn’t matter - #00ff00 is identical to
#00FF00).
8 digits The first 6 digits are interpreted identically to the 6-digit
notation. The last pair of digits, interpreted as a hexadecimal
number, specifies the alpha channel of the color, where 00 represents
a fully transparent color and ff represent a fully opaque color.
Example 3 In other words, #0000ffcc represents the same color as
rgba(0, 0, 100%, 80%) (a slightly-transparent blue).
4 digits This is a shorter variant of the 8-digit notation, "expanded"
in the same way as the 3-digit notation is. The first digit,
interpreted as a hexadecimal number, specifies the red channel of the
color, where 0 represents the minimum value and f represents the
maximum. The next three digits represent the green, blue, and alpha
channels, respectively.
For the most part, Chrome and Firefox have started supporting this: enter image description here
I was trying a simple demo where I gave colors to elements in hsl. From all my experience I know that 0(ZERO) in CSS is unitless. If you want to specify 0 as a value, you may leave the unit.
This however doesn't seem to be the case with hsl/hsla. On both Chrome and Firefox, it results in invalid property value.
A tangentially related question was this but that contains the answer that zero should be unitless referring to spec.
Any bug with hsla(0, 0%, 0%, 0), becoming hsla(0, 0, 0, 0)? (missing percent sign)
hsl(0,0,0) // error
hsl(0,0%,0) // error
hsl(0,0,0%) // error
Is it specifically designed to work with units beside zero? Are there any other properties like this where having a unit beside zero is a must?
A 0 <length> in CSS is unitless, not any 0, otherwise disambiguation would not be possible (e.g. in shorthands). This is a <percentage>, not a <length>.
Specification:
http://www.w3.org/TR/css-values/#percentages
http://www.w3.org/TR/css-values/#lengths
in general hsl is a concept for defining a color apart from CSS;
the three paramaters you can set are Hue Saturation Lightness:
Hue Think of a color wheel. Setting a value is like setting an angle degree.
As HSL-CSS-value it's a unitless value ; positive an negative are supprted (ie. 360 == -720).
Saturation - 0% is completely denatured (grayscale). 100% is fully saturated (full color).As HSL-CSS-value a percentage value is needed (you can specify any % value but it's range is 0% through 100%).
Lightness - 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.As HSL-CSS-value you have the same rule as saturation.
the optional alpha-value is a value form 0 to 1 that defines the opacity of color .
here's a link to a good article for additional info.
EDIT:
You're assumption that the color property can be set to a length-% unit value is wrong - like other CSS properties that accept only a certain range of values color property has it's own options ( hsl is one); when the parser gets to an hsl or hsla value the rules are the one above (probably in the future the parser will fix it for you but for now this is how it works ;)
Let's say there is a LESS variable representing a CSS color in hex
#primary-color: #0070B8;
Somewhere else in the LESS code, #primary-color is operated on like this.
#new-color: #primary-color + 10%;
#new-color is #0a7ac2.
How did LESS derive the new color? I tried looking at rgb and hsl versions of the #primary-color versus the #new-color, but I don't see the values being a 10% difference in any scale. It looks like it added an absolute value of 10 to the R/G/B component of the hex color, but that seems counter-intuitive. (I presume SASS works similarly.)
#0070B8
0,112,184
(0,112,184)
rgb(0,112,184)
rgb(0%,44%,72%)
hsl(203° 100% 36%)
#0a7ac2
10,122,194
(10,122,194)
rgb(10,122,194)
rgb(4%,48%,76%)
203° 90% 40%
(EDIT: I didn't write this LESS code. I saw it in a repo, and I was trying to figure how this worked, because I couldn't find anything in the LESS documentation that explained the percentage when it's used in a + operation. Bolded text was added by another user.)
See Language Features > Overview > Operations.
Assuming it's actually #new-color: #primary-color + 10%; (and = is just a typo in your Q) it goes like this:
if the first operand of an arithmetic expression is a color any subsequent operands are converted to colors too.
scalar numeric values (e.g. 10%) are converted to a color as value -> rgb(value, value, value). I.e. 10% is converted to rgb(10, 10, 10) color value (% is irrelevant in this case and it will be the same for 10, 10px, 10whatever etc.)
arithmetic operations apply to color operands on a per-RGB-channel basis.
So in summary it's:
#0070b8 -> rgb(0, 112, 184)
10% -> rgb(10, 10, 10)
rgb(0, 112, 184) + rgb(10, 10, 10) ->
rgb(0 + 10, 112 + 10, 184 + 10) ->
rgb(10, 122, 194)
rgb(10, 122, 194) -> #0a7ac2
Or yet in other words, #0070B8 + 10 is a just shorthand for #0070b8 + #0a0a0a hence the #0a7aC2 result. (And yet again % unit has no effect there and should be removed to make it less confusing).
To answer:
It looks like it added an absolute value of 10 to the R/G/B component of the hex color, but that seems counter-intuitive.
See Strict Units.
Basically it is the same as 10px + 10% for example, it will result in 20px (and not in 10px + 10px * 0.1). Same way CSS calc(10px + 10%) is not equal to (10px + 10px * 0.1) though Less arithmetic expressions are not equal to those of calc too since the compiler has no all that information about current element state a browser has.
Yes, % arithmetic is a typical confusion in Less, but note that percentage values in CSS always refer to a value set elsewhere and are never considered to be some kind of "ratio value" on their own. E.g. width: 50% -> 50% of the container width and it's not equal to width: 0.5 or something. So in Less you never assume 10% in an arithmetic expression can refer to some previous value of the same expression and/or being implicitly converted to a unitless ratio (e.g. it's never 10% -> 0.1).
I actually think it just added 10 to each RGB value, because... 10% of what? My guess is that it just used 10 instead of 10%.
What you probably actually want is to use lighten(#0070B8, 10%) which would add 10% (of 255 I think) to each RGB component of the color.
Side note, there are other "math-like" things in LESS that are strange like that too. For example, 10px + 10em is a value that can't be calculated, so I believe it will just add 10+10 and give it the first unit of measure,which would result in 20px.
rgb(0,112,184)
rgb(10,122,194)
Seems you have used the syntax incorrectly. You should have used
lighten(#******, 10%);
or
darken(#******, 10%);
And so on. Incorrect Syntax has just resulted in LESS adding 10 to each RGB value
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
3 digit Hex color code
Using 3-digit color codes rather than 6-digit color codes in CSS
I have a color that has the following RGB values:
255-223-145
I see that lots of pages have the colors with just three digits, for example:
color: #999;
I wonder why, and how would I convert these rgb values to a three digit color.
Thanks
It isn't a three digit colour, #999 is merely shorthand for #999999 so unless your numbers repeat like #223322 (#232) you can't cut it down.
The question has two bits, to convert hex to rgb, use a tool like this or this online.
#999 is shorthand for #999999, and #ABC is short for #AABBCC. CSS colors can be shortened if you don't need the full six hex digits.
Your color in hex is #FFDF91. The closest three-digit color would be #FD8 (#FFDD88). Close, though not identical.
You can write shortly if you have 2 same digits
FF -> F
99 -> 9
So #999 = #999999 and #FFF = #FFFFFF
I'm aware that the method to convert a 3 digit hex css color to 6 digit code is by duplicating each hex digit once, as below.
#ABC === #AABBCC
Why does it work this way? Why isn't #ABC equivalent to #A0B0C0?
From the W3C spec:
The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.
You can read more about it here: http://www.w3.org/TR/css3-color/
The reason is to be able to code the full range of colors (able to do both the highest and lowest color). For example, if #RGB became #R0G0B0, then #fff would become #f0f0f0, meaning you cannot code white. Conversely, if #RGB became #RfGfBf, then #000 would be #0f0f0f, ruling out black. The system of #RGB = #RRGGBB allows for #000 = #000000 (black) and #fff = #ffffff (white), giving a full range of evenly-spaced colors.
Read more at:
Wikipedia article
W3 Website