Color Hexcode to RGB conversion
Is there any css only way to convert the hex value of a color code to RGB value so that I can use alpha value with it?
13 Replies
https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb you have to use JavaScript
Stack Overflow
RGB to hex and hex to RGB
How to convert colors in RGB format to hex format and vice versa?
For example, convert '#0080C0' to (0, 128, 192).
css only ? right now no but in the future there will be
Thanks for solution @z- ::theProblemSolver:: but looking for css only solution.
Thanks @Mannix
You have to use JavaScript. I'm really not sure how you're inputting the hex to then want to turn it into RGB without already using JavaScript
You can use alpha in hex already by using
#ffffff80 for instance for white half opacity. Generally when using CSS variables you'll use --primary: 236 135 192; to then use in places and to do things like apply opacity to it and it's never needed as hexThe problem is I am receiving hexcode in CSS custom property so can't add alpha with hex in CSS without JS. and I can't receive RGB value in CSS variables that's a limitaion. I know getting RGB value will solve all my problems.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix it's quite newish
color-mix() - CSS: Cascading Style Sheets | MDN
The color-mix() functional notation takes two values and returns the result of mixing them in a given colorspace by a given amount.
So this doesn't convert hex into rgb but it allows you to apply alpha to it. If using hex is unavoidable
you don't need all that
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
just add the alpha as an hex value
0 = 00, 1 = FF
if you want 0.5 opacity, use 7F
if you want to use variables, you have to use the color-mix
Wow I did not even know color-mix existed. Such a convenient feature
Thanks @z- ::theProblemSolver:: I can solve my issue with color-mix.