カラーフォーマット変換
ネイティブカラーピッカーで色を選ぶか HEX 値を貼り付けると、よく使う全ての CSS フォーマットへ即座に変換します — HEX、モダンな空白区切り RGB、レガシーなカンマ区切り RGB、HSL、HSV、OKLCH（モダン CSS が好む知覚的均等色空間）、すぐ貼り付けられる CSS カスタムプロパティ。各値にコピーボタン付き。
—
プレビュー
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - CSS 変数
--color: #3B82F6;
使い方
- カラーピッカーを使うか、HEX 値（3 桁か 6 桁、# 省略可）を貼り付け。
- 全てのフォーマットがリアルタイム更新。
- 必要なフォーマットの右側のコピーボタンを押すだけ。
よくある質問
- OKLCH とは？
- 知覚的に均等な色空間で、数値上の距離が視覚的な距離と一致します。モダン CSS がネイティブ対応、Figma 2024+ などのデザインツールも採用しており、グラデーションが滑らかでコントラスト管理も一貫します。
- なぜ RGB が 2 行？
- モダン CSS は空白区切り 'rgb(59 130 246)'、レガシーや旧ブラウザはカンマ区切り 'rgb(59, 130, 246)'。色は同じです。
- アルファ（RGBA/HSLA）は？
- このツールは不透明な色に集中。透明度が必要ならモダン構文に '/ 0.5' を追記（例：'rgb(59 130 246 / 0.5)'）するか、レガシー 'rgba(…, 0.5)' を使用。
- HSV と HSB は同じ？
- はい — HSV（Value）と HSB（Brightness）は同じモデルの別名。CSS は hsv() を直接受けないので、スタイルシートには HSL を使ってください。
このテーマのガイド
関連ツール
HSL カラーピッカー
色相・彩度・明度・アルファのスライダーで色を調整 — HEX・RGB・HSL・Tailwind 任意値をコピー。
カラー 0 0
ランダムカラー生成
ランダムな色を HEX・RGB・HSL でまとめて生成 — 個数を選び、ワンクリックでコピー、すぐに再生成してデザインの着想に。
ランダム 0 0
OKLCH カラーピッカー
知覚的に均一な OKLCH 空間（明度・彩度・色相）で色を選ぶ — そして各選択が sRGB ディスプレイ色域内に収まるかを確認。
カラー 0 0
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
カラー 0 0
波長→色 変換器（nm → sRGB）
光の波長（380〜780 nm、可視光）を sRGB 近似色に変換 — クリック可能な虹グラデーションバーと、実際の太陽分光から得たフラウンホーファー吸収線リファレンス付き。
カラー 0 0
CMYK ↔ RGB カラー変換ツール（印刷用色空間）
画面用RGB/hexと印刷用CMYKパーセントを相互変換します。Simple、GCR（グレーコンポーネント置換）、UCR（アンダーカラー除去）のブラック生成方式、チャンネル分版プレビュー、総インク被覆率表示に対応。
カラー 0 0