ToolDeck

محدد أسماء الألوان

ابحث عن أقرب لون CSS مسمّى لأي قيمة HEX أو RGB

جرب مثالاً

اللون (HEX)

أقرب أسماء ألوان CSS

MediumSlateBlueالأقرب
#7B68EE
Δ 24
RoyalBlue
#4169E1
Δ 38
SlateBlue
#6A5ACD
Δ 39
CornflowerBlue
#6495ED
Δ 47
MediumPurple
#9370DB
Δ 54

Δ = مسافة اللون (كلما قلّت كانت المطابقة أدق)

ما هو اسم لون 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 الدقيقة ودرجات المسافة.

🔍
تحديد أي لون بالاسم
الصق رمز hex من ملف تصميم أو منتقي ألوان أو لقطة شاشة، واحصل فوراً على أقرب لون CSS مسمّى. تعيد الأداة 5 تطابقات مرتبة حسب المسافة لتختار الأنسب.
🔒
معالجة تُولي الخصوصية الأولوية
تعمل جميع عمليات مطابقة الألوان في متصفحك. لا تُرسل أي قيم ألوان إلى أي خادم. تعمل الأداة بدون اتصال بعد تحميل الصفحة.
نتائج فورية
تجري حسابات المسافة عند كل ضغطة مفتاح. غيّر حرفاً واحداً في مدخل hex وتتحدث النتائج المرتبة فوراً دون أي تأخير.
📋
نسخ الأسماء ورموز Hex
انقر على أي نتيجة لنسخ اسم اللون أو قيمة hex إلى الحافظة. الصق مباشرة في CSS أو متغيرات Sass أو إعدادات Tailwind أو حقول أدوات التصميم.

حالات استخدام محدد أسماء الألوان

كتابة CSS مقروء
يحصل مطورو الواجهات الأمامية الذين يستبدلون قيم hex بألوان مسماة على أوراق أنماط أسهل فحصاً في مراجعات الكود. تعبّر الألوان المسماة عن الغرض دون الحاجة إلى إضافة معاينة ألوان.
وصف استجابات API
يستطيع مهندسو الخلفية الذين يبنون واجهات برمجية مرتبطة بالألوان إرجاع تسمية مقروءة للإنسان إلى جانب رمز hex. يمنح العثور على أقرب اسم لون CSS المستخدمين نقطة مرجعية مألوفة دون الحاجة إلى الاحتفاظ بقاموس أسماء مخصص.
توثيق إمكانية الوصول
يستطيع مهندسو ضمان الجودة الذين يوثقون مشكلات تباين الألوان الإشارة إلى الألوان بأسمائها في تقارير الأخطاء. كتابة 'نص Crimson على خلفية DarkSlateGray يفشل في تباين AA' أوضح من ذكر أزواج hex.
مفاتيح تصورات البيانات
ينتج مهندسو البيانات الذين يُسمّون سلاسل الرسوم البيانية بألوان مسماة مفاتيح مقروءة دون الحاجة إلى عينة لون. الاسم 'CornflowerBlue' أكثر فائدة في سياق مطبوع أو أحادي اللون من '#6495ed'.
تسليم التصميم
حين يشارك مصمم لوناً من Figma أو Sketch كقيمة hex، يستطيع المطور البحث عن أقرب اسم CSS ومناقشته بالاسم في Slack أو تعليق على طلب سحب.
تعلم ألوان CSS
يستطيع طلاب CSS المبتدئون كتابة قيم hex عشوائية واكتشاف الألوان المسماة القريبة. تصفح نتائج المسافة يساعد على التعرف على 148 كلمة مفتاحية لونية مدمجة.

مرجع ألوان CSS المسماة حسب المجموعة

تُعرِّف مواصفة CSS Color Level 4 ما يزيد على 148 كلمة مفتاحية لون مسماة. ينظم الجدول أدناه هذه الألوان حسب مجموعة درجة اللون، مع العدد وأول بضعة أسماء لكل مجموعة. كل اسم مدرج هنا هو كلمة مفتاحية CSS صالحة تعمل في جميع المتصفحات الحديثة.

مجموعة الألوانالعددأمثلة على الأسماء
Red / Pink14IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more
Orange5Coral, Tomato, OrangeRed, DarkOrange, Orange
Yellow10Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more
Green19GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more
Blue / Cyan24Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more
Purple19Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more
Brown17Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more
Gray / White27White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more

مسافة الألوان: إقليدية RGB مقابل الإدراكية

تؤثر الطريقة المستخدمة في قياس مسافة الألوان على اللون المسمّى الذي يُبلَّغ عنه باعتباره أقرب تطابق. يوجد نهجان يمكن أن يعطيا نتائج مختلفة للمدخل نفسه.

