カラー変換 - 無料オンラインツール

機能

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

ビジュアルカラーピッカー

リアルタイムプレビュー

CSS 変数として出力

使い方

1. 色を選択します（ステージのクリック、HEX の貼り付け、スポイト、スペースキーでランダムも可）。

2. HEX・RGB・HSL・OKLCH のすべての形式が双方向にリアルタイム変換されます。

3. 単一の値でも CSS 変数ブロック全体でもコピーできます。下地を切り替えて白・グレー・ダーク背景で色を確認しましょう。

このツールについて

デザイナーは目で色を選び、CSS には文字列が必要で、ツールごとに使う形式も違います。この変換ツールは1つの色を HEX、RGB、HSL、OKLCH の間で同期させます。どの欄を変えても、ピッカーを使っても、ほかの形式がすぐに更新されます。HEX と RGB は赤・緑・青のチャンネルを、HSL は色相・彩度・明度を表すので手で調整しやすく、OKLCH は CSS Color Level 4 の新しい知覚的な形式で、明度を同じだけ変えると目にも均等に見えるため、一貫したパレット作りに向いています。1つの値だけをコピーすることも、CSS カスタムプロパティのまとまりをコピーすることもでき、白・グレー・暗い背景の上で色を確認してから使えます。

よくある質問

CSS ではどの形式を使うべきですか？

HEX と rgb() はどこでも使え、固定の色には十分です。明度や彩度を手で調整したいときは hsl() が便利です。oklch() は現在のブラウザーで使え、明度が知覚的に均一なので体系的なパレットに最適です。

HSL の明度が同じ 50% でも明るさがまったく違って見えるのはなぜですか？

HSL は RGB を数学的に並べ替えただけで、人間の視覚のモデルではありません。そのため 50% の黄色は 50% の青よりずっと明るく見えます。OKLCH の明度は知覚される明るさに合わせて設計されており、デザインシステムで使われることが増えています。

変換して戻すと値がわずかに変わることがあるのはなぜですか？

HEX と RGB は 0～255 の整数で、HSL と OKLCH は小数を使います。変換時の丸めで1つのチャンネルが1段階ずれることがありますが、目で見て分かる差ではありません。

画面の別の場所から色を拾えますか？

デスクトップ版の Chrome や Edge など EyeDropper API に対応したブラウザーでは、スポイトボタンで画面上の任意のピクセルの色を取得できます。その他のブラウザーでは標準のカラーピッカーが表示されます。

CSS 変数のまとまりには何が含まれますか？

同じ色を複数の形式でカスタムプロパティとして並べたもので、たとえば --color-hex、--color-rgb、--color-hsl、--color-oklch です。:root に貼り付け、コードに必要な形式を参照できます。

カラー変換ツール

機能

使い方

このツールについて

よくある質問

関連ツール