カラーコード変換
HEX・RGB・HSL・OKLCHのカラーコードを相互に変換します。
HEX、rgb()、rgba()、hsl()、hsla()、oklch() に対応
#3B82F6
HEX
rgb(59, 130, 246)
RGB
hsl(217, 91%, 60%)
HSL
oklch(0.623 0.201 262.9)
OKLCH
入力データ送信なしブラウザ内で完結登録不要
このツールについて
HEX・RGB・HSL・OKLCHのカラーコードを相互に変換するツールです。いずれかの形式で色を入力すると、他の形式にリアルタイムで変換し、プレビューも表示します。
Webデザインでの色指定、CSSの記述、デザインツール間での色の受け渡しなどに便利です。OKLCHはCSS Color Level 4で導入された新しい色空間で、人間の知覚に基づいた均一な色調整ができます。
使い方
- カラーコードを入力HEX、RGB、HSL、OKLCHのいずれかの形式でカラーコードを入力します。
- カラーピッカーで選択（任意）カラーピッカーから視覚的に色を選択することもできます。
- 自動変換を確認入力した色が他の形式に自動的に変換され、すべての形式のカラーコードが表示されます。
- プレビューで確認選択した色のプレビューを見ながら、最適な形式のカラーコードをコピーして使用します。
よくある質問
- HEX・RGB・HSL・OKLCHの違いは何ですか？
- HEXは#FFFFFFのような16進数表記、RGBは赤・緑・青の3色を0-255で指定、HSLは色相・彩度・明度で指定、OKLCHは人間の知覚に基づいた新しい色空間です。用途やツールに応じて使い分けます。
- どの形式を使えばいいですか？
- CSSではHEXとRGBが一般的です。透明度が必要な場合はRGBA、色の調整をしやすくしたい場合はHSL、より正確な色表現が必要な場合はOKLCHを使用します。
- OKLCHとは何ですか？
- OKLCHはCSS Color Level 4で導入された新しい色空間で、人間の知覚に基づいています。従来のHSLと異なり、明度の値が色相によらず一定に保たれるため、より均一で予測可能な色調整ができます。