Vuejs Adobe color clone part 1.

I come back with few changes in my attention to recreate Adobe color. I was struggling with making every component update slider separated. Then I decide to use Vuex with Vuex magic and Watch magic I finally made it (Yayyyyyyy ? ?). For now, I have onl…

I come back with few changes in my attention to recreate Adobe color. I was struggling with making every component update slider separated. Then I decide to use Vuex with Vuex magic and Watch magic I finally made it (Yayyyyyyy ? ?). For now, I have only the easiest part done Shades but the concept now is the same and simple.

If you check line 56 this is when beauty start I made myself a little function called hsltorgb.

hsltorgb: function(hslcolval,changevalue) {
      h = hslcolval[0]+changevalue[0];
      s = hslcolval[1]+changevalue[1];
      l = hslcolval[2]+changevalue[2];

This function takes 2 arrays as arguments. The first array is the HSL value of the color you changing at this moment and the array looks like this [Hvalue,Svalue,Lvalue] and the second array is changed I want in the next color boxes.
It will be a positive number if I want to add some number and a negative number if I want to subtract value for example [0,1,-1],
if I use this array for changevalue H will stay the same if S is 50 it will become 51 and if L is 50 it will become 49.

This is the color wheel.
Color wheel

Now when you check the wheel you see we have a circle (360 degrees who don’t know ?) and if we have red color (hsl(0,100%,50%)) and I want to get the green color I just need a pass to my function [0,100,50], [120,0,0] because green is on 120 degrees if I want blue I need 240.

Notice: I still working on this and for now it doesn’t work so well except if we change the first color box but soon I will make it work with any color box.



If you like my work feel free to leave me like ♥


Print Share Comment Cite Upload Translate
APA
Bajro | Sciencx (2024-03-29T13:42:59+00:00) » Vuejs Adobe color clone part 1.. Retrieved from https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/.
MLA
" » Vuejs Adobe color clone part 1.." Bajro | Sciencx - Friday April 30, 2021, https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/
HARVARD
Bajro | Sciencx Friday April 30, 2021 » Vuejs Adobe color clone part 1.., viewed 2024-03-29T13:42:59+00:00,<https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/>
VANCOUVER
Bajro | Sciencx - » Vuejs Adobe color clone part 1.. [Internet]. [Accessed 2024-03-29T13:42:59+00:00]. Available from: https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/
CHICAGO
" » Vuejs Adobe color clone part 1.." Bajro | Sciencx - Accessed 2024-03-29T13:42:59+00:00. https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/
IEEE
" » Vuejs Adobe color clone part 1.." Bajro | Sciencx [Online]. Available: https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/. [Accessed: 2024-03-29T13:42:59+00:00]
rf:citation
» Vuejs Adobe color clone part 1. | Bajro | Sciencx | https://www.scien.cx/2021/04/30/vuejs-adobe-color-clone-part-1/ | 2024-03-29T13:42:59+00:00
https://github.com/addpipe/simple-recorderjs-demo