Tailwind Color Finder

Apa Itu Tailwind Color Finder?

Tailwind CSS hadir dengan palet warna bawaan yang terdiri dari 22 kelompok warna, masing-masing berisi 11 shade mulai dari 50 (paling terang) hingga 950 (paling gelap). Ini menghasilkan 242 warna yang telah ditentukan dengan nama kelas seperti bg-indigo-500 atau text-red-400. Ketika Anda memiliki nilai HEX atau RGB dari file desain dan perlu menemukan kelas Tailwind yang paling mendekati, Tailwind Color Finder menghitung jarak antara input Anda dan setiap warna dalam palet, lalu mengembalikan hasil yang paling cocok.

Proses pencocokan bekerja dengan mengonversi warna input Anda dan setiap warna Tailwind ke triplet RGB, lalu menghitung jarak Euclidean dalam ruang warna 3D: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Warna Tailwind dengan jarak terkecil adalah hasil yang paling mendekati. Jika jaraknya nol, input Anda bersesuaian persis dengan salah satu shade bawaan Tailwind.

Ini berbeda dari color converter umum atau color name finder. Sebuah converter mengubah format (HEX ke HSL, RGB ke CMYK). Color name finder mencocokkan terhadap 148 warna bernama CSS. Tailwind Color Finder mencocokkan khusus terhadap palet bawaan Tailwind CSS, mengembalikan nama kelas yang dapat langsung Anda tempelkan ke dalam markup.

Mengapa Menggunakan Tailwind Color Finder Ini?

Membandingkan nilai HEX secara manual terhadap 242 shade Tailwind berarti menelusuri dokumentasi atau file konfigurasi. Alat ini menjalankan perhitungan jarak untuk setiap shade dan menampilkan hasil terbaik yang diurutkan berdasarkan kedekatan, beserta nilai HEX yang tepat dan nama kelas Tailwind yang siap disalin.

Kasus Penggunaan Tailwind Color Finder

Palet Warna Bawaan Tailwind CSS

Tailwind CSS v3 mencakup 22 kelompok warna. Setiap kelompok memiliki 11 shade: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, dan 950. Shade 500 dianggap sebagai 'dasar' setiap kelompok. Tabel di bawah ini mencantumkan setiap kelompok beserta nilai HEX yang paling terang (50) dan paling gelap (950).

Palet Warna Tailwind v3 vs v4

Tailwind CSS v4 mengubah cara warna didefinisikan tetapi mempertahankan nama palet bawaan dan nomor shade yang sama.

Contoh Kode

Temukan warna Tailwind terdekat secara terprogram menggunakan jarak Euclidean dalam ruang RGB. Setiap contoh menerima string HEX dan mengembalikan nama kelas Tailwind yang paling mendekati dari palet bawaan.

// 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)

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)

# 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

Pertanyaan yang Sering Diajukan