محدد أسماء الألوان
ابحث عن أقرب لون CSS مسمّى لأي قيمة HEX أو RGB
اللون (HEX)
أقرب أسماء ألوان CSS
Δ = مسافة اللون (كلما قلّت كانت المطابقة أدق)
ما هو اسم لون CSS؟
تُعرِّف CSS ما يزيد على 148 لوناً مسمّى تتعرف عليه المتصفحات بكلمة مفتاحية بدلاً من رمز رقمي. بدلاً من كتابة #ff6347 في ورقة الأنماط، يمكنك كتابة Tomato. وبدلاً من #6a5acd، يمكنك كتابة SlateBlue. جرى توحيد هذه الأسماء في CSS Color Level 3 (2011) وLevel 4 (2022)، بناءً على 17 لوناً أصلياً من CSS 2.1 و140 اسم لون من X11 موروثة من أنظمة Unix القديمة.
يأخذ محدد أسماء الألوان أي قيمة hex أو RGB ويحدد أقرب لون CSS مسمّى إليها. تحسب خوارزمية المطابقة المسافة بين لونين في فضاء RGB، وغالباً تكون مسافة إقليدية: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). يفوز اللون المسمّى الأقرب مسافةً من مدخلك. إذا كانت المسافة صفراً، فمدخلك يطابق ذلك الاسم تماماً.
هذا مهم حين تريد كتابة CSS مقروء يوثّق نفسه بنفسه. قاعدة مثل background-color: Tomato تعبّر عن الغرض بشكل أسرع من background-color: #ff6347. كما يفيد ذلك حين تحتاج إلى الإشارة إلى لون شفهياً في مراجعة تصميم، أو تدقيق إمكانية الوصول، أو توثيق. بدلاً من قول 'ذلك اللون البرتقالي المائل إلى الحمرة'، يمكنك قول 'Tomato'.
لماذا تستخدم محدد أسماء الألوان هذا؟
البحث يدوياً عن أقرب لون مسمّى يعني التمرير عبر جدول مرجعي يضم 148 مدخلاً وتخمين قيم hex بصرياً. تجري هذه الأداة حساب المسافة نيابةً عنك وتعيد أفضل 5 تطابقات مع رموز hex الدقيقة ودرجات المسافة.
حالات استخدام محدد أسماء الألوان
مرجع ألوان CSS المسماة حسب المجموعة
تُعرِّف مواصفة CSS Color Level 4 ما يزيد على 148 كلمة مفتاحية لون مسماة. ينظم الجدول أدناه هذه الألوان حسب مجموعة درجة اللون، مع العدد وأول بضعة أسماء لكل مجموعة. كل اسم مدرج هنا هو كلمة مفتاحية CSS صالحة تعمل في جميع المتصفحات الحديثة.
| مجموعة الألوان | العدد | أمثلة على الأسماء |
|---|---|---|
| Red / Pink | 14 | IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more |
| Orange | 5 | Coral, Tomato, OrangeRed, DarkOrange, Orange |
| Yellow | 10 | Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more |
| Green | 19 | GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more |
| Blue / Cyan | 24 | Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more |
| Purple | 19 | Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more |
| Brown | 17 | Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more |
| Gray / White | 27 | White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more |
مسافة الألوان: إقليدية RGB مقابل الإدراكية
تؤثر الطريقة المستخدمة في قياس مسافة الألوان على اللون المسمّى الذي يُبلَّغ عنه باعتباره أقرب تطابق. يوجد نهجان يمكن أن يعطيا نتائج مختلفة للمدخل نفسه.
أمثلة على الكود
ابحث عن أقرب لون CSS مسمّى برمجياً باستخدام المسافة الإقليدية في فضاء RGB. يأخذ كل مثال سلسلة hex ويعيد أقرب اسم لون من مواصفة 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
}