HEX naar HSL

HEX naar HSL Converter: Converteer HEX naar HSL kleurencodes eenvoudig en snel

Als je op zoek bent naar een manier om HEX kleurencodes naar HSL om te zetten, ben je hier aan het juiste adres. De HEX naar HSL Converter is een online en gratis tool waarmee je eenvoudig en snel elke HEX kleurcode kunt omzetten naar HSL kleurencodes, zonder afhankelijk te zijn van enig systeem of software. Met deze converter kun je eenvoudig HEX kleurencodes omzetten naar HSL kleurencodes met slechts een paar klikken.

Kenmerken van de Tool

• Gratis en online tool
• Geen systeem- en softwareafhankelijkheid
• Kan wissen
• Kan kopiëren
• Heeft voorbeeld
• Gegevensbeveiliging, lokale berekening

Hoe gebruik je de HEX naar HSL Converter?

Het omzetten van HEX kleurencodes naar HSL kleurencodes is eenvoudig met onze HEX naar HSL Converter. Zo kun je de tool gebruiken:

1. Voer de HEX kleurcode in of plak deze in het invoerveld. Bijvoorbeeld, #ffd500.
2. Klik op de "Converteren" knop.
3. De geconverteerde HSL kleurcode verschijnt in het uitvoerveld. Bijvoorbeeld, hsl(50,100,50).
4. Je kunt ook het invoerveld wissen of de geconverteerde HSL kleurcode kopiëren naar het klembord met behulp van de respectievelijke knoppen.

Kernalgoritme

De HEX naar HSL Converter maakt gebruik van een eenvoudig algoritme om de HEX kleurcode naar HSL kleurcode om te zetten. Hier is de formule die de tool gebruikt:

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

Voorbeelden in Programmeertalen

Hier zijn enkele voorbeelden van hoe je de HEX naar HSL Converter kunt gebruiken in verschillende programmeertalen:

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

Conclusie

Het omzetten van HEX kleurcodes naar HSL kleurcodes kan een complexe taak zijn, maar met onze HEX naar HSL Converter kun je het snel en gemakkelijk doen. Deze tool is gratis, online en heeft geen afhankelijkheid van enig systeem of software. Met deze tool kun je elke HEX kleurcode omzetten naar HSL kleurcodes met slechts een paar klikken. Of je nu een webontwikkelaar, grafisch ontwerper bent of gewoon iemand die HEX kleurcodes naar HSL kleurcodes moet converteren, onze HEX naar HSL Converter is de tool die je nodig hebt.