HSL→HSV変換ツール:ライブでプライベートな色変換
このHSL→HSV変換ツールはHSLカラーをHSVに変換し、どちらかの値を編集するとすぐに結果が更新されます。#abcやrgb(1 2 3 / 50%)、名前付きカラーなどの一般的なカラー入力も受け付けます。スウォッチを確認し、貼り付けて使えるCSS行をコピーして、カラーがsRGBの範囲外の場合は色域外(警告)をチェックします。
HSL→HSV変換ツールは、ブラウザ上で直接HSLとHSVの間でカラー値を変換します。HSLカラーを入力するとHSVの対応値が表示され、どちらかの値を編集すれば反対側がライブで更新されます。カラースウォッチで結果を確認しやすく、コピーして使えるCSS行もコピーできます。
変換ツールはHSLを受け付けるほか、#abc・rgb(1 2 3 / 50%)・名前付きカラーなどの一般的なカラー入力を解析します。値を編集すると反対側の対応値がすぐに更新されます。また、カラーがsRGBの範囲外の場合は色域外(警告)を表示します。設定可能な変換オプションは記載されていません。
HSLとHSVは色相と彩度で色を表す2つの方式で、HSLはlightness、HSVはvalueで明るさを表します。システム・ワークフロー・リファレンスが一方のモデルを使い、カラー値が他方の場合に、相互変換が役立ちます。ライブ編集とスウォッチで、再利用する値の準備中にカラーを確認できます。
変換は完全にブラウザ上で動作します:入力はデバイス上で処理され、アップロード・保存・サーバーへの送信は一切行われません。登録不要で、ページの読み込み後はサーバー依存なしでオフラインで動作します。カラー値をコードに移したり、提供された値を確認したり、チーム向けにわかりやすいカラーリファレンスを準備したりする開発者やDevOpsエンジニアに役立ちます。
手順1: HSLカラーを入力または貼り付けるか、#abc・rgb(1 2 3 / 50%)・名前付きカラーなど、サポートされている他のカラー入力を使います。
手順2: HSV結果を確認します。入力中に更新されます。HSV側を編集すれば、HSL値がライブで更新されるのも確認できます。
手順3: カラースウォッチを確認し、カラーがsRGBの範囲外の場合は色域外(警告)がないか確認します。
手順4: 結果または貼り付けて使えるCSS行をコピーして、コード・ドキュメント・メモで使います。
用途: HSLカラーデータをHSVを受け付けるシステムに移動し、変換した値をワークフローにコピーできます。
用途: 両方の値を入力してライブ結果を比較すれば、HSV値が元のHSLと一致するか確認できます。
用途: カラーを識別しやすいスウォッチ付きで、ドキュメント・チケット・コミットメッセージ用のカラー情報を準備できます。
用途: 結果をコードに追加する前に、スウォッチと色域外(警告)をビジュアルチェックとして使って変換をサニティチェックできます。
用途: 短い16進数・アルファ付きRGB・名前付きカラーなど、異なる一般的な形式でコピーしたカラー値を扱えます。
用途: どちらかの値を編集して反対側の更新を眺めながら、HSLカラーの変更がHSVの対応値にどう影響するか探れます。