DEV Community

Bajro
Bajro

Posted on

3 2

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 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];
Enter fullscreen mode Exit fullscreen mode

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 β™₯

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay