HEX vers HSL

Entrée HEX
Exemple
Sortie HSL

Convertisseur HEX en HSL : Convertir facilement et rapidement les codes de couleur HEX en HSL

Si vous cherchez un moyen de convertir les codes de couleur HEX en HSL, vous êtes au bon endroit. Le convertisseur HEX en HSL est un outil en ligne et gratuit qui vous permet de convertir facilement et rapidement n'importe quel code de couleur HEX en codes de couleur HSL, sans dépendance vis-à-vis d'un système ou d'un logiciel. Avec ce convertisseur, vous pouvez facilement convertir les codes de couleur HEX en codes de couleur HSL en quelques clics seulement.

Fonctionnalités de l'outil

  • Outil gratuit et en ligne
  • Aucune dépendance vis-à-vis d'un système ou d'un logiciel
  • Possibilité de vider
  • Possibilité de copier
  • Exemple disponible
  • Sécurité des données, calcul local

Comment utiliser le convertisseur HEX en HSL ?

La conversion des codes de couleur HEX en codes de couleur HSL est facile avec notre convertisseur HEX en HSL. Voici comment utiliser l'outil :

  1. Entrez ou collez le code de couleur HEX dans le champ d'entrée. Par exemple, #ffd500.
  2. Cliquez sur le bouton "Convertir".
  3. Le code de couleur HSL converti apparaîtra dans le champ de sortie. Par exemple, hsl(50,100,50).
  4. Vous pouvez également vider le champ d'entrée ou copier le code de couleur HSL converti dans le presse-papiers à l'aide des boutons respectifs.

Algorithme principal

Le convertisseur HEX en HSL utilise un algorithme simple pour convertir le code de couleur HEX en code de couleur HSL. Voici la formule utilisée par l'outil :

r = parseInt(hex.substring(1, 3), 16) / 255;
g = parseInt(hex.substring(3, 5), 16) / 255;
b = parseInt(hex.substring(5, 7), 16) / 255;
max = Math.max(r, g, b);
min = Math.min(r, g, b);
l = (max + min) / 2;
if (max === min) {
  h = s = 0; // achromatic
} else {
  const d = max - min;
  s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  switch (max) {
    case r:
      h = (g - b) / d + (g < b ? 6 : 0);
      break;
    case g:
      h = (b - r) / d + 2;
      break;
    case b:
      h = (r - g) / d + 4;
      break;
  }
  h /= 6;
}
h = Math.round(h * 360);
s = Math.round(s * 100);
l = Math.round(l * 100);
return `hsl(${h},${s},${l})`;

Exemples dans différents langages de programmation

Voici quelques exemples d'utilisation du convertisseur HEX en HSL dans différents langages de programmation :

Python

def hex_to_hsl(hex_color_code):
    r = int(hex_color_code[1:3], 16) / 255.0
    g = int(hex_color_code[3:5], 16) / 255.0
    b = int(hex_color_code[5:7], 16) / 255.0
    max_value = max(r, g, b)
    min_value = min(r, g, b)
    delta = max_value - min_value
    l = (max_value + min_value) / 2
    if delta == 0:
        h = s = 0
    else:
        if l < 0.5:
            s = delta / (max_value + min_value)
        else:
            s = delta / (2 - max_value - min_value)
        if max_value == r:
            h = (g - b) / delta + (6 if g < b else 0)
        elif max_value == g:
            h = (b - r) / delta + 2
        else:
            h = (r - g) / delta + 4
        h /= 6
    h = int(round(h * 360))
    s = int(round(s * 100))
    l = int(round(l * 100))
    return "hsl({}, {}, {})".format(h, s, l)

# Example usage
hex_code = "#ffd500"
hsl_code = hex_to_hsl(hex_code)
print(hsl_code) # Output: hsl(50, 100, 50)

C

#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <math.h>

char* hex_to_hsl(char* hex_color_code) {
  float r = (float)strtol(hex_color_code+1, NULL, 16) / 255.0;
  float g = (float)strtol(hex_color_code+3, NULL, 16) / 255.0;
  float b = (float)strtol(hex_color_code+5, NULL, 16) / 255.0;
  float max_value = fmaxf(r, fmaxf(g, b));
  float min_value = fminf(r, fminf(g, b));
  float delta = max_value - min_value;
  float h, s, l;
  if (delta == 0) {
    h = s = 0;
  } else {
    if (max_value == r) {
      h = (g - b) / delta + (g < b ? 6 : 0);
    } else if (max_value == g) {
      h = (b - r) / delta + 2;
    } else {
      h = (r - g) / delta + 4;
    }
    h /= 6;
    s = max_value == 0 ? 0 : delta / max_value;
  }
  l = (max_value + min_value) / 2;
  h = round(h * 360);
  s = round(s * 100);
  l = round(l * 100);
  char* hsl_code = (char*) malloc(18 * sizeof(char));
  sprintf(hsl_code, "hsl(%d, %d%%, %d%%)", (int) h, (int) s, (int) l);
  return hsl_code;
}