المسافة الإقليدية RGB
تعامل R وG وB كمحاور في فضاء ثلاثي الأبعاد وتحسب المسافة المستقيمة: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). بسيطة وسريعة وتستخدمها هذه الأداة. تعمل بشكل جيد في معظم الحالات العملية لكنها قد تختلف عن الإدراك البشري في بعض انتقالات الأخضر إلى الأزرق، لأن العين البشرية أكثر حساسية للأخضر من الأزرق.
CIEDE2000 (Delta E)
صيغة مسافة إدراكية تحددها اللجنة الدولية للإضاءة (CIE). تحوّل الألوان أولاً إلى فضاء ألوان CIELAB، ثم تطبق تصحيحات للسطوع والتشبع ودرجة اللون لتتوافق مع الإدراك البشري. أكثر دقةً في الحالات الطرفية لكنها أعقد بكثير في الحساب. ضرورية لمطابقة الألوان الصناعية؛ زيادة عن الحاجة للعثور على أقرب كلمة مفتاحية CSS.

أمثلة على الكود

ابحث عن أقرب لون CSS مسمّى برمجياً باستخدام المسافة الإقليدية في فضاء RGB. يأخذ كل مثال سلسلة hex ويعيد أقرب اسم لون من مواصفة CSS.

JavaScript
// 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"
Python
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)
Go
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
}

أسئلة شائعة

كم عدد الألوان المسماة التي يدعمها CSS؟
تُعرِّف CSS Color Level 4 ما يزيد على 148 كلمة مفتاحية لون مسماة. يشمل ذلك 17 لوناً أصلياً من CSS 2.1 (مثل black وwhite وred وblue)، و140 اسم لون X11 أضيفت في CSS 3، وكلمة RebeccaPurple المضافة في CSS 4 تكريماً لابنة كاتب CSS Eric Meyer. جميع الأسماء الـ 148 غير حساسة لحالة الأحرف وتعمل في كل متصفح حديث.
ما الفرق بين محدد أسماء الألوان ومحوّل الألوان؟
يحوّل محوّل الألوان لوناً بين الصيغ: hex إلى RGB، أو HSL إلى hex، أو RGB إلى CMYK. أما محدد أسماء الألوان فيفعل شيئاً مختلفاً. يبحث في 148 لوناً CSS مسمّى ويعيد الأقرب مسافةً من مدخلك. الناتج كلمة مفتاحية (مثل Tomato أو SlateBlue)، لا تمثيل رقمي.
ما مدى دقة المسافة الإقليدية RGB في مطابقة الألوان؟
تعطي المسافة الإقليدية RGB نتائج صحيحة في غالبية عمليات البحث عن الألوان. قد تنتج تطابقات غير متوقعة في نطاق الأخضر والأزرق لأن العيون البشرية تدرك الأخضر بشكل أكثر حدةً من الأزرق، بينما يعامل نموذج RGB القنوات الثلاث بالتساوي. في مهام تطوير الويب كالعثور على أقرب كلمة مفتاحية CSS، نادراً ما يكون للفارق أثر عملي.
هل يمكنني استخدام أسماء ألوان CSS في JavaScript؟
نعم. تقبل واجهة برمجة CSS.supports() وسياق canvas ثنائي الأبعاد وسمات fill/stroke في SVG الألوان المسماة. يمكنك تعيين element.style.backgroundColor = 'Tomato' مباشرة. تعمل الألوان المسماة أيضاً في خصائص CSS المخصصة ومع دالة getComputedStyle()، وإن كانت المتصفحات تعيد القيمة المحسوبة بصيغة rgb() بصرف النظر عن طريقة تعيينك لها.
لماذا يحمل بعض الألوان أسماء غريبة مثل PapayaWhip أو BlanchedAlmond؟
تأتي هذه الأسماء من قاعدة بيانات ألوان X11 التي أُنشئت لنظام X Window على محطات Unix في ثمانينيات القرن الماضي. اختار مؤلفوها الأصليون الأسماء دون اتفاقية تسمية رسمية. حين اعتمدت CSS ألوان X11 في Level 3، احتفظت بالأسماء الموجودة للتوافق مع الإصدارات السابقة. النتيجة مزيج من أسماء وصفية (DarkRed)، وإشارات إلى الطعام (PapayaWhip وChocolate وSalmon)، ومصطلحات جغرافية (Peru وSienna).
هل RebeccaPurple لون CSS رسمي؟
نعم. أُضيف RebeccaPurple (#663399) إلى مواصفة CSS Color Level 4 في 2014. اقترحته مجموعة عمل CSS تخليداً لذكرى Rebecca Meyer، ابنة كاتب CSS Eric Meyer، التي توفيت بسبب سرطان الدماغ في سن السادسة. يدعم اللون في جميع المتصفحات الصادرة بعد 2014.
ماذا يحدث حين يكون مدخل hex متساوي المسافة من لونين مسمّيين؟
حين يكون لونان مسمّيان على مسافة إقليدية متطابقة من المدخل، تعتمد النتيجة على ترتيب التكرار. تمر هذه الأداة عبر قائمة ألوان CSS أبجدياً وتحتفظ بأول تطابق تجده. عملياً، نادرة التعادلات التامة لأن الألوان الـ 148 المسماة موزعة بشكل غير متساوٍ عبر فضاء RGB. يملك معظم مدخلات hex تطابقاً وحيداً هو الأقرب.