HEXからHSLへ

HEX入力

サンプル

HSL出力

HEXからHSLへの変換ツール：HEXからHSLカラーコードを簡単かつ迅速に変換する

HEXカラーコードをHSLカラーコードに変換する方法をお探しの場合は、正しい場所にいます。HEXからHSLへの変換ツールは、オンラインで無料のツールであり、どんなシステムやソフトウェアにも依存せずに簡単かつ迅速に任意のHEXカラーコードをHSLカラーコードに変換することができます。この変換ツールを使用すると、わずか数回のクリックでHEXカラーコードをHSLカラーコードに簡単に変換することができます。

ツールの特徴

無料でオンラインのツール
システムやソフトウェアに依存しない
クリアができます
コピーができます
サンプルがあります
データのセキュリティ、ローカルコンピューティング

HEXからHSLへの変換方法

HEXカラーコードをHSLカラーコードに変換するのは、HEXからHSLへの変換ツールを使用すれば簡単です。以下に、ツールの使用方法を示します：

入力フィールドにHEXカラーコードを入力または貼り付けします。例：#ffd500。
「変換」ボタンをクリックします。
変換されたHSLカラーコードが出力フィールドに表示されます。例：hsl(50,100,50)。
入力フィールドをクリアしたり、変換された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 to HSL コンバーターを使用すれば、迅速かつ簡単に行うことができます。このツールは無料でオンラインで利用でき、システムやソフトウェアに依存する必要はありません。このツールを使用すると、わずか数クリックで任意の HEX カラーコードを HSL カラーコードに変換することができます。ウェブ開発者、グラフィックデザイナー、または単に HEX カラーコードを HSL カラーコードに変換する必要がある方には、弊社の HEX to HSL コンバーターが必要なツールです。

他のツールについて知る

Base64エンコード Base64デコード画像をBase64に変換する PNGをBase64に変換 JPEGからBase64へ WebPからBase64へのコンバーター TIFFをBase64に変換するツール BPMをBase64に変換するツール GIFをBase64に変換 AVIFをBase64に変換 APNGをBase64に変換する JSONをBase64に変換 XMLをBase64に変換するツール YAMLをBase64に変換 CSVをBase64に変換 TSVをBase64に変換バイナリからBase64へ 16進数からBase64への変換 Octal to Base64 HTMLをBase64に変換するツール CSSをBase64に変換する JavaScriptをBase64に変換 ASCIIからBase64への変換テキストをBase64に変換 Base64からJSONへのコンバーター Base64からXMLへの変換ツール Base64からYAMLへのコンバーター Base64からCSVへの変換 Base64からTSVへの変換 Base64からバイナリへのコンバーター Base64から16進数への変換 Base64から八進数への変換ツール Base64からHTMLへの変換ツール Base64からCSSへのコンバーター Base64からJavascriptへのコンバーター Base64からAsciiへのコンバーター Base64からテキストへ URLエンコード URLデコード JSON URL エンコード JSON URLデコード HTMLエンコード HTML デコード XML URL エンコード XML URLデコード

文字列をスネークケースに変換小文字に変換する文字列を大文字に変換文字列をキャメルケースに変換する String to Capital アッパースネークケースへの文字列変換テキストをドットケースに変換 String to Title Case 文字列をパラメーターケースに変換する文字列をパスカルケースに変換する文字列をパスケースに変換する

バイナリからテキストへバイナリから16進数へバイナリから十進数へ 2進数から8進数への変換 10進数から2進数への変換 10進数から16進数へ 10進数から8進数への変換 Hexからバイナリーへ 16進数から8進数へ 16進数から10進数へ 8進数から2進数への変換 8進数から16進数へ 8進数から10進数への変換テキストをASCIIに変換するテキストをバイナリに変換 ASCIIをテキストに変換 Char to ASCII