Chrome Dev Tools RGBA/HSL Conversion to some new format
but now it converts to some unrecognized format rgb(28 25 89 / 86%).
This is the new format as defined in the specification
rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) |
rgb( <number>{3} [ / <alpha-value> ]? )
<alpha-value> = <number> | <percentage>
You should get used to it now but you can easily convert to the old format like below:
rgb(28 25 89 / 86%) ---> rgba(28,25,89,0.86)
All you have to do is to add the comma seperation and transform the percentage of the alpha channel to a number between 0
and 1
Chrome DevTools converts all HEX Colors to RGB
Step 1, click the gear icon
Step 2, change Color format
Original answer
Open Chrome DevTools panel:
Click 3 dots icon at the far right corner, select Settings, and in the Preferences panel find Elements > Color format, select the option you wish to have, As authored is the default option.
Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?
As per the spec:
If the value is translucent, the computed value will be the
rgba()
corresponding one. If it isn't, it will be thergb()
corresponding one.
Meaning that no matter what is your input, the computed value always results in either rgb
or rgba
.
So, answering your question: yes, it is standard behaviour and no, you can't use hex or hsl as it will be computed back to rgba.
HSL to RGB color conversion
Found the easiest way, python to the rescue :D
colorsys.hls_to_rgb(h, l, s)
Convert the color from HLS coordinates to RGB coordinates.
How to change color format in Firefox Dev Tools?
For those coming across this later, like I did: it has now shipped. You can change colour by holding Shift and clicking the colour sample (i.e. the circle filled with the colour).
Box-shadow property from inspect
It seems to work like this:
box-shadow: rgba(13, 13, 13, 0.1) 0px 0.25rem 0.375rem 0px;
RGB to HSL conversion
I've been reading several wiki pages and checking different calculations, and creating visualizations of RGB cube projection onto a hexagon. And I'd like to post my understanding of this conversion. Since I find this conversion (representations of color models using geometric shapes) interesting, I'll try to be as thorough as I can be. First, let's start with RGB.
RGB
Well, this doesn't really need much explanation. In its simplest form, you have 3 values, R, G, and B in the range of [0,255]. For example, 51,153,204
. We can represent it using a bar graph:
RGB Cube
We can also represent a color in a 3D space. We have three values R
, G
, B
that corresponds to X
, Y
, and Z
. All three values are in the [0,255]
range, which results in a cube. But before creating the RGB cube, let's work on 2D space first. Two combinations of R,G,B gives us: RG, RB, GB. If we were to graph these on a plane, we'd get the following:
These are the first three sides of the RGB cube. If we place them on a 3D space, it results in a half cube:
If you check the above graph, by mixing two colors, we get a new color at (255,255), and these are Yellow, Magenta, and Cyan. Again, two combinations of these gives us: YM, YC, and MC. These are the missing sides of the cube. Once we add them, we get a complete cube:
And the position of 51,153,204
in this cube:
Projection of RGB Cube onto a hexagon
Now that we have the RGB Cube, let's project it onto a hexagon. First, we tilt the cube by 45° on the x
, and then 35.264° on the y
. After the second tilt, black corner is at the bottom and the white corner is at the top, and they both pass through the z
axis.
As you can see, we get the hexagon look we want with the correct hue order when we look at the cube from the top. But we need to project this onto a real hexagon. What we do is draw a hexagon that is in the same size with the cube top view. All the corners of the hexagon corresponds to the corners of the cube and the colors, and the top corner of the cube that is white, is projected onto the center of the hexagon. Black is omitted. And if we map every color onto the hexagon, we get the look at right.
And the position of 51,153,204
on the hexagon would be:
Calculating the Hue
Before we make the calculation, let's define what hue is.
Hue is roughly the angle of the vector to a point in the projection, with red at 0°.
... hue is how far around that hexagon’s edge the point lies.
This is the calculation from the HSL and HSV wiki page. We'll be using it in this explanation.
Examine the hexagon and the position of 51,153,204
on it.
First, we scale the R, G, B values to fill the [0,1] interval.
R = R / 255 R = 51 / 255 = 0.2
G = G / 255 G = 153 / 255 = 0.6
B = B / 255 B = 204 / 255 = 0.8
Next, find the max
and min
values of R, G, B
M = max(R, G, B) M = max(0.2, 0.6, 0.8) = 0.8
m = min(R, G, B) m = min(0.2, 0.6, 0.8) = 0.2
Then, calculate C
(chroma). Chroma is defined as:
... chroma is roughly the distance of the point from the origin.
Chroma is the relative size of the hexagon passing through a point ...
C = OP / OP'
C = M - m
C = 0.8- 0.2 = 0.6
Now, we have the R
, G
, B
, and C
values. If we check the conditions, if M = B
returns true for 51,153,204
. So, we'll be using H'= (R - G) / C + 4
.
Let's check the hexagon again. (R - G) / C
gives us the length of BP
segment.
segment = (R - G) / C = (0.2 - 0.6) / 0.6 = -0.6666666666666666
We'll place this segment on the inner hexagon. Starting point of the hexagon is R (red) at 0°. If the segment length is positive, it should be on RY
, if negative, it should be on RM
. In this case, it is negative -0.6666666666666666
, and is on the RM
edge.
Next, we need to shift the position of the segment, or rather P₁
towars the B
(because M = B
). Blue is at 240°
. Hexagon has 6 sides. Each side corresponds to 60°
. 240 / 60 = 4
. We need to shift (increment) the P₁
by 4
(which is 240°). After the shift, P₁
will be at P
and we'll get the length of RYGCP
.
segment = (R - G) / C = (0.2 - 0.6) / 0.6 = -0.6666666666666666
RYGCP = segment + 4 = 3.3333333333333335
Circumference of the hexagon is 6
which corresponds to 360°
. 53,151,204
's distance to 0°
is 3.3333333333333335
. If we multiply 3.3333333333333335
by 60
, we'll get its position in degrees.
H' = 3.3333333333333335
H = H' * 60 = 200°
In the case of if M = R
, since we place one end of the segment at R (0°), we don't need to shift the segment to R if the segment length is positive. The position of P₁
will be positive. But if the segment length is negative, we need to shift it by 6, because negative value means that the angular position is greater than 180° and we need to do a full rotation.
So, neither the Dutch wiki solution hue = (g - b) / c;
nor the Eng wiki solution hue = ((g - b) / c) % 6;
will work for negative segment length. Only the SO answer hue = (g - b) / c + (g < b ? 6 : 0);
works for both negative and positive values.
JSFiddle: Test all three methods for rgb(255,71,99)
JSFiddle: Find a color's position in RGB Cube and hue hexagon visually
Working hue calculation:
console.log(rgb2hue(51,153,204));console.log(rgb2hue(255,71,99));console.log(rgb2hue(255,0,0));console.log(rgb2hue(255,128,0));console.log(rgb2hue(124,252,0));
function rgb2hue(r, g, b) { r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b); var min = Math.min(r, g, b); var c = max - min; var hue; if (c == 0) { hue = 0; } else { switch(max) { case r: var segment = (g - b) / c; var shift = 0 / 60; // R° / (360° / hex sides) if (segment < 0) { // hue > 180, full rotation shift = 360 / 60; // R° / (360° / hex sides) } hue = segment + shift; break; case g: var segment = (b - r) / c; var shift = 120 / 60; // G° / (360° / hex sides) hue = segment + shift; break; case b: var segment = (r - g) / c; var shift = 240 / 60; // B° / (360° / hex sides) hue = segment + shift; break; } } return hue * 60; // hue is in [0,6], scale it up}
Related Topics
How to Have a Horizontal Multiple Colour Gradient on Text Using CSS3/HTML 5
Trouble Having CSS Order (Flex Box) Work in an Email
CSS Transition on an Initially Hidden Elemement
Variable Sized Column with Ellipsis in a Table
How to Remove a Specific Bullet Point Within a Ul in CSS
Excluding an Element from Nth-Child Pattern
Applying CSS on Drawn Canvas Elements
Overriding Body Background Color in Angular 7
Make Divs of Different Heights Fill Vertical Space on New Line
Font Awesome 5 Pseudo-Class Not Working with My Kit
CSS - Increasing Size of Holder or What Ever Its Called
MVC Twitter Bootstrap Unobtrusive Error Handling