Color Name Finder

Apa Itu Nama Warna CSS?

CSS mendefinisikan 148 warna bernama yang dikenali browser menggunakan kata kunci, bukan kode numerik. Alih-alih menulis #ff6347 di stylesheet, Anda bisa menulis Tomato. Alih-alih #6a5acd, Anda bisa menulis SlateBlue. Nama-nama ini telah distandarisasi dalam CSS Color Level 3 (2011) dan Level 4 (2022), dibangun di atas 17 warna asli dari CSS 2.1 dan 140 nama warna X11 yang diwarisi dari sistem Unix awal.

Color Name Finder mengambil nilai hex atau RGB sembarang dan menemukan warna CSS bernama yang paling dekat dengannya. Algoritma pencocokan menghitung jarak antara dua warna dalam ruang RGB, biasanya menggunakan jarak Euclidean: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Warna bernama dengan jarak terkecil ke masukan Anda yang menang. Jika jaraknya nol, masukan Anda adalah kecocokan persis untuk nama tersebut.

Hal ini penting ketika Anda ingin CSS yang mudah dibaca dan mendokumentasikan dirinya sendiri. Aturan seperti background-color: Tomato menyampaikan maksud lebih cepat daripada background-color: #ff6347. Ini juga membantu ketika Anda perlu merujuk warna secara lisan dalam tinjauan desain, audit aksesibilitas, atau dokumentasi. Alih-alih mengatakan 'yang merah-oranye itu,' Anda bisa mengatakan 'Tomato.'

Mengapa Menggunakan Color Name Finder Ini?

Mencari nama warna terdekat secara manual berarti menggulir tabel referensi 148 entri dan menebak nilai hex. Alat ini melakukan perhitungan jarak untuk Anda dan mengembalikan 5 kecocokan terdekat beserta kode hex persis dan skor jaraknya.

Kasus Penggunaan Color Name Finder

Referensi Warna Bernama CSS Berdasarkan Kelompok

Spesifikasi CSS Color Level 4 mendefinisikan 148 kata kunci warna bernama. Tabel di bawah ini mengorganisasikannya berdasarkan kelompok rona, dengan jumlah dan beberapa nama pertama per kelompok. Setiap nama yang tercantum di sini adalah kata kunci warna CSS yang valid dan berfungsi di semua browser modern.

Jarak Warna: Euclidean RGB vs Perseptual

Metode yang digunakan untuk mengukur jarak warna mempengaruhi warna bernama mana yang dilaporkan sebagai kecocokan terdekat. Ada dua pendekatan, dan keduanya bisa memberikan hasil berbeda untuk masukan yang sama.

Contoh Kode

Temukan nama warna CSS terdekat secara terprogram menggunakan jarak Euclidean dalam ruang RGB. Setiap contoh mengambil string hex dan mengembalikan nama warna terdekat dari spesifikasi CSS.

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

Pertanyaan yang Sering Diajukan