カラー変換
カラーピッカー、ランダムカラー、ライブプレビュー、チャンネル調整を使い、1 つの色をブラウザ内で 6 桁 HEX(#RRGGBB)、RGB、HSL、CMYK の間で変換します。HEX/RGB/HSL はコピー可能な CSS 値、CMYK は参照用表記として出力します。
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
カラー変換6 桁 HEX または RGB/HSL/CMYK チャンネルを入力カラーピッカーかランダム色を使い、同期値を確認
かんたんスタート
1
2
よくある利用シーン
デザイン受け渡し
デザインの HEX を CSS の RGB/HSL に変換
スタイルガイド
コンポーネントの色表記と形式を統一
印刷参考
画面色を CMYK の初期見積もりとして変換し、最終値は校正と印刷ワークフローで確認します
アクセシビリティ
プレビューは簡易的な目視確認のみ。正確な比率は専用のコントラストツールで確認します
変換パラメータと表示
入力規則:HEX は 6 桁のみ対応(#RRGGBB、#RGB、#RGBA、#RRGGBBAA、アルファは非対応)。RGB は 0–255、H は 0–360、S/L は 0–100、CMYK は 0–100。入力は大文字小文字を区別しません
プレビュー:デスクトップは右側にライブプレビュー、モバイルはプレビュー非表示の軽量モード
カラーピッカー:HEX カード内のカラーピッカーを使用します。
HEX の大文字ポリシー:出力は大文字に正規化(例 #1E90FF)、入力は大文字小文字を区別しません。切替はありません
微調整:チャネル文字を左右ドラッグ(Shift×10、Alt÷0.1)
コピー出力:標準化した HEX、RGB、HSL の CSS 値(HEX は大文字)、または参照用 CMYK 表記 cmyk(...) をコピー
使い方のヒント
精度:デバイス/アプリごとにカラーマネジメントが異なり、スポイト値がわずかに変わることがあります
アルファ:現行の形式はアルファ非対応。rgba()/hsla() などを使用
色空間:Web は sRGB が既定。P3/Display‑P3 では慎重に検証
チーム内の統一: CSS での正準形式(例:HSL)を取り決める
制限事項と互換性
デバイス差:モニター/ブラウザ/OS の色管理の違いにより見え方が異なることがあります
CMYK は近似値です。値は ICC プロファイル、紙、インク、デバイス、校正によって変わります。印刷可能な最終値ではなく参考として使用してください
アルファなし:このツールは透明度、rgba()、hsla()、#RGBA、#RRGGBBAA を処理しません
CSS カラーの一部のみ対応:名前付き色、transparent、currentColor、HWB、HSV/HSB、Lab、LCH、OKLab、OKLCH、Display-P3、device-cmyk()、相対色、color-mix()、contrast-color() は対象外です。
画像やパレットのツールではありません:画像サンプリング、画面スポイト、パレット生成、グラデーション生成、コントラスト比チェック、CSS 変数エクスポート、design token エクスポートは行いません。
プライバシーとセキュリティ
処理はブラウザ内で実行されます。現在の色は、現在のブラウザセッションに残る場合があります。ワークスペースを保存するか WebDAV を有効にすると、現在の色がそのワークスペースの一部として保存または同期される場合があります。派生出力、取り消し履歴、一時的なエラーは個別のデータとして保存・同期されず、このツールは最近使った色の一覧を保持しません。このページは画像を読み取らず、画面をサンプリングせず、URL を取得せず、サーバー側の変換に色を送信しません。共有端末では、必要に応じて色とサイトデータを消去してください。
よくある質問
現在は未対応です。6 桁の HEX(#RRGGBB)をご利用ください。
RGB は 0–255(整数)。H は 0–360、S/L は 0–100%
CMYK は用紙、インク、デバイス、ICC 設定に依存します。ここでの値は近似値です。CMYK から HEX/RGB への変換は参照用に対応していますが、本格的な印刷には ICC プロファイルと校正が必要です。
現時点では非対応です。rgba()/hsla() か、別のアルファ値をお使いください。
カラーマネジメントやレンダリング、画面校正の差異によるものです。本ツールは sRGB 基準で計算しており、参考値です。
現在は sRGB ベースです。P3 または Display-P3 のワークフローでは、対象デバイス、ブラウザ、ICC プロファイルで確認してください。