Renk Adı Bulucu

CSS Renk Adı Nedir?

CSS, tarayıcıların sayısal kod yerine anahtar kelimeyle tanıdığı 148 adlandırılmış renk tanımlar. Bir stil sayfasına #ff6347 yazmak yerine Tomato yazabilirsiniz. #6a5acd yerine SlateBlue yazabilirsiniz. Bu adlar, CSS Color Level 3 (2011) ve Level 4 (2022) sürümlerinde standartlaştırılmıştır; CSS 2.1'deki orijinal 17 renk ve erken Unix pencere sistemlerinden miras alınan 140 X11 renk adı temel alınmıştır.

Renk adı bulucu, rastgele bir hex veya RGB değeri alarak en yakın CSS adlı rengini bulur. Eşleştirme algoritması, RGB uzayındaki iki renk arasındaki mesafeyi hesaplar; genellikle Öklid mesafesi kullanılır: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Girdinize en küçük mesafedeki adlandırılmış renk kazanır. Mesafe sıfırsa, girdiniz o adla tam olarak eşleşiyordur.

Bu, okunabilir ve kendini belgeleyen CSS yazmak istediğinizde önem kazanır. background-color: Tomato gibi bir kural, background-color: #ff6347'ye kıyasla amacı çok daha hızlı iletir. Ayrıca bir tasarım incelemesi, erişilebilirlik denetimi veya belge yazımında renklere sözlü olarak atıfta bulunmanız gerektiğinde de işe yarar. 'Şu kırmızımsı-turuncu renk' demek yerine 'Tomato' diyebilirsiniz.

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

En yakın adlandırılmış rengi elle aramak, 148 girişli bir referans tablosunu kaydırmak ve hex değerlerini gözle karşılaştırmak anlamına gelir. Bu araç mesafe hesaplamasını sizin için yapar ve tam hex kodları ile mesafe puanlarıyla birlikte en yakın 5 eşleşmeyi döndürür.

Renk Adı Bulucu Kullanım Senaryoları

Gruba Göre CSS Adlandırılmış Renkler Referansı

CSS Color Level 4 spesifikasyonu 148 adlandırılmış renk anahtar kelimesi tanımlar. Aşağıdaki tablo bunları ton grubuna göre düzenlemekte; her grup için sayı ve ilk birkaç adı göstermektedir. Burada listelenen her ad, tüm modern tarayıcılarda geçerli bir CSS renk anahtar kelimesidir.

Renk Mesafesi: Öklid RGB ile Algısal Karşılaştırması

Renk mesafesini ölçmek için kullanılan yöntem, en yakın eşleşme olarak hangi adlandırılmış rengin raporlandığını etkiler. İki yaklaşım mevcuttur ve aynı girdi için farklı sonuçlar verebilirler.

Kod Örnekleri

RGB uzayında Öklid mesafesini kullanarak en yakın CSS adlı rengi programatik olarak bulun. Her örnek bir hex dizesi alır ve CSS spesifikasyonundan en yakın renk adını döndürür.

// Euclidean distance in RGB space
function nearestCssColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  let bestName = ''
  let bestDist = Infinity

  for (const [name, value] of Object.entries(cssColors)) {
    const r2 = parseInt(value.slice(1, 3), 16)
    const g2 = parseInt(value.slice(3, 5), 16)
    const b2 = parseInt(value.slice(5, 7), 16)
    const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (dist < bestDist) { bestDist = dist; bestName = name }
  }
  return bestName
}

nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"

import math

CSS_COLORS = {
    "Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
    "Tomato": (255, 99, 71), "Teal": (0, 128, 128),
    # ... full list of 148 entries
}

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

def nearest_css_color(hex_str: str) -> str:
    r, g, b = hex_to_rgb(hex_str)
    best = min(
        CSS_COLORS.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return best[0]

print(nearest_css_color("#6366f1"))  # → SlateBlue
print(nearest_css_color("#ff6347"))  # → Tomato (exact match, distance 0)

package main

import (
	"fmt"
	"math"
	"strconv"
)

type CSSColor struct {
	Name    string
	R, G, B int
}

var colors = []CSSColor{
	{"Crimson", 220, 20, 60},
	{"SlateBlue", 106, 90, 205},
	{"Tomato", 255, 99, 71},
	// ... full list
}

func hexToRGB(hex string) (int, int, int) {
	r, _ := strconv.ParseInt(hex[1:3], 16, 64)
	g, _ := strconv.ParseInt(hex[3:5], 16, 64)
	b, _ := strconv.ParseInt(hex[5:7], 16, 64)
	return int(r), int(g), int(b)
}

func nearest(hex string) string {
	r, g, b := hexToRGB(hex)
	best := ""
	bestDist := math.MaxFloat64
	for _, c := range colors {
		d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
		if d < bestDist {
			bestDist = d
			best = c.Name
		}
	}
	return best
}

func main() {
	fmt.Println(nearest("#6366f1")) // → SlateBlue
}

Sıkça Sorulan Sorular