ToolDeck

Tailwind Color Finder

HEXまたはRGB値に最も近いTailwind CSSカラークラスを検索します

サンプルを試す

色（HEX）

最も近いTailwindカラー

結果をクリックしてクラス名をコピーします

こちらもどうぞ：色変換ツールカラーコントラスト比チェッカーカラーパレットジェネレーターカラー名検索CSSグラデーションジェネレーター

Tailwindカラーファインダーとは？

Tailwind CSSには22のカラーファミリーからなるデフォルトカラーパレットが用意されており、各ファミリーには50（最も明るい）から950（最も暗い）までの11段階のシェードが含まれています。これにより、bg-indigo-500やtext-red-400のようなクラス名を持つ242色の事前定義カラーが使えます。デザインファイルのHEXやRGB値から最も近いTailwindクラスを見つける必要があるとき、Tailwindカラーファインダーは入力値とパレット内の全カラーの距離を計算し、最も近い候補を返します。

マッチングは、入力カラーとTailwindの各カラーをそれぞれRGBトリプレットに変換し、3次元カラー空間でのユークリッド距離を計算することで行われます: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)。距離が最小のTailwindカラーが最も近い一致として返されます。距離がゼロの場合、入力値はTailwindのデフォルトシェードと完全に一致しています。

これは汎用のカラー変換ツールやカラー名検索ツールとは異なります。変換ツールはフォーマット間の変換（HEXからHSL、RGBからCMYKなど）を行います。名前検索ツールは148種類のCSS名前付きカラーと照合します。Tailwindカラーファインダーは、Tailwind CSSのデフォルトパレットに特化して照合し、マークアップに直接貼り付けられるクラス名を返します。

このTailwindカラーファインダーを使う理由

HEX値を242色のTailwindシェードと手動で比較するには、ドキュメントや設定ファイルをスクロールしながら目視確認する必要があります。このツールは全シェードの距離計算を自動で実行し、距離順にランク付けされた上位の候補を、正確なHEX値とTailwindクラス名とともに表示します。

🎯
任意のカラーをTailwindクラスにマッピング
FigmaやSketchやブランドガイドラインからHEXコードを貼り付けると、最も近いTailwindカラークラスを即座に取得できます。ランク付きの複数の候補から、デザインの意図に合ったシェードを選べます。
🔒
プライバシー優先の処理
すべてのカラー計算はブラウザ内で実行されます。カラーの値が外部サーバーに送信されることはありません。ページ読み込み後はオフラインでも動作します。
⚡
キー入力のたびに即時マッチング
HEX入力の1文字を変更するだけで、結果がすぐに再計算されます。送信ボタンも読み込み画面もバックエンドへの通信もありません。
📋
クラス名を直接コピー
結果をクリックすると、Tailwindのクラス名（indigo-500など）をクリップボードにコピーできます。JSX・HTML・Tailwindの設定ファイルに、フォーマット変換なしで直接貼り付けられます。

Tailwindカラーファインダーのユースケース

デザインからコードへの変換
FigmaデザインからHEX値を受け取るフロントエンド開発者は、カスタムカラーを追加する代わりに最も近いTailwindクラスを見つけられます。これによりコードベースをデフォルトパレットに沿った状態に保ち、tailwind.config.jsの肥大化を防げます。
既存CSSのTailwindへの移行
レガシープロジェクトをTailwind CSSに移行するバックエンドエンジニアは、既存の各HEXカラーを検索して最も近いユーティリティクラスに置き換えられます。全カラーを最初から選び直すことなく移行を効率化できます。
デザインシステムの監査
TailwindベースのデザインシステムをレビューするDevOpsやプラットフォームチームは、カスタムカラーのうちデフォルトシェードに近いものを確認し、置き換え可能なものを特定することでパレットの管理コストを削減できます。
コンポーネントライブラリの開発
コンポーネントライブラリをテストするQAエンジニアは、サンプリングしたHEX値をファインダーに貼り付けてレンダリングされた色が期待するTailwindシェードと一致するか、距離スコアで確認できます。
データダッシュボードのテーマ設定
Tailwindスタイルのチャートライブラリでダッシュボードを構築するデータエンジニアは、ブランドカラーや顧客から提供されたHEX値を最も近いTailwindシェードにマッピングすることで、コンポーネント全体で一貫したテーマを実現できます。
Tailwindパレットの学習
Tailwind CSSを学び始めた学生や開発者は、任意のHEX値を入力してどのパレットファミリーとシェード番号に属するかを確認しながら、color-500とcolor-700の違いなどパレットへの理解を深められます。

Tailwind CSSデフォルトカラーパレット

Tailwind CSS v3には22のカラーファミリーが含まれています。各ファミリーには50・100・200・300・400・500・600・700・800・900・950の11段階のシェードがあります。500番のシェードが各ファミリーの「ベース」とみなされます。下の表は各ファミリーの最も明るい値（50）と最も暗い値（950）のHEX値を一覧にしたものです。

カラーファミリーシェード50（最も明るい）950（最も暗い）
slate11#f8fafc#020617
gray11#f9fafb#030712
zinc11#fafafa#09090b
neutral11#fafafa#0a0a0a
stone11#fafaf9#0c0a09
red11#fef2f2#450a0a
orange11#fff7ed#431407
amber11#fffbeb#451a03
yellow11#fefce8#422006
lime11#f7fee7#1a2e05
green11#f0fdf4#052e16
emerald11#ecfdf5#022c22
teal11#f0fdfa#042f2e
cyan11#ecfeff#083344
sky11#f0f9ff#082f49
blue11#eff6ff#172554
indigo11#eef2ff#1e1b4b
violet11#f5f3ff#2e1065
purple11#faf5ff#3b0764
fuchsia11#fdf4ff#350820
pink11#fdf2f8#500724
rose11#fff1f2#4c0519

Tailwind v3とv4のカラーパレット比較

Tailwind CSS v4ではカラーの定義方法が変わりますが、デフォルトのパレット名とシェード番号は同じです。

Tailwind CSS v3
カラーはtailwind.config.jsにHEX値として定義されます。デフォルトパレットには22のカラーファミリー（slateからroseまで）と各11段階のシェード（50〜950）が含まれます。カスタムカラーはtheme.extend.colorsで追加します。クラス名はbg-{color}-{shade}・text-{color}-{shade}などのパターンに従います。
Tailwind CSS v4
@themeで定義されるCSSカスタムプロパティにカラーが移行します。デフォルトパレットは同じ22ファミリー・11シェードですが、値はHEXではなくOKLCHで格納されます。カスタムカラーは@theme { --color-brand: oklch(0.5 0.2 240); } で追加します。クラス名は変わりません：bg-brand・text-indigo-500など。

コード例

RGB空間のユークリッド距離を使って、最も近いTailwindカラーをプログラムで見つけます。各例はHEX文字列を受け取り、デフォルトパレットから最も近いTailwindクラス名を返します。

JavaScript
// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)
Python
import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)
CLI (Tailwind config)
# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

よくある質問

Tailwind CSSのデフォルトパレットには何色ありますか？
Tailwind CSS v3およびv4のデフォルトパレットには242色が含まれています。22のカラーファミリー（slate・gray・zinc・neutral・stone・red・orange・amber・yellow・lime・green・emerald・teal・cyan・sky・blue・indigo・violet・purple・fuchsia・pink・rose）に、それぞれ11段階のシェード（50・100・200・300・400・500・600・700・800・900・950）があります。blackとwhiteも独立したユーティリティとして利用できます。
TailwindカラーファインダーとCSSカラー名検索ツールの違いは？
CSSカラー名検索ツールは入力値を148種類のCSS名前付きカラー（Tomato・SlateBlue・Crimsonなど）と照合します。Tailwindカラーファインダーは、Tailwindデフォルトパレットの242色と照合してred-500やindigo-400のようなクラス名を返します。Tailwindファインダーの出力はHTMLやJSXで直接使えるユーティリティクラスです。
Tailwind CSS v4プロジェクトでも使えますか？
はい。Tailwind v4のデフォルトカラーパレットはv3と同じカラー名とシェード番号を使用します。HEX値もほぼ同一です。主な違いはv4が内部的にOKLCHでカラーを格納していることですが、標準パレットの視覚的な出力はv3と一致します。非標準のOKLCH値でv4テーマをカスタマイズしている場合、このファインダーは標準パレットとのみ照合します。
結果の距離スコアは何を意味しますか？
距離スコアは、入力カラーと一致したTailwindカラーのRGB空間におけるユークリッド距離です。0は完全一致を意味します。10未満であれば非常に近く、人間の目にはほぼ見分けがつきません。30を超えると明確な違いがあります。このスコアを参考に、提案されたTailwindクラスを使うかカスタムカラーを追加するかを判断できます。
最も近いTailwindカラーをカスタムHEXの代わりに常に使うべきですか？
常にそうとは限りません。最も近いTailwindシェードとの距離が小さい（10〜15未満）場合は、デフォルトクラスに切り替えることで設定ファイルのサイズを抑えパレットの一貫性を保てます。距離が大きい場合や、正確な一致が必要な特定のブランドカラーの場合は、Tailwindの設定でカスタムカラーとして追加してください。このファインダーは正確な距離を表示することで、その判断を助けます。
グレーファミリーが5種類（slate・gray・zinc・neutral・stone）あるのはなぜですか？
各グレーファミリーには異なるアンダートーンがあります。slateは青みがかっており、青いアクセントを持つUIデザインに適しています。grayは暖色と寒色のバランスが取れたニュートラルです。zincは青みなく若干寒色寄りです。neutralは色の偏りがない真のグレーです。stoneは暖かみのある茶色のアンダートーンを持ちます。Tailwindにこの5種類が含まれているのは、カスタム設定なしでデザインの色温度に合ったグレーを選べるようにするためです。
マッチしたカラーをTailwindプロジェクトに追加するにはどうすればよいですか？
一致がデフォルトシェードと同一または非常に近い場合は、クラス名をそのまま使えます：bg-indigo-500・text-red-400・border-emerald-600など。設定の変更は不要です。Tailwindシェードに近いが完全には一致しないカスタムカラーを使いたい場合は、tailwind.config.jsのtheme.extend.colors（v3）か@themeのCSSカスタムプロパティ（v4）に追加してください。このファインダーはどちらの場合でも使えるクラス名の形式を提供します。

関連ツール

色変換ツールHEX、RGB、HSL、HSV形式間で色を変換。ビジュアルカラーピッカー付きカラーコントラスト比チェッカーテキストと背景色間のWCAG AA・AAAコントラスト比をチェックカラーパレットジェネレーター任意のベースカラーから補色・類似色・三角・四角配色スキームを生成カラー名検索HEXまたはRGB値に最も近いCSSカラー名を検索CSSグラデーションジェネレーターlinear・radialグラデーションをビジュアルで作成してCSSコードをコピー