Jeśli potrzebujesz zamienić wartość RGB na HSV lub odwrotne albo potrzebny Ci heksagonalny zapis koloru podanego w RGB i nie wiesz jak to zrobić, to w tym poście znajdziesz kilka funkcji, które Ci w tym pomogą.

Szukałem trochę w sieci, ale nic nie mogłem znaleźć. To znaczy znalazłem kilka rozwiązań, ale wyniki zwracane przez znalezione funkcje były dalekie od tych, które pokazywał Photoshop. Moim celem było natomiast uzyskanie takiej konwersji, jaka jest w fotoszopowskim color pickerze. Stworzyłem więc własny zestaw funkcji w samym JS, którymi dzielę się z wami. Być może komuś się kiedyś przydadzą:

Decimal to HEX

function d2h(d) {
   var d = (n<256 && n>-256) ? Math.abs(n).toString(16) : 0;
   return (d.length < 2) ? "0" + d : d;
}

Prosta funkcja, która wartość liczbową zamienia na heksagonalną. Argumentami funkcji są liczby całkowite z przedziały (-255, 255), dla których funkcja zwraca heksagonalny zapis wartości bezwzględnej argumentu. Generalnie podawanie liczby ujemnej jest bez sensu, ale wbudowałem taki mechanizm zabezpieczający, więc jeśli ktoś poda ujemną liczbę z przedziału, to funkcja przed zwróceniem wartości zmieni jej znak. To samo tyczy się ułamków – jeśli ktoś, z jakiś niezrozumiałych przyczyn zechce podać liczbę zmiennoprzecinkową, to funkcja przed zwróceniem wartości zaokrągli argument. Jeśli argument nie należy do przedziały, wówczas funkcja zawsze zwróci 00.

Przykład:
d2h(29); //zwraca '1d'

HEX to decimal

function h2d (h) {
   var h = (h.charAt(0) == '#') ? h.substr(1, h.length) : h;
   if (h.length < 6) {
      var df = 6-h.length;
      for (var i=0; i<df; i++) {
         h = '0' + h;
      }
   }
   var R = parseInt(h.slice(0,2), 16),
       G = parseInt(h.slice(2,4), 16),
       B = parseInt(h.slice(4,6), 16);

   return [R,G,B];
}

Argumentami dla tej funkcji może być dowolny kolor w zapisie heksagonalnym. Funkcja zwraca wartości R dla koloru czerwonego, G, dla koloru zielonego i B dla koloru niebieskiego. Funkcja przyjmuje argumenty w postaci łańcucha znaków (typ zmiennej string). Dozwolony jest zarówno zapis z haszem (#) jak i bez niego. Dla łańcucha znaków krótszego niż 6 (bez hasza) funkcja do zwracanej wartości dodaje odpowiednią liczbę zer, jeśli łańcuch jest dłuższy niż wymagane 6 znaków, dodatkowe znaki są ignorowane.

Przykłady:
h2d('#ffffff'); //zwraca 255, 255, 255
h2d('000000'); //zwraca 0, 0, 0
h2d('#fff'); //zwraca 0, 15, 255

RGB to HSV

function rgb2hsl(r,g,b) {

   r = (r>255 || r<0) ? 0 : r,
   g = (g>255 || g<0) ? 0 : g,
   b = (b>255 || b<0) ? 0 : b;

   var M 	= Math.max(r,g,b),
       m 	= Math.min(r,g,b),
       C	= M-m,
       h,H,S,B;				 		

   if (C == 0) {
      h=H=0;
   } else {
      switch(M) {
          case r: h = (g==b) ? 0 : ((g-b)/C)%6; break;
          case g: h = (b-r)/C +2; break;
          case b: h = (r-g)/C +4; break;
      }
      H = (h>0) ? Math.round(h*60) : 360 + Math.round(h*60);
   }

   S = (M>0) ? Math.round(100 - (m/M)*100) : 0;
   B = Math.round(M*100/255);

    return [H, S, B];
}

Funkcja powstała na podstawie metod konwersji opisanych w Wiki. Argumentami funkcji są liczby całkowite z przedziału (0,255). Argumenty spoza tego przedziału traktowane są jako 0. Funkcja zwraca trzy wartości – H (hue – barwa), S (saturation-nasycenie), V (value – wartość).

Przykłady:
rgb2hsl(255,255,255); //zwraca 0, 0, 100
rgb2hsl(333,333,333); //zwraca 0, 0, 0
rgb2hsl(191,40,116); //zwraca 330, 79, 75

RGB to HSV

function hsl2rgb(h, s, l) {

   var r, g, b, r1, g1, b1, C, h1, X, m;
   s /= 100;
   l /= 100;
   C 	= l * s;
   h1 	= h/60;
   X 	= C*(1-Math.abs(h1%2 - 1));

   if (h < 0) {
      r1 = g1 = b1 = 0;
   } else if (h1>=0 && h1 <1) {
      r1 = C;
      g1 = X;
      b1 = 0;
   } else if (h1>=1 && h1<2) {
      r1 = X;
      g1 = C;
      b1 = 0;
   } else if (h1>=2 && h1<3) {
      r1 = 0;
      g1 = C;
      b1 = X;
   } else if (h1>=3 && h1<4) {
      r1 = 0;
      g1 = X;
      b1 = C;
   } else if (h1>=4 && h1<5) {
      r1 = X;
      g1 = 0;
      b1 = C;
   } else if (h1>=5 && h1<6) {
      r1 = C;
      g1 = 0;
      b1 = X;
   }

   var m = l-C,
       R = Math.round( (r1+m)*255 ),
       G = Math.round( (g1+m)*255 ),
       B = Math.round( (b1+m)*255 );

   return [R, G, B];
}

Ta funkcja również powstała na podstawie metod konwersji opisanych w Wiki. Argumentami funkcji liczby całkowite z przedziału dla h (0,359), dla s i l (0,100). Nie ma tutaj żadnych zabezpieczeń, więc dziwne argumenty równa się dziwne wartości. Funkcja zwraca trzy wartości odpowiadające RGB.

Przykłady:
rgb2hsl(359,0,0); //zwraca 0, 0, 0
rgb2hsl(0,0,0); //zwraca 255, 0, 0
rgb2hsl(191,40,116); //zwraca 330, 79, 75

Podobne wpisy:

  • Brak podobnych wpisów.