0

I want to get first (#00ffff) and last (#ff00ff) color of hex codes by using jquery...

Tried below without luck :(

jsFiddle

var myFirstColor = $('.gradient').css('background').split('linear-gradient')[0];
var mySecondColor = $('.gradient').css('background').split('linear-gradient')[1];

$('#firstColor').text(myFirstColor);
$('#secondColor').text(mySecondColor);
.gradient{background: linear-gradient(90deg, #00ffff 0%, #ff00ff 100%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <div class="gradient">Gradient colors</div>
<div>First color : <span id="firstColor"></span></div>
<div>Second color : <span id="secondColor"></span></div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Reddy
  • 1,477
  • 29
  • 79

1 Answers1

1

Try some regular expressions and number to hex

The computed values are in rgb format

I get the background-image instead of background since FX does not return expected string in background

Added support for RGBA but I decided to ignore transparency

const num2hex = num => ("0" + num.toString(16)).slice(-2)
const rgb2hex = rgb => "#" + rgb.split(",").slice(0,3).map(str => num2hex(+str)).join(""); // ignore tranparency
const getColors = selector => {
  const computed = $(selector).css('background-image');
  // console.log(computed)
  const [myFirstColor, mySecondColor] = computed.matchAll(/, rgb(?:a)?\((.+?)\)/g)
  return [rgb2hex(myFirstColor[1]),rgb2hex(mySecondColor[1])]
}
let colors = getColors(".gradient1")
$('#firstColor1').text(colors[0]).css({"background-color":colors[0]});
$('#secondColor1').text(colors[1]).css({"background-color":colors[1]});
colors = getColors(".gradient2")
$('#firstColor2').text(colors[0]).css({"background-color":colors[0]});
$('#secondColor2').text(colors[1]).css({"background-color":colors[1]});
.gradient1 {
  background-image: linear-gradient(90deg, #00ffff 0%, #ff00ff 100%);
}

.gradient2 {
  background-image:  linear-gradient(to right, rgba(255,0,0,0), rgba(0,255,0,1));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="gradient1">Gradient colors</div>

<h2>Gradient1</h2>
<div>First color : <span id="firstColor1"></span></div>
<div>Second color : <span id="secondColor1"></span></div>
<hr>
<div class="gradient2">Gradient colors</div>
<h2>Gradient2</h2>
<div>First color : <span id="firstColor2"></span></div>
<div>Second color : <span id="secondColor2"></span></div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • You need to target `background-image`, all browsers don't expose the computed value on the `background` shorthand the same way. Also, note that this would fail in case there is alpha in the color. – Kaiido Mar 02 '21 at 08:00
  • 3
    `.css("background")` this would fail in e.g Firefox – Kaiido Mar 02 '21 at 08:02
  • 1
    I think you got the transparency wrong, it's not a 0-255 value but a 0-1 value, you need to multiply it by 255. – Kaiido Mar 02 '21 at 08:33
  • Almost, `num2hex` doesn't handle floats, that you will certainly have with alpha. `num2hex = num => num.toString(16).padStart(2, "0");` would make it work, but wouldn't add the heading `0` in cases like `0.01` where the digit before the decimals is less than 2 chars... – Kaiido Mar 02 '21 at 08:42
  • Actually I need a lookup table because hex 80 would be 50% transparency or 0.5 – mplungjan Mar 02 '21 at 08:46
  • Solved it. I will ignore transparency since OP wanted the color – mplungjan Mar 02 '21 at 08:49