Tailwind Renk Bulucu

Tailwind Renk Bulucu Nedir?

Tailwind CSS, her biri 50 (en açık) ile 950 (en koyu) arasında 11 ton içeren 22 renk ailesinden oluşan varsayılan bir renk paleti ile gelir. Bu size bg-indigo-500 veya text-red-400 gibi sınıf adlarına sahip 242 önceden tanımlanmış renk sağlar. Bir tasarım dosyasından aldığınız HEX veya RGB değeri için en yakın Tailwind sınıfını bulmanız gerektiğinde, Tailwind renk bulucu girdiniz ile paletteki her renk arasındaki mesafeyi hesaplar ve en iyi eşleşmeleri döndürür.

Eşleştirme süreci, hem girdi renginizi hem de her Tailwind rengini RGB üçlülerine dönüştürerek 3 boyutlu renk uzayında Öklid mesafesini hesaplar: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). En küçük mesafeye sahip Tailwind rengi en yakın eşleşmedir. Mesafe sıfırsa, girdiniz tam olarak bir Tailwind varsayılan tonuna karşılık gelir.

Bu, genel bir renk dönüştürücüden veya CSS renk adı bulucudan farklıdır. Dönüştürücü formatları değiştirir (HEX'ten HSL'ye, RGB'den CMYK'ye). Ad bulucu 148 CSS adlandırılmış rengine karşı eşleştirir. Tailwind renk bulucu ise özellikle Tailwind CSS varsayılan paletine karşı eşleştirir ve doğrudan işaretlemenize yapıştırabileceğiniz sınıf adlarını döndürür.

Bu Tailwind Renk Bulucu'yu Neden Kullanmalısınız?

Bir HEX değerini 242 Tailwind tonuyla manuel olarak karşılaştırmak, dokümantasyon veya yapılandırma dosyaları arasında gezinmek anlamına gelir. Bu araç her ton için mesafe hesaplamasını yapar ve en iyi eşleşmeleri yakınlığa göre sıralayarak tam HEX değerleri ve kopyalanmaya hazır Tailwind sınıf adlarıyla gösterir.

Tailwind Renk Bulucu Kullanım Senaryoları

Tailwind CSS Varsayılan Renk Paleti

Tailwind CSS v3, 22 renk ailesi içerir. Her ailenin 11 tonu vardır: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ve 950. 500 tonu, her aile için 'taban' kabul edilir. Aşağıdaki tablo, her aileyi en açık (50) ve en koyu (950) HEX değerleriyle listeler.

Tailwind v3 ve v4 Renk Paleti

Tailwind CSS v4, renklerin nasıl tanımlandığını değiştirir ancak aynı varsayılan palet adlarını ve ton numaralarını korur.

Kod Örnekleri

RGB uzayında Öklid mesafesi kullanarak en yakın Tailwind rengini programatik olarak bulun. Her örnek bir HEX dizesi alır ve varsayılan paletten en yakın Tailwind sınıf adını döndürür.

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

Sıkça Sorulan Sorular