テキストから16進カラーコードを抽出する

16進カラーコード抽出ツールの使い方

CSS、HTML、デザインノート、または16進カラーを含むテキストを貼り付けてください。このツールは次のようなコードを見つけます #0F5C8C そして #abcその後、それらをコピーやダウンロード用にリスト表示します。処理はブラウザ上で実行されます。

1. テキストを貼り付けてください 入力ボックスに（スタイルシート、HTMLスニペット、またはデザインノート）。
2. オプションを選択
   • 重複する色を削除する — 各色を一度ずつ保持する。
   • 形式を標準化する（大文字） — 大文字の16進数に正規化する。
   • 短縮形の色（#abc）を含める — 3桁の16進数にも一致します。
   • 短縮形を6桁に展開する（#abc → #AABBCC） — 短縮形が有効なとき、#abc を #AABBCC に展開します。
   • カラーのプレビューを表示 — 値の横にスウォッチを表示します。
3. 「色コードを抽出」をクリック.
4. コピー、ダウンロード、または確認 抽出されたリストとプレビュー。

一般的な使用例

• CSS / テーマ監査: スタイルシートやデザイントークンファイルからすべての16進カラーを取得する。
• ブランドの一貫性： HTMLテンプレートやメールマークアップで使用される色を収集する。
• デザイン引き継ぎ: UIキットを再構築する前に、ノートやエクスポートしたCSSから色を抽出します。
• 掃除: パレットを統合する前に、残りの色や重複した色を見つけてください。

どの形式が検出されますか？

• 6桁の16進数: #0F5C8C, #ff5733 （ありまたはなしで # （文脈に応じて）
• 3桁の短縮形： #abc, #F00 （「短縮形式を含める」が有効な場合）
• 拡張された短縮形： #abc → #AABBCC 展開が有効なとき

RGB/HSL の関数はここでは変換されません — このツールは16進カラーコードのみを抽出します。

例：ビフォーアフター

「短縮形を含める」「短縮形を展開」「重複を削除」「形式を標準化」を有効にした場合:

.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}

#FF0000
#AABBCC
#0F5C8C

#ff0000 そして #FF0000 1つの大文字の値に統合する。短い #abc に拡大する #AABBCC.

よくある質問（FAQ）

プライバシー

すべてのマッチングは、JavaScriptを使用してお使いのデバイス上で行われます。貼り付けたテキストや抽出した色を保存することはありません。