Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a function that calculates a lighter/darker color by hex.

On my localhost it runs just fine.. but when I try to build in Angular I get the error:

ERROR in src/app/requests.service.ts:1611:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1611  R = parseInt(R * (100 + percent) / 100);
src/app/requests.service.ts:1612:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1612  G = parseInt(G * (100 + percent) / 100);
src/app/requests.service.ts:1613:17 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
1613  B = parseInt(B * (100 + percent) / 100);
Here is my code:
  adjust(color, percent) {
   var R = parseInt(color.substring(1,3),16);
   var G = parseInt(color.substring(3,5),16);
   var B = parseInt(color.substring(5,7),16);
   R = parseInt(R * (100 + percent) / 100);
   G = parseInt(G * (100 + percent) / 100);
   B = parseInt(B * (100 + percent) / 100);
   R = (R<255)?R:255;
   G = (G<255)?G:255;
   B = (B<255)?B:255;
   var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
   var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
   var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
   return "#"+RR+GG+BB;
I'm calling the function using:
 adjust("#345678", -70)
I also tried defining the function parameters like this:
adjust(color:string, percent:number) {
but it wasn't successful.
Any ideas would be great. Thank you!
                @JaredSmith the function works exactly as I would hope.. The outcome of the function is correct, but when I try to build this is the issue.. I tried Math.floor on each of the parseInt and the function didn't return the correct information
– Simon
                Feb 26, 2021 at 1:21
I ended up figuring out where the issue was.. here is the code that worked:
adjust(color, percent) {
   var R = parseInt(color.substring(1,3),16);
   var G = parseInt(color.substring(3,5),16);
   var B = parseInt(color.substring(5,7),16);
   R = Math.floor(R * (100 + percent) / 100);
   G = Math.floor(G * (100 + percent) / 100);
   B = Math.floor(B * (100 + percent) / 100);
   R = (R<255)?R:255;
   G = (G<255)?G:255;
   B = (B<255)?B:255;
   var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
   var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
   var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
   return "#"+RR+GG+BB;
I had to change the second row of parseInts to Math.floor.
I check your code. The method of parseInt in typescript use is like this.
parseInt(string)
So I change your function like this. You can see below.
function adjust(color:string, percent:number) {
  var R = parseInt(color.substring(1,3),16);
  var G = parseInt(color.substring(3,5),16);
  var B = parseInt(color.substring(5,7),16);
  R = parseInt(R * (100 + percent) / 100 + '');
  G = parseInt(G * (100 + percent) / 100 + '');
  B = parseInt(B * (100 + percent) / 100 + '');
  R = (R<255)?R:255;
  G = (G<255)?G:255;
  B = (B<255)?B:255;
  var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
  var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
  var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
  return "#"+RR+GG+BB;
                There's no need for a hack like this, JS/TS has functions for converting floats to integers.
– Jared Smith
                Feb 26, 2021 at 10:52
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.