HEX a HSL

Entrada HEX

Muestra

Salida HSL

Convertidor de HEX a HSL: Convierte fácil y rápidamente códigos de color HEX a HSL

Si estás buscando una forma de convertir códigos de color HEX a HSL, estás en el lugar correcto. El Convertidor de HEX a HSL es una herramienta en línea y gratuita que te permite convertir cualquier código de color HEX a códigos de color HSL de manera fácil y rápida, sin dependencias de ningún sistema o software. Con este convertidor, puedes convertir fácilmente códigos de color HEX a códigos de color HSL en solo unos clics.

Características de la herramienta

Herramienta gratuita y en línea
Sin dependencias de sistema y software
Puede Borrar
Puede Copiar
Tiene Ejemplo
Seguridad de datos, cálculo local

Cómo usar el Convertidor de HEX a HSL?

Convertir códigos de color HEX a códigos de color HSL es fácil con nuestro Convertidor de HEX a HSL. Así es cómo puedes usar la herramienta:

Ingresa o pega el código de color HEX en el campo de entrada. Por ejemplo, #ffd500.
Haz clic en el botón "Convertir".
El código de color HSL convertido aparecerá en el campo de salida. Por ejemplo, hsl(50,100,50).
También puedes borrar el campo de entrada o copiar el código de color HSL convertido al portapapeles utilizando los botones respectivos.

Algoritmo principal

El Convertidor de HEX a HSL utiliza un algoritmo simple para convertir el código de color HEX al código de color HSL. Aquí está la fórmula que utiliza la herramienta:

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})`;

Ejemplos en lenguajes de programación

Aquí tienes algunos ejemplos de cómo usar el Convertidor de HEX a HSL en varios lenguajes de programación:

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%)

Conclusión

Convertir códigos de color HEX a códigos de color HSL puede ser una tarea compleja, pero con nuestro Convertidor de HEX a HSL, puedes hacerlo de forma rápida y sencilla. Esta herramienta es gratuita, en línea y no depende de ningún sistema o software. Con esta herramienta, puedes convertir cualquier código de color HEX a códigos de color HSL con solo unos clics. Ya seas un desarrollador web, diseñador gráfico o simplemente alguien que necesita convertir códigos de color HEX a códigos de color HSL, nuestro Convertidor de HEX a HSL es la herramienta que necesitas.

Herramientas relacionadas

RGB a HEX RGB a HSL RGB a CMYK RGB a HSV HEX a RGB HEX a CMYK HEX a HSV HEX a RGBA

Preguntas frecuentes (FAQ)

Conoce nuestras herramientas adicionales

Codificación Base64 Decodificador Base64 Imagen a Base64 PNG a Base64 JPEG a Base64 Conversor de WebP a Base64 Convertidor de TIFF a Base64 Convertidor de BPM a Base64 GIF a Base64 AVIF a Base64 Convertir APNG a Base64 JSON a Base64 Convertidor de XML a Base64 YAML a Base64 CSV a Base64 TSV a Base64 Convertir de binario a Base64 Hexadecimal a Base64 Octal a Base64 Convertidor de HTML a Base64 CSS a Base64 JavaScript a Base64 ASCII a Base64 Texto a Base64 Convertidor de Base64 a JSON Convertidor de Base64 a XML Convertidor de Base64 a YAML Base64 a CSV Base64 a TSV Convertidor de Base64 a Binario Base64 a Hexadecimal Convertidor de Base64 a Octal Convertidor de Base64 a HTML Convertidor de Base64 a CSS Conversor de Base64 a Javascript Conversor de Base64 a Ascii Base64 a Texto Codificación de URL Descodificar URL Codificación de URL JSON Decodificación de URL JSON Codificar HTML Descodificar HTML Codificar URL XML Decodificación de URL XML