カラーコード一括変換ツール
カラーコード一括変換ツールは、CSSコードをそのまま貼り付けるだけで、含まれるHEXカラーコードを自動抽出し、重複も1件にまとめてRGB・HSL・HSV・CMYK・CSS変数形式へ一括変換できる無料ツールです。入力データはサーバーに送信されず、ブラウザ内で処理が完結します。
カラーコードを入力すると、ここに変換結果が表示されます。
R
G
B
※入力データはサーバーに送信されません。ブラウザ内で完結して処理されます。
カラーコード一括変換ツールとは？
カラーコード一括変換ツールは、HEX形式のカラーコードを複数まとめて入力し、RGB・HSL・HSV・CMYK・CSS変数などの形式に一括で変換できる無料のWebツールです。Figmaやデザインカンプからコピーした複数の色を、コーディングに使いやすい形式へまとめて変換できるため、デザイナーからコーダーへのカラー情報の受け渡しや、CSS変数の一括生成といった作業を効率化できます。
各機能の説明
-
一括変換複数行のHEXカラーコードをまとめて入力し、一度にRGB・HSL・HSV・CMYKへ変換します。
-
テキストからの自動抽出CSSコードや文章を貼り付けると、含まれるHEXコードのみを自動で抽出して変換します。
-
CSS変数形式での出力変換結果をCSSカスタムプロパティ（–color-1など）の形式でまとめて書き出せます。
-
大文字・小文字の統一出力するHEXコードの英字表記を、大文字・小文字どちらかに一括で揃えられます。
-
単色変換モードカラーピッカーやHEX入力から、1色だけを各フォーマットへ変換して確認できます。
-
ワンクリックコピー変換結果のカードや一覧の値を、ワンクリックでクリップボードにコピーできます。
対応カラーフォーマットについて
-
HEX「#」で始まる16進数の表記。CSSやデザインツールで最も広く使われる色指定形式です。
-
RGB赤・緑・青の光の三原色を0〜255の数値で表す形式。CSSの`rgb()`関数で指定します。
-
HSL色相・彩度・明度で色を表す形式。色の鮮やかさや明るさを直感的に調整できます。
-
HSV色相・彩度・明度（Value）で表す形式。デザインソフトのカラーピッカーでよく使われます。
-
CMYKシアン・マゼンタ・イエロー・ブラックの割合で表す、印刷物向けのカラー形式です。
こんなときに使う
-
Figmaのカラーをコーディングに反映したいときデザインカンプからコピーしたHEXコードを、CSSのRGB・HSL形式にまとめて変換できます。
-
CSS変数を一括で書き出したいときデザインシステム構築時に、複数の色を`–color-1`形式の変数としてまとめて出力できます。
-
印刷物用にCMYK値を確認したいときWeb用のHEX・RGBコードから、印刷向けのCMYK値を一括で確認・変換できます。
-
表記ルールを統一したいときコード内のHEXコードの大文字・小文字表記を、まとめて統一したいときに使えます。
-
デザイナーとカラー情報をやり取りするとき共有された色のリストを、コーダーが扱いやすい形式に一括で変換して受け渡せます。
よくある質問
-
一度にどのくらいの数のカラーコードを変換できますか？
入力欄に改行で区切って入力すれば、件数に制限なくまとめて変換できます。大量のカラーコードでもブラウザ内でリアルタイムに処理されます。
-
入力したカラーコードはサーバーに送信されますか？
いいえ、送信されません。すべての変換処理はブラウザ内のJavaScriptで行われるため、入力した色情報が外部に送られることはありません。
-
HSVとHSLの違いは何ですか？
どちらも色相・彩度を含みますが、明るさの基準が異なります。HSLは白と黒の混ざり具合、HSVは光の強さに近い考え方で明度を表します。
-
CSS変数形式で出力した場合、どのような形になりますか？
「–color-1: #ff0000;」のように、入力した順番に連番の変数名が付き、:root にそのまま貼り付けて使える形式で出力されます。
-
文章やCSSコードをそのまま貼り付けても変換できますか？
「自動抽出」を有効にすると、貼り付けたテキストの中からHEX形式のカラーコードのみを自動で検出し、それぞれ変換します。