i tired testing rgb notation to get a red blue green effect but it didnt work
Which notation did you try?
HEX => #FFFFFF => #fff => white
=> #000000 => #000 => black
RGB => rgb(255, 255, 255) => white
=> rgb(0, 0, 0) => black
HSL => hsl(360, 100, 100) => white
=> hsl(360, 0, 0) => black
1 Like
RGB (255,255 255) and i just goes black or grey it is not nice
Is the comma missing in your code, as well?
If you’re familiar with RGB colors, you can convert to HSL notation using a converter such as this one:
https://www.rapidtables.com/convert/color/rgb-to-hsl.html
As an aside, HSL has less ‘shades’ than RGB.
360 * 101 * 101 => 3672360 => 22-bit color
256 * 256 * 256 => 16777216 => 24-bit color
Converting from RGB will narrow out around 5 different shades into a single HSL value. Not that this is a critical concern, by any stretch.
HSL is more computational than RGB (which is explicitly declarative). For any one hue there are 10 thousand shades we can compute along a continuum for visual effect in a dynamically changing interface skin.
Things like web safe colors are much easier to declare in RGB…
#000000 => #000
#333333 => #333
#666666 => #666
#999999 => #999
#CCCCCC => #ccc
#FFFFFF => #fff
The palette consists of just 216 colors when we mix up the pairs. That’s 6 * 6 * 6. Gotta miss 90’s browsers.
Web safe colors are the place to begin with any design palette. It should not be dialed in and there should not be any gradients. Splits would be okay for visualization. HSL does not fit well into this scenario unless we can accurately compute a web safe color from it. Guess the best way would be convert from RGB to HSL, and not the other way around. Kind of overkill, though.
Bottom line, we choose HSL for more technical reasons than just personal preference. If those technical reasons don’t surface, then don’t reach for HSL. Just use RGB.
Actually, web safe colors are simple to declare in HSL. The Saturation is 100% for all of them; there are only three Hues, 0, 120 and 240; and, we only use six different Luminosity values, 0%, 10%, .., 40%, 50%.
3 Likes
Totally made that much clearer! Thank you!!
1 Like
please is there any way the HSL and RGB can be explained mathematically?
i am understanding the response to an extent but am not understanding how to use a particular number to get a particular color?
RGB is not mathematical, but declarative. There is no computation involved. It is possible to convert between the two but that is rarely if ever necessary.
Hey, thank you alot for the information, I really appreciate…
1 Like
For example 0 is black while 100 is white, it all depends on which colors are connected to which number from 0 to 100 like how 60 is blue, and they show only 5 colors and the 3 numbers to mess with. So by observation of the 5 colors we can conclude that every 20 numbers is one of those colors
In HSL the color is derived from the Hue. Of 360 degrees in a circle, 120 degrees are red hue; 120 degrees are green hue; 120 degrees are blue hue.
The Saturation and Luminosity are percentages. It won’t matter what the hue and saturation is if luminosity is zero. Likewise it won’t matter what the hue and luminosity if saturation is zero.
The total number of colors in the palette range are,
360 * 101 * 101 => 3672360
By comparison, the total number of RGB colors in the palette range are,
2 ** 8 * 2 ** 8 * 2 ** 8 => 2 ** 24 => 16777216A little history that seems missing but may help since it’s the origin of the whole color to print, and eventually screen thing:
Before all us folks and our digital everything we used color separations to print so that colors could be seen from visible light using reflection of the light that is recognized by the cones in your eyes (bars are for depth and black and white if I remember right).
Visible light is filtered on the basis of white, and the color achieved by negation of the Red,Green, and Blue components of that light using all 3 colors each in a pattern, slightly offset.
Print medium used patterns of dots that were overlayed to filter out portions of red and green to then give whatever you looked at a more blue view, as an example that applies relatively when you want red or green and of course to all mixes in between.
Displays “print” to the screen, the idea of “DPI” as part of that whole process and emulating it in the artificial light projected medium, but instead of filtering white light in reflection from a surface as print medium does, they used the same patterning ideas for the projected light from red, green, and blue guns on cathode ray tubes projecting onto the silver on the backside of the CRT, the old “monitors” before we had displays.
As you can figure each color gun achieved its raw color from the suppression of the other 2 colors – just like the dots used in print medium to achieve reflective color – to then create three beams, one of each color, that could be manipulated using dot patterns. That’s why we have clear type and other utilities that clarify the text in our graphics environments today because the system is still using the same ideas to draw the pixels, the same patterning, why 8-8-8 as they overlay is 24 bit color and results in 16 million colors.
Interfacing to manage the control of the beams or projection of the beams in representation is what RGB vs HSL adjustment is addressing, HSL establishing different calculations to achieve the results, and as they’re by different calculations they can be better results for the intended purpose as these use different combinations and patterns and which are better interfaced to the person making color adjustments so they can control the appearance in a way that isn’t foreign to them.
When we did color separations it was with a 5000 kelvin light on the item we’re colorizing through up to 8 different “plates” of film. the 5k light was the emulation of “white light” and we’d use a dot percent measure to determine the saturation of the dots in their R, G, B patterns, which are filtering out their opposing light in reflective medium to achieve the color according to the frequency spectrum and visual appearance.
Sometimes the pattern or “Res,” Res 8 being a very low resolution of dpi that I can’t recall, would have some overlap between the 3 different RGB dot patterns that resulted in adjustment to get the right color, sometimes even changing the Res up or down. I am remembering something like 120 DPI was Res 8 I think? Most high end commercial printing was, agian if I remember right, was around 1600 DPI. I don’t recall if Res scaling went up or down from Res 8.
We had nothing like 4k printing at that time, laser printers of 300 dpi would be usable as a master to print low resolution 4 color printing from… Dolev printers went up to 2400 or 3200 DPI if I remember right, costing around 80,000 dollars up to 500,000 dollars for a full system, and it was usually printing to film that was used to make plates to print onto paper. The machines were made by Scitex, and the color pattern discernment to print, if I remember right, came from dying of textiles and the patterning that happens naturally from cotton materials, at least that was the training in using these systems.
I hope this was helpful and didn’t ever think I’d be writing this out so apologies if I made any significant errors, done from top of my head for work I did 30 years ago.
2 Likes
Thank you that really helped
1 Like
I am new here as I have started today…I read the whole paragraph(common points) but I still did not understand the meaning of hue and saturation…
Please help me…Asap(As soon as possible)
Thank you
Oh…So hue is part where you will choose the colour and satturation is the darkness or we can say the duller or the brighter the colour is…Thank you so mch…I apprectiate it a lot @mtf
The definiteness of a hue is determined by saturation. The higher the saturation, the less color frequencies. In the color spectrum there are hundreds of thousands of hues of Red. Saturation is the width of the spectrum from which a color is derived. The narrower the spectrum, the more the saturation.
Say you are centered on Hue = 0, but saturation is at 25%. That means that the derived color is going to be a mix of all the color frequencies in a fairly wide bandwidth of the color spectrum, over the red hue. There’s a kind of Simpson’s Approximation going on there but it will give us a color in a red hue, though not actual Red. Probably it will begin to resemble gray.
1 Like