カラーフォーマット コンバーター

HEX / RGB / HSL / OKLCH をリアルタイムで相互変換。透明度・カラーピッカー対応。

カラーピッカー

透明度（α）

100%

プリセット

プリセット

カラーフォーマット

  • HEX
  • RGB
  • HSL
  • OKLCH

CSS での使い方

color:#0d9488;
background:rgb(13, 148, 136);
border-color:hsl(175, 84%, 32%);

使い方

  1. カラーピッカーで色を選ぶか、プリセットをクリックすると 4フォーマット全てが自動更新されます
  2. 各フォーマット欄に直接入力して Enter または欄の外をクリックすると他のフォーマットに即変換されます
  3. 透明度（α）スライダーで 0–100% を調整できます。HEX 8桁・RGBA・HSLA・OKLCH α 形式に同時反映されます
  4. 📋 ボタンでフォーマットをクリップボードにコピーして CSS に貼り付けられます

色フォーマットの違い

HEX（例: #0d9488）は最も一般的な形式で、デザインツールとの相性が良い。 RGB（例: rgb(13, 148, 136)）は赤・緑・青の強度で指定。 HSL（例: hsl(173, 84%, 32%)）は色相・彩度・輝度で指定し、人間が直感的に扱いやすい。 OKLCH（例: oklch(56% 0.1 187)）は CSS Color Level 4 の新しい色空間で、人間の知覚に均一な色の変化が作れる。

関連ツール

♿ カラーコントラストチェッカー 🎨 配色パレットジェネレーター 🎛️ CSS Variables プレイグラウンド ← ツール一覧に戻る

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