本文へスキップ

カラー変換

カラーピッカー、ランダムカラー、ライブプレビュー、チャンネル調整を使い、1 つの色をブラウザ内で 6 桁 HEX(#RRGGBB)、RGB、HSL、CMYK の間で変換します。HEX/RGB/HSL はコピー可能な CSS 値、CMYK は参照用表記として出力します。

HEX

#

RGB

HSL

CMYK

カラー変換

かんたんスタート

1
6 桁 HEX または RGB/HSL/CMYK チャンネルを入力
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 を取得せず、サーバー側の変換に色を送信しません。共有端末では、必要に応じて色とサイトデータを消去してください。

よくある質問

5

次の作業に役立つ関連ツールです。

すべてのツール処理はブラウザ内でローカルに行われます。