int main() {
  char* hex_code = "#ffd500";
  char* hsl_code = hex_to_hsl(hex_code);
  printf("%s\n", hsl_code); // Output: hsl(50, 100%, 50%)
  free(hsl_code);
  return 0;
}

JavaScript

function hexToHsl(hexColorCode) {
  let r = parseInt(hexColorCode.substring(1, 3), 16) / 255;
  let g = parseInt(hexColorCode.substring(3, 5), 16) / 255;
  let b = parseInt(hexColorCode.substring(5, 7), 16) / 255;
  let max = Math.max(r, g, b);
  let min = Math.min(r, g, b);
  let delta = max - min;
  let h, s, l;
  if (delta === 0) {
    h = s = 0;
  } else {
    if (max === r) {
      h = ((g - b) / delta) % 6;
    } else if (max === g) {
      h = (b - r) / delta + 2;
    } else {
      h = (r - g) / delta + 4;
    }
    h = Math.round(h * 60);
    if (h < 0) {
      h += 360;
    }
    s = max === 0 ? 0 : delta / max;
  }
  l = (max + min) / 2;
  s = Math.round(s * 100);
  l = Math.round(l * 100);
  return `hsl(${h},${s}%,${l}%)`;
}

// Example usage
let hexCode = "#ffd500";
let hslCode = hexToHsl(hexCode);
console.log(hslCode); // Output: hsl(50,100%,50%)

Java

public class HexToHslConverter {
  public static String hexToHsl(String hexColorCode) {
    float r = Integer.parseInt(hexColorCode.substring(1, 3), 16) / 255.0f;
    float g = Integer.parseInt(hexColorCode.substring(3, 5), 16) / 255.0f;
    float b = Integer.parseInt(hexColorCode.substring(5, 7), 16) / 255.0f;
    float max = Math.max(r, Math.max(g, b));
    float min = Math.min(r, Math.min(g, b));
    float delta = max - min;
    float h, s, l;
    if (delta == 0) {
      h = s = 0;
    } else {
      if (max == r) {
        h = (g - b) / delta + (g < b ? 6 : 0);
      } else if (max == g) {
        h = (b - r) / delta + 2;
      } else {
        h = (r - g) / delta + 4;
      }
      h /= 6;
      s = max == 0 ? 0 : delta / max;
    }
    l = (max + min) / 2;
    h = Math.round(h * 360);
    s = Math.round(s * 100);
    l = Math.round(l * 100);
    return String.format("hsl(%d, %d%%, %d%%)", (int) h, (int) s, (int) l);
  }

  public static void main(String[] args) {
    String hexCode = "#ffd500";
    String hslCode = hexToHsl(hexCode);
    System.out.println(hslCode); // Output: hsl(50, 100%, 50%)
  }
}

PHP

function hex_to_hsl($hex_color_code) {
  $r = hexdec(substr($hex_color_code, 1, 2)) / 255;
  $g = hexdec(substr($hex_color_code, 3, 2)) / 255;
  $b = hexdec(substr($hex_color_code, 5, 2)) / 255;
  $max_value = max($r, $g, $b);
  $min_value = min($r, $g, $b);
  $delta = $max_value - $min_value;
  $h = $s = 0;
  $l = ($max_value + $min_value) / 2;
  if ($delta != 0) {
    if ($max_value == $r) {
      $h = fmod(($g - $b) / $delta, 6);
    } else if ($max_value == $g) {
      $h = ($b - $r) / $delta + 2;
    } else {
      $h = ($r - $g) / $delta + 4;
    }
    $s = $l > 0.5 ? $delta / (2 - $max_value - $min_value) : $delta / ($max_value + $min_value);
  }
  $h = round($h * 60);
  $s = round($s * 100);
  $l = round($l * 100);
  return "hsl($h, $s%, $l%)";
}

// Example usage
$hex_code = "#ffd500";
$hsl_code = hex_to_hsl($hex_code);
echo $hsl_code; // Output: hsl(50, 100%, 50%)

Conclusion

La conversion des codes couleur HEX en codes couleur HSL peut être une tâche complexe, mais avec notre Convertisseur HEX vers HSL, vous pouvez le faire rapidement et facilement. Cet outil est gratuit, en ligne et ne dépend d'aucun système ou logiciel. Avec cet outil, vous pouvez convertir n'importe quel code couleur HEX en codes couleur HSL en quelques clics seulement. Que vous soyez un développeur web, un graphiste ou simplement quelqu'un qui a besoin de convertir des codes couleur HEX en codes couleur HSL, notre Convertisseur HEX vers HSL est l'outil dont vous avez besoin.

Foire aux questions (FAQ)

Découvrez nos autres outils