カラーコンバーター
HEX、RGB、HSL、OKLCHの色を相互に変換し、プレビューと値のコピーをすべてブラウザ内で行います。
HEX、RGB(A)、HSL(A)、OKLCHの色の値を入力できます。
サーバーアップロードなし
HEX
#7c5cff
RGB
rgb(124 92 255)
HSL
hsl(252 100% 68%)
OKLCH
oklch(59.9% 0.23 286.2)
ブラウザで使えるカラーコンバーター
UIデザインやCSSの作成、ブランドカラーの確認時にHEX、RGB、HSL、OKLCH間で色を変換できます。対応形式で値を入力または選択すると、すべての変換値が即座に更新されます。
色の変換はブラウザ内でローカルに処理されます。色の値がoddkitのサーバーにアップロードされることはありません。
主な用途
- デザインツールの色をCSS用の値に変換
- フォーマット間でアルファ透明度を確認
- 知覚的に均一な最新のOKLCH値を試す
対応フォーマット
HEX(3/4/6/8桁)、rgb()/rgba()、hsl()/hsla()、oklch()の入力をアルファ値とともに読み取り、4つの形式すべてで出力します。
よくある質問
入力した色はoddkitのサーバーにアップロードされますか？
いいえ。変換はブラウザ内でローカルに処理されます。
アルファ透明度には対応していますか？
はい。HEX、RGB、HSL、OKLCHはすべてアルファチャンネルに対応しており、変換後のすべての値に反映されます。
無効な色を入力するとどうなりますか？
エラーにはならず、分かりやすいメッセージが表示されるので、そのまま入力を修正できます。
よく使う変換
HEX → RGB
CSSやCanvas、RGBチャンネルを必要とするデザインツールのために、HEXカラーコードをrgb()に変換します。
RGB → HEX
デザインの受け渡しやCSSへの直接記述のために、rgb()やrgba()の値をHEXコードに変換します。
HEX → HSL
色相・彩度・明度を個別に調整するために、HEXをhsl()に変換します。
RGB → HSL
色相を変えずに明度や彩度だけを調整したいときに、rgb()をhsl()に変換します。
HEX → OKLCH
最新のCSSで知覚的に均一な色調整を行うために、HEXをoklch()に変換します。
HSL → OKLCH
従来の色空間から広色域で知覚的に均一な色空間へ移行するために、hsl()をoklch()に変換します。