01
入力形式を見極める
短いHEXと長いHEX、rgb()、hsl()、hsv()、cmyk()、lab()、oklch()を受け付けます。不正な値では前の結果を表示したままコピーを止めます。
カラーツール
色変換— 1色を7形式で確認
HEX、RGB、HSL、HSV、CMYK、Lab、OKLCHのいずれかを入力してください。
色変換
色の値はこのブラウザー内だけで処理し、送信・保存しません。
HEX
#3B82F6RGB
rgb(59 130 246)HSL
hsl(217.2 91.2% 59.8%)HSV
hsv(217.2, 76%, 96.5%)CMYK
cmyk(76%, 47.2%, 0%, 3.5%)Lab
lab(54.619% 8.771 -65.783)OKLCH
oklch(62.308% 0.188 259.81)sRGB色域内です。
sRGBとOKLCHの白色点はD65、CSS LabはD50です。CMYKはICCプロファイルなしの概算です。
透明度の設定
7種類の結果を更新しました。
デザインツールのHEXをCSSのOKLCHへ移すとき、見た目が同じでも数値の役割は変わります。色変換は一つの色を七つの表記で見比べ、表示可能な範囲も示します。
HEX RGB変換やRGB HSL変換だけでなく、OKLCH変換とCMYK変換も同じ画面で確認できます。色変換の色見本を見れば、数字だけでは気づきにくい透明度も確かめられます。
色変換で原色と表示色を見分ける
色域外の入力を隠さず表示
範囲外の色を明示する
LabやOKLCHはsRGBより広い色を指定できます。色変換は元の入力を残し、OKLCHの彩度を下げて画面用HEXを作るため、近似であることが分かります。
透過を色見本で確認する
4桁・8桁のHEXに含まれるアルファは市松模様の上で見えます。対応するCSS表記には透過を残し、CMYKには含めません。
変換前に確認したい三つの点
02
アルファと色域を分けて読む
アルファは独立した設定です。色域外のOKLCHを入れたら、元の座標と画面向けHEXを別々に確認します。
03
更新後の値だけを使う
自動変換は入力停止から350ミリ秒後に実行します。手動に切り替えた場合はCtrl/Cmd+Enterも使えます。
七つの表記が示すこと
Web用の数値
HEX、RGB、HSLはsRGBの画面色です。HSVはデザインソフトで使うValue軸を示します。
知覚空間の座標
CSS Labの基準白色はD50、OKLCHはD65です。色域外の入力値は表示用の近似色と区別します。
印刷用の目安
CMYKはsRGBから計算した概算で、用紙やインクを指定するICCプロファイルを使っていません。
値を使う前の制限事項
- 色域外の往復は無損失ではない
- LabやOKLCHに厳密なsRGBのHEXがない場合、彩度を下げて表示します。元の座標は別に残します。
- CMYKは入稿値ではない
- 印刷機・紙・インクのプロファイルを指定していないため、CMYKの百分率をそのまま印刷指定に使わないでください。
- hsv()とcmyk()は計算用
- この二つは汎用CSSの色宣言ではありません。CSSにはHEX、rgb()、hsl()、lab()、oklch()を使います。
- 画像抽出と配色提案は対象外
- このページは単色の換算専用です。画像からの抽出、配色生成、保存や共有URLへの書き込みはしません。
色変換のよくある質問
このコンバーターはどのカラー形式を出力しますか？
HEX、RGB、HSL、HSV、CMYK、Lab、OKLCHの七つを同時に表示します。
OKLCHとは何で、なぜそれに変換するのですか？
OKLCHは明度・彩度・色相を知覚に近い形で表します。色の変化を調整するときに役立ちます。
コンバーターはアルファチャンネルを保持しますか？
はい。4桁・8桁HEXと透過指定のあるCSS入力からアルファを読み取ります。
oklch()やlab()の値を入力として貼り付けられますか？
はい。oklch()とlab()を直接入力でき、sRGBを超える値も元の表記を残します。
入力したカラーはサーバーに送られますか？
いいえ。解析と計算はブラウザー内で行い、入力値を送信しません。
ほかの色の疑問がありますか？