本文へスキップ
CrateX.app ロゴ

CrateX.app

カラー変換

カラー変換

カラー変換で HEX、RGB、HSL、CMYK を相互変換し、リアルタイムプレビューとカラーピッカーで色を確認できます。CSS カラー調整、デザイン受け渡し、スタイルガイド整備に便利です。

HEX

#

RGB

HSL

CMYK
カラー変換

かんたんスタート

1
選択/入力：#1E90FF、rgb(30,144,255)、hsl(210,100%,56%) など対応形式を入力、またはカラーピッカーを使用
2
自動変換：いずれかの形式を入力すると他の形式が即時に更新
3
コピー：各形式のコピーボタンで正規化済み文字列を取得

よくある利用シーン

デザイン受け渡し

デザインの HEX を CSS の RGB/HSL に変換

スタイルガイド

コンポーネントの色表記と形式を統一

印刷リファレンス

画面色を CMYK に変換して初期見積もり（要プルーフ）

アクセシビリティ

プレビューでコントラストの第一印象を確認（正確な比率は専用ツールを使用）

補足シナリオ

rgb to hsl、hsl to rgb、カラーコード変換 も同じ確認フローでまとめて扱え、コピーや書き出し前の確認を進めやすくします。

変換パラメータと表示

入力規則：HEX は 6 桁のみ（Alpha なし）。RGB 0–255、H 0–360、S/L 0–100、CMYK 0–100。入力は大文字・小文字を区別しません
プレビュー：デスクトップは右側にライブプレビュー、モバイルはプレビュー非表示の軽量モード
カラーピッカー：各カード右上のパレットボタンで開きます
HEX の大文字ポリシー：出力は大文字に正規化（例 #1E90FF）、入力は大文字小文字を区別しません。切替はありません
微調整：チャネル文字を左右ドラッグ（Shift×10、Alt÷0.1）
コピー出力：コピーは標準化された文字列（HEX 大文字）を出力

使い方のヒント

精度：デバイス/アプリごとにカラーマネジメントが異なり、スポイト値がわずかに変わることがあります
アルファ：現行の形式はアルファ非対応。rgba()/hsla() などを使用
色空間：Web は sRGB が既定。P3/Display‑P3 では慎重に検証
チーム内の統一：CSS での正準形式（例：HSL）を取り決める

制限事項と互換性

デバイス差：モニター/ブラウザ/OS の色管理の違いにより見え方が異なることがあります
CMYK は近似：参考値に過ぎず、実印刷では ICC 設定と専用フローが必要
アルファなし：透過は扱いません

プライバシーとセキュリティ

すべての処理はブラウザ内で完結し、データはお使いのデバイスから外部に送信されません

よくある質問

5

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