HEX в HSL

Ввод HEX
Пример
Вывод HSL

Конвертер HEX в HSL: легко и быстро преобразуйте HEX в HSL коды цветов

Если вы ищете способ преобразовать HEX коды цветов в HSL, вы находитесь в нужном месте. Конвертер HEX в HSL - это онлайн-инструмент, который позволяет легко и быстро преобразовывать любой HEX код цвета в HSL коды цветов без зависимости от какой-либо системы или программного обеспечения. С помощью этого конвертера вы можете легко преобразовывать HEX коды цветов в HSL коды цветов всего в несколько кликов.

Особенности инструмента

  • Бесплатный и онлайн-инструмент
  • Не требует системных или программных зависимостей
  • Можно очистить поле
  • Можно скопировать
  • Есть пример
  • Безопасность данных, локальные вычисления

Как использовать конвертер HEX в HSL?

Преобразование HEX кодов цветов в HSL коды цветов легко с помощью нашего конвертера HEX в HSL. Вот как вы можете использовать этот инструмент:

  1. Введите или вставьте HEX код цвета в поле ввода. Например, #ffd500.
  2. Нажмите кнопку "Преобразовать".
  3. Преобразованный HSL код цвета появится в поле вывода. Например, hsl(50,100,50).
  4. Вы также можете очистить поле ввода или скопировать преобразованный HSL код цвета в буфер обмена с помощью соответствующих кнопок.

Основной алгоритм

Конвертер HEX в HSL использует простой алгоритм для преобразования HEX кода цвета в HSL код цвета. Вот формула, которую использует этот инструмент:

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

Примеры на разных языках программирования

Вот некоторые примеры использования конвертера HEX в HSL на разных языках программирования:

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

Заключение

Преобразование цветовых кодов HEX в цветовые коды HSL может быть сложной задачей, но с нашим преобразователем HEX в HSL вы можете сделать это быстро и легко. Этот инструмент бесплатен, онлайн и не зависит от каких-либо систем или программного обеспечения. С помощью этого инструмента вы можете преобразовать любой цветовой код HEX в цветовые коды HSL всего за несколько кликов. Независимо от того, являетесь ли вы веб-разработчиком, графическим дизайнером или просто кому-то, кто нуждается в преобразовании цветовых кодов HEX в цветовые коды HSL, наш преобразователь HEX в HSL - это инструмент, который вам нужен.

Часто задаваемые вопросы (FAQ)

Познакомьтесь с нашими дополнительными инструментами