Skip to main content
appkiro.com
色

HSL から CSS 色名（Colortone） へ変換

色相・彩度・明度によるCSSカラー編集で使うHSLをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。

ページ内のローカルTypeScript関数で変換し、この計算のために色値をサーバーへ送信する必要はありません。

1. HSL値を入力

見た目で色を選ぶか、スライダーを使うか、値を貼り付けます。

RGBHSLHSV
9
100%
64%

クイックプリセット

2. ライブプレビュー

tomato

tomato

プレビュー

元画像

rgb(255, 99, 71)

20%明るく

rgb(255, 130, 108)

20%暗く

rgb(204, 79, 57)

補色

rgb(71, 227, 255)

色情報

色名：tomato明るさ：56%輝度：0.306白とのコントラスト：2.95 : 1黒とのコントラスト：7.13 : 1

視覚比較

Aa

白文字

Aa

黒文字

3. 結果

tomato

他の形式

HEX#FF6347
RGBrgb(255, 99, 71)
RGBArgba(255, 99, 71, 1)
HSLhsl(9, 100%, 64%)
HSLAhsla(9, 100%, 64%, 1)
HSVhsv(9, 72%, 100%)
CMYKcmyk(0%, 61%, 72%, 0%)
名前tomato

カラーパレット

ヒント

EyeDropper API対応ブラウザでは画面から色を取得できます。

要点

色相・彩度・明度によるCSSカラー編集で使うHSLをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。 チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。

このツールでできること

色相・彩度・明度によるCSSカラー編集で使うHSLをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。 入力がすでにHSLで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。

確認済みの機能

HSLの入力規則

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。

COLORTONE結果の読み方

CSS色名の検索結果、または内蔵一覧で最も近い名前

精度の範囲を確認

チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。 再利用する前に、利用先の要件と結果を照合します。

適した用途

  • 入力がすでにHSLで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。
  • 色相・彩度・明度によるCSSカラー編集で使うHSLをCSS色名の検索結果、または内蔵一覧で最も近い名前へ変換し、読みやすいCSSキーワードや分かりやすいスウォッチ名に利用します。
  • HSL → COLORTONE: 読みやすいCSSキーワードや分かりやすいスウォッチ名.

使い方

  1. 元の色を入力

    色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 「使い方: 元の色を入力」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

  2. 正規化されたプレビューを確認

    スライダー・直接入力・プリセット・利用可能なシステムピッカーを使えます。プレビューでCOLORTONE整形前の正規化を確認します。

  3. 変換値をコピー

    COLORTONEの行をコピーします。他形式も比較できますが、このページの目的はHSL → COLORTONEです。

  4. 精度の範囲を確認

    チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。 再利用する前に、利用先の要件と結果を照合します。 COLORTONEをコピーする前に、プレビューで解析ミスを確認します。

操作項目の説明

HSLの入力規則

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 「操作項目の説明: HSLの入力規則」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

COLORTONE結果の読み方

CSS色名の検索結果、または内蔵一覧で最も近い名前. ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。

結果の算出方法

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 入力をsRGBの3チャンネルへ変換してから、CSS色名の検索結果、または内蔵一覧で最も近い名前として整形します。HSLはRGBの変換で、知覚的に均一なモデルではありません。彩度の定義もHSVとは異なります。ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。

精度と制限

  • チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。
  • HSLはRGBの変換で、知覚的に均一なモデルではありません。彩度の定義もHSVとは異なります。
  • ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。

処理とプライバシー

ページ内のローカルTypeScript関数で変換し、この計算のために色値をサーバーへ送信する必要はありません。

実用的なヒント

  • 丸められたCOLORTONE結果と比較できるよう、元のHSL値を残します。
  • COLORTONEをコピーする前に、プレビューで解析ミスを確認します。

トラブルシューティング

HSL入力が無効になるのはなぜですか？

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 「トラブルシューティング: HSL入力が無効になるのはなぜですか？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

HSLをCOLORTONEへ変換して戻すと値が変わるのはなぜですか？

チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。 「トラブルシューティング: HSLをCOLORTONEへ変換して戻すと値が変わるのはなぜですか？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

精度の範囲を確認

チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。 リセットして既知の対応値で再試行してから、アルゴリズムの問題かを判断します。

よくある質問

HSLからCOLORTONE専用の変換を使う場面は？

入力がすでにHSLで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。 「HSLからCOLORTONE専用の変換を使う場面は？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

HSL入力が無効になるのはなぜですか？

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 「HSL入力が無効になるのはなぜですか？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

HSLをCOLORTONEへ変換して戻すと値が変わるのはなぜですか？

チャンネルの正規化と整数・パーセント整形により、HSL → COLORTONE → HSLの往復値が元と異なる場合があります。 「HSLをCOLORTONEへ変換して戻すと値が変わるのはなぜですか？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

最も近いCSS色名はどのように選ばれますか？

ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。 「最も近いCSS色名はどのように選ばれますか？」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

COLORTONE結果はどの構文で出力されますか？

CSS色名の検索結果、または内蔵一覧で最も近い名前. 読みやすいCSSキーワードや分かりやすいスウォッチ名. ColortoneはAppKiroにおけるCSS色名検索の呼称で、標準色空間ではありません。名前への変換はRGBのユークリッド距離を使います。

変換前にHSL入力はどう正規化されますか？

色相は度、彩度と明度はパーセントで入力します。色相は0〜360°で循環正規化されます。 HSLはRGBの変換で、知覚的に均一なモデルではありません。彩度の定義もHSVとは異なります。

次のカラーワークフロー

入力がすでにHSLで、次のシステムがCSS 色名（Colortone）を必要とするときに使います。複数表現を同時に見る場合は総合コンバーターが適しています。 「次のカラーワークフロー」では、この内容をHSL から CSS 色名（Colortone） へ変換に合わせて適用します。

関連ツールで続ける

HSL → COLORTONEの変換後も作業を続ける場合は、最初の関連ツールを開きます。

HEX・RGB・HSL・LAB・OKLCH カラー変換