HSLからRGBへの変換ツール

HSLカラーをRGB、HEX、CMYKに変換。HSLスライダーで微調整。ライブカラープレビュー。

HSL Values

HSL
hsl(0, 65%, 51%)
RGB
rgb(211, 51, 51)
HEX
#D33333
CMYK
cmyk(0%, 76%, 76%, 17%)

About HSL to RGB Converter

HSL（色相、彩度、明度）のカラー値をRGB、HEX、CMYKに変換します。直感的なスライダーで色相、彩度、明度を調整し、主要な色空間での結果を確認できます。

HSL入力

色相は0〜360、彩度と明度は0〜100%。スライダーを使用するか、正確な値を入力します。すべての形式に即座に変換されます。

ライブカラープレビュー

リアルタイムのカラースウォッチで、HSL値がどのように見えるかを正確に確認できます。調整すると、変更がすぐに反映されます。

4つの出力形式

HSL、RGB、HEX、CMYKを並べて表示します。ウェブデザイン、印刷前処理、開発ワークフローに最適です。

クリックでコピー

任意のカラー値をクリックしてクリップボードにコピーします。CSS用のRGB、HTML用のHEX、印刷用のCMYK、微調整用のHSL。

How It Works

  1. Adjust the Hue slider — Set the base color angle from 0 (red) through 360 (back to red).
  2. Set Saturation — Control color intensity from 0% (gray) to 100% (full color).
  3. Set Lightness — Adjust brightness from 0% (black) to 100% (white).
  4. Watch the preview — The color swatch updates in real time as you adjust any slider.
  5. Read the results — All four color space values update instantly. Click any value to copy it.

📋 Common Use Cases

クロスメディアデザイン

ブランドアセットを物理メディアからデジタルメディアに適応させる際に、印刷色（CMYK）を画面色（RGB/Hex）に変換します。

CSS・ウェブ開発

スタイルシート、デザイントークン、コンポーネントライブラリで使用するために、hex、RGB、HSL形式間で色を変換します。

ブランドの一貫性

特定の色形式を必要とする異なるデザインツール間でブランドパレットを変換する際に、色の正確性を確保します。

アクセシビリティテスト

コントラストチェックやWCAG準拠の検証のために、色を分析可能な形式に変換します。

🪜 How to Use This Tool

  1. 元の色を入力
    ソース形式で色の値を入力します — 16進コード、RGB値、CMYKパーセンテージ、またはHSLパラメータ。
  2. ターゲット形式を選択
    希望する出力形式を選択します。ほとんどの変換ツールでは、変換された値とともにライブカラープレビュースウォッチが表示されます。
  3. 変換された色を表示してコピー
    変換された色が即座に表示されます。プロジェクト用に個々の値または完全な出力文字列をコピーします。
  4. プロジェクトで使用
    変換された色をCSS、デザインツール、または印刷仕様に直接貼り付けます。プレビューが期待どおりであることを確認します。

📚 Related Guides

Frequently Asked Questions

これらの変換ツールは無料ですか？▼
はい。すべての変換ツールは完全に無料です。サインアップは不要です。
単位変換ツールの精度はどのくらいですか？▼
長さ、質量、温度、面積、体積、速度の標準的な換算係数を使用しています。結果は小数点以下6桁まで正確です。