カラーコード一括変換ツール

カラーコードの一覧やCSSを貼り付けるだけで、色だけをまとめて変換します

カラーコード一括変換ツールは、貼り付けた文章から色を見つけ、HEX、RGB、HSL、OKLCHのうち選んだ形式にまとめて変換するツールです。1行に1色ずつ書いた一覧はもちろん、CSS・SCSSファイルやデザイントークンのJSONのように、色の間に名前や記号が混在した文章もそのまま入力できます。上のサンプルをRGBに変換すると、変数 --brand の値 #3498DB は rgb(52, 152, 219) に、アルファ値を持つ #00000080 は rgba(0, 0, 0, 0.5) になります。出力を「原文のまま」にすると、変数名・コメント・インデントは残して色の値だけを置き換え、「値を1行ずつ」にすると、見つかった色の値だけを一覧にして書き出します。

入力欄では、行ごとに左側へ見つかった色の見本が付き、読み取れなかった行には感嘆符が付きます。上部のパレット帯では見つかった色をひと目で確認でき、下のカラーカードでは1色のHEX、RGB、HSL、OKLCHの値をまとめて確認して、押すとそのままコピーできます。並べ替えを色相順や明るい順に変えたり、同じ色をまとめる機能をオンにしたりすると、パレットの見本が新しい位置へ動き、重複した色や似た色が見分けやすくなります。入力した文章やファイルはサーバーに送信せず、このブラウザー内だけで処理します。

カラーコードをまとめて変換したい場面

• Tailwind CSS v4の色をHEXに移すとき: Tailwind CSS v4は、標準のカラーパレットをoklch()の値で定義しています。HTMLメールのテンプレート、ドキュメント、古いデザインツールなど、HEXやRGBしか受け付けない場所で同じ色を使いたいときは、テーマ変数の行をそのまま貼り付けてHEXに変換するだけです。
• デザインカンプの配色表をコードに渡すとき: デザイナーからHEXの一覧で受け取ったブランドカラーを、開発側でrgb()やhsl()として使いたい場合や、逆にコード上のrgb()の値をデザインツールにHEXで入力したい場合があります。名前の付いた行は名前を保ったまま変換するので、どの変数の値なのか分からなくなることがありません。
• 古いCSSをOKLCHに書き換えるとき: OKLCHは明るさ・彩度・色相角で色を表すため、同じ明るさの色をそろえたり、段階的な色を作ったりしやすい形式です。CSSファイルを貼り付けてOKLCHに変換すれば、セレクターとプロパティはそのままで、値だけが新しい表記に変わります。
• 散らばった色を整理するとき: 複数人が手を入れたスタイルシートには、#3498dbと#3498DB、rgb(52, 152, 219)のように、表記だけが違う同じ色が混在しがちです。同じ色をまとめる機能をオンにすると、何回出てきたか、どの行にあったかが分かり、色相順に並べ替えるとほぼ同じ色が隣り合うので、統合する候補を選びやすくなります。
• スプレッドシートのR・G・B 3列を変換するとき: 表からR・G・Bの3セルをコピーして貼り付けると、1行にタブで区切られた3つの数値が入ります。この行も色として読み取るので、そのままHEXの一覧を作れます。

色を見つけるルール

1. 行全体が1つの値の場合: #付きのHEX(3・4・6・8桁)、rgb()、 rgba()、 hsl()、 hsla()、 hwb()、 lab()、 lch()、 oklab()、 oklch()、 color()、CSSの色名(tomato、rebeccapurpleなど148色)を読み取ります。文章全体が1行に1つずつ書いた一覧のとき(波括弧・角括弧・コロン・等号・セミコロンがないとき)は、「#なし」のHEXとR・G・Bも受け付けます。「#なし」のHEXは3桁と6桁を受け付け、8桁はa〜fの文字が1つでも含まれるときだけ受け付けます。20241020のように数字だけの8桁は日付の可能性があるため、色とは見なしません。12, 34, 56 やタブで区切られた整数3つは、R・G・Bとして読み取ります。
2. 文章の中に混ざっている場合: 行の中にある、#で始まるHEXと色関数をすべて探します。border: 1px solid #ddd; のように他の値と一緒にあっても色の部分だけを変換し、1行に色が2つ以上あればそれぞれを変換します。色名は、"danger": "crimson" のように引用符の中に名前だけがある場合や、border: 1px solid red !important; のように値の中の単語としてある場合に変換します。コメント内の単語、JSONのキー、.red-button のように他の単語の一部になっているものは変換しません。
3. 値の位置だけを変換: #add、#bad、#face のようにHEXの文字だけでできたIDセレクターは、色と同じ形をしています。そのため、波括弧のある文章(CSS・SCSS・JSON・設定ファイル)では、値の位置にある#の値だけを変換します。直前にいちばん近い {、}、; の後にコロン(:)か等号(=)があるときに値の位置と見なし、コロンがないまま { に続くセレクターや @media の前置部分、url(#…) の中の値はそのまま残します。a:hover #add { color: #fff; } では #fff だけが変わります。
4. 名前を付ける: --brand: …、$brand: …、"brand": …、brand = … のように行頭に名前があれば、カラーカードと表にその名前を書きます。color、background、border などのCSSプロパティ名は色の名前ではないので、書きません。
5. 読み取れなかった行: 桁数が合わないHEX(#12345)、範囲を超えたR・G・Bの数値(256, 0, 0)、括弧内の値の個数や単位が誤っている関数はエラーとして表示し、出力では原文をそのまま残します。文章全体が一覧のときは、コード記号のない短い1〜2語の行も、誤って書かれた値として表示します。CSS・JSONのようにコードが混在した文章では、@import の行、コメント、margin: 0; のように色のない行はエラーにならず、そのまま通過します。

形式ごとの書き方

RGBとHSLは、カンマで区切る従来の表記で書きます。最近のCSSは rgb(52 152 219) のようにスペースで区切る表記も読み取れますが、カンマ表記は古いブラウザーや多くのデザインツールでも読み取れるためです。末尾の0は省いて、hsl(32, 100%, 50%) のように書きます。

HSLとOKLCHは、整数に丸めません。整数で書くと、元とは別の色に戻ってしまうことが多いためです。たとえば #3498DB を hsl(204, 70%, 53%) と書いてから読み直すと、#3398DB になります。上の表の桁数で書けば、8ビットsRGBの16,777,216色すべてが、読み直したときに元と同じHEXへ戻ります。OKLCHのCを小数第4位までしか書かないと、標本140,608色のうち94色が1段階ずれるため、小数第5位まで書きます。

例: 最初の画面の10行をRGBに変換すると

このサンプルで見つかる色は9個で、2行目と9行目が同じ色なので、異なる色は8個です。同じ色をまとめる機能をオンにすると、パレットとカラーカードには #3498DB が1つだけ残り、×2 と行番号 2、9 が付きます。出力を「値を1行ずつ」にすると、コメント行と変数名が消えて、rgb()の値9個(まとめると8個)だけが残ります。

sRGB外の色は最も近い色に調整します

HEXとRGBは、sRGB色空間の値しか書けません。OKLCH、lab()、color(display-p3 …) で書いた色はsRGBより広い範囲を表せるため、非常に鮮やかな色はHEXにそのまま移せません。このツールは、そうした色をHEX、RGB、HSLで出力するとき、W3C CSS Color 4の色域マッピングの方法に従います。OKLCHで明るさと色相角は変えず、彩度だけを二分探索で下げていき、sRGBの端の値に丸めた色との差(deltaEOK)が、肉眼ではほとんど区別できない0.02を下回ったところで止めます。各チャンネルを単純に0〜255へ丸める方法より、色相角のずれが小さくなります。

sRGB外の色には、カラーカードに「sRGB外」の表示が付き、見本の上半分には元の色を、下半分には調整した色を塗ります。広い色域に対応した画面では、上半分のほうが鮮やかに見えます。OKLCHに変換するときは調整せずに元の値をそのまま書くので、広い色域の色を失いたくない場合は、OKLCHの結果を使い、HEXはsRGB画面用の代替値として併記する方法が安全です。

アルファ値は8桁HEXとrgba()に移します

8桁HEXの最後の2桁と、4桁HEXの最後の1桁がアルファ値(不透明度)です。00なら完全に透明、FFなら不透明です。このツールは、アルファ値を0〜255の段階に合わせたうえで、CSS Color 4の定めに従って、rgba()、 hsla()、 oklch()に書く数値を選びます。2.55倍して四捨五入するとその段階になる0〜100の整数があれば、その数を100で割って書き、なければ小数第3位まで書きます。そのため、80(128段階)は 0.50196… ではなく 0.5 と書かれます。

間違えやすいケース

• 3桁HEXの前を0で埋めてしまう場合: #f80 は #000F80 ではなく、1文字ずつ2回書いた #FF8800 です。4桁の #f808 も同じ方法で #FF880088 になります。
• HSLを整数に丸めてしまう場合: 上で見たとおり、hsl(204, 70%, 53%) は #3498DB ではなく #3398DB です。他のツールの整数HSLの値をそのまま書き写した場合、HEXが1〜2段階ずれることがあります。
• 範囲を超えたrgb()の値: CSSは rgb(300, 0, 0) を不正な値とは見なさず、255に丸めて rgb(255, 0, 0) として描画します。このツールも同じ方法で変換し、カラーカードに「範囲外」と表示します。カンマ区切りで書いた3つの数値(256, 0, 0)はCSSの構文ではないため、丸めずにエラーとして扱います。
• 「#」のない数字: 2024 のように数字だけの4桁や8桁は、色として読み取りません。4桁HEXを使うときは、#2024 のように#を付けてください。「#なし」のHEXは一覧でだけ読み取るため、JSONの文章の中にある 640 のような数字が色に変わることもありません。
• 単語の中の色名: .red-button や /* blue */ の中にある red、blue は変換しません。色名は、行全体がそれである場合か、値の位置にある単語の場合だけ変換します。
• エラー行を除いて貼り付ける場合: 「値を1行ずつ」の出力からは、読み取れなかった行が抜けるため、元の表の行数と一致しなくなります。行を合わせる必要があるときは、ステータス行の行番号を見て先に修正するか、「原文のまま」を使ってください。

制限と注意点

• 一度に変換できるのは100,000文字、色1,000個までです。それより大きいファイルは分けて入力してください。「開く」はUTF-8のテキストファイルだけを読み取ります。
• var(--brand) と color-mix() は他の値を計算しないと決まらない色なので、そのまま残します。color-mix() の中に直接書いた #fff のような色は1つずつ変換し、rgb(from …) のような相対カラーや、色関数の中に var()・calc() を含む値は、読み取れない値として表示します。currentColor や inherit のようなキーワードもそのまま残します。
• color() が読み取る色空間は、srgb、srgb-linear、display-p3、xyz(xyz-d65・xyz-d50)だけです。a98-rgb、prophoto-rgb、rec2020 はエラーとして表示します。
• HEX、RGB、HSLの値は、8ビット(0〜255)のsRGBに丸めた色です。同じHEXでも、画面の色設定や明るさによって見え方が異なることがあります。
• sRGB外の色を調整したHEXは、CSS Color 4の方法で計算した値です。ブラウザーが広い色域の画面にその色を描画する方法や、他のツールが丸める方法とは、1〜2段階異なることがあります。
• 印刷用のCMYKやICCプロファイルは扱いません。印刷する色にはRGB・CMYK変換ツールを、1色を詳しく見るときはHEX→RGB変換ツールを使ってください。
• HEXの出力は大文字に統一します。Excelファイルの見本セルはアルファ値なしで塗り、アルファ値はメモ欄に書きます。CSVは =、+、-、@ で始まるセルの前にアポストロフィ(')を付けて数式として実行されないようにするため、--brand のような名前は '--brand と書かれます。名前をそのまま残したいときはExcelファイルを使ってください。

この記事の表の値は、2026年10月20日にこのツールで計算したものです。変換式と色域マッピングは W3C CSS Color 4 勧告候補草案(2026年10月9日版)に従っており、年ごとに変わる規則ではありません。Tailwind の色の値は同じ日に Tailwind CSS のドキュメントで確認したもので、Tailwind がパレットを変えると変わることがあります。

出典

• 01W3C — CSS Color Module Level 4§5.1 範囲外のrgb()の値は端の値に丸める、§5.2 HEX 3・4・6・8桁、§6.1 色名148色、§9.4 oklch()の%の基準、§14.2.2 色域マッピング(JND 0.02)、§16.1.1 アルファ値のシリアライズ
• 02MDN — <hex-color>#RGB、#RGBA、#RRGGBB、#RRGGBBAAの4つの表記、1桁の値は2回繰り返す
• 03MDN — oklch()明るさ・彩度・色相角とアルファ値の書き方、相対カラーの構文
• 04Tailwind CSS — Tailwind CSS v4.0広い色域の画面に合わせた新しいP3カラーパレット
• 05Tailwind CSS — Colors標準の色をoklch()のテーマ変数で定義、red-500 oklch(63.7% 0.237 25.331) など
• 06Björn Ottosson — A perceptual color space for image processingOklab色空間の設計目的と変換式

よくある質問

あわせて使いたいツール