CSS تعداد ۱۴۸ رنگ نامدار تعریف کرده که مرورگرها آنها را با کلیدواژه میشناسند، نه با کد عددی. به جای نوشتن #ff6347 در استایلشیت، میتوانید Tomato بنویسید. به جای #6a5acd میتوانید SlateBlue بنویسید. این نامها در CSS Color Level 3 (2011) و Level 4 (2022) استانداردسازی شدند و بر پایه ۱۷ رنگ اصلی CSS 2.1 و ۱۴۰ نام رنگ X11 به ارث رسیده از سیستمهای یونیکس اولیه بنا شدند.
یابنده نام رنگ یک مقدار hex یا RGB دلخواه را دریافت میکند و نزدیکترین رنگ نامدار CSS را پیدا میکند. الگوریتم تطبیق، فاصله بین دو رنگ را در فضای RGB محاسبه میکند؛ معمولاً فاصله اقلیدسی: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). رنگ نامداری که کمترین فاصله را با ورودی شما دارد انتخاب میشود. اگر فاصله صفر باشد، ورودی شما دقیقاً با آن نام مطابقت دارد.
این موضوع زمانی اهمیت دارد که بخواهید CSS خوانا و خودمستند بنویسید. یک قانون مانند background-color: Tomato مفهوم را سریعتر از background-color: #ff6347 میرساند. همچنین وقتی نیاز دارید در یک بازبینی طراحی، ممیزی دسترسیپذیری، یا مستندات به رنگی اشاره کنید کمک میکند. به جای گفتن «آن رنگ قرمز-نارنجی»، میتوانید بگویید «Tomato».
چرا از این یابنده نام رنگ استفاده کنیم؟
پیدا کردن نزدیکترین رنگ نامدار به صورت دستی یعنی پیمایش یک جدول مرجع ۱۴۸ ردیفی و تخمین مقادیر hex با چشم. این ابزار محاسبه فاصله را برای شما انجام میدهد و ۵ نزدیکترین تطابق را با کدهای hex دقیق و امتیاز فاصله برمیگرداند.
🔍
شناسایی هر رنگ با نام
یک کد hex از فایل طراحی، انتخابگر رنگ، یا تصویر وارد کنید و فوری نزدیکترین رنگ نامدار CSS را دریافت کنید. ابزار ۵ تطابق را بر اساس فاصله رتبهبندی میکند تا بتوانید بهترین گزینه را انتخاب کنید.
🔒
پردازش با اولویت حریم خصوصی
تمام تطبیق رنگ در مرورگر شما اجرا میشود. هیچ مقدار رنگی به هیچ سروری ارسال نمیشود. ابزار پس از بارگذاری صفحه به صورت آفلاین هم کار میکند.
⚡
نتایج فوری
محاسبات فاصله با هر ضربه کلید اجرا میشوند. با تغییر یک کاراکتر در ورودی hex، نتایج رتبهبندیشده بلافاصله و بدون هیچ تأخیری بهروز میشوند.
📋
کپی نامها و کدهای HEX
روی هر نتیجه کلیک کنید تا نام رنگ یا مقدار hex را در کلیپبورد کپی کنید. مستقیماً در CSS، متغیرهای Sass، تنظیمات Tailwind، یا فیلدهای ابزار طراحی جایگذاری کنید.
موارد استفاده از یابنده نام رنگ
نگارش CSS خوانا
توسعهدهندگان فرانتاند که مقادیر hex را با رنگهای نامدار جایگزین میکنند، استایلشیتهایی به دست میآورند که در بازبینی کد راحتتر اسکن میشوند. رنگهای نامدار مفهوم را بدون نیاز به افزونه پیشنمایش رنگ میرسانند.
برچسبگذاری پاسخهای API
مهندسان بکاند که APIهای مرتبط با رنگ میسازند میتوانند در کنار کد hex یک برچسب قابلفهم برگردانند. پیدا کردن نزدیکترین نام رنگ CSS به کاربران یک نقطه مرجع آشنا میدهد بدون اینکه نیاز به نگهداری یک دیکشنری سفارشی باشد.
مستندسازی دسترسیپذیری
مهندسان QA که مشکلات کنتراست رنگ را مستند میکنند میتوانند در گزارشهای باگ به رنگها با نام اشاره کنند. نوشتن «متن Crimson روی پسزمینه DarkSlateGray در کنتراست AA شکست میخورد» از ارجاع به جفتهای hex روشنتر است.
راهنمای نمودار داده
مهندسان داده که سریهای نمودار را با رنگهای نامدار برچسب میزنند، راهنماهایی تولید میکنند که بدون نمونه رنگ قابل خواندن هستند. نام «CornflowerBlue» در یک زمینه چاپی یا تکرنگ مفیدتر از «#6495ed» است.
تحویل طراحی
وقتی یک طراح رنگی را از Figma یا Sketch به صورت مقدار hex به اشتراک میگذارد، یک توسعهدهنده میتواند نزدیکترین نام CSS را جستجو کند و در Slack یا کامنت pull request با نام از آن یاد کند.
یادگیری رنگهای CSS
دانشجویانی که CSS را کاوش میکنند میتوانند مقادیر hex دلخواه تایپ کنند و کشف کنند کدام رنگهای نامدار در نزدیکی وجود دارند. مرور نتایج فاصله، آشنایی با ۱۴۸ کلیدواژه رنگ داخلی را افزایش میدهد.
مرجع رنگهای نامدار CSS بر اساس گروه
مشخصات CSS Color Level 4 تعداد ۱۴۸ کلیدواژه رنگ نامدار تعریف میکند. جدول زیر آنها را بر اساس گروه رنگ سازماندهی میکند، با تعداد و چند نام اول هر گروه. هر نامی که در اینجا فهرست شده یک کلیدواژه رنگ معتبر 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 در مقابل ادراکی
روشی که برای اندازهگیری فاصله رنگ استفاده میشود تأثیر میگذارد که کدام رنگ نامدار به عنوان نزدیکترین تطابق گزارش شود. دو رویکرد وجود دارد که میتوانند برای همان ورودی نتایج متفاوتی بدهند.
فاصله اقلیدسی 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"
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 تعداد ۱۴۸ کلیدواژه رنگ نامدار تعریف میکند. این شامل ۱۷ رنگ اصلی CSS 2.1 (مانند black، white، red، blue)، ۱۴۰ نام رنگ X11 اضافهشده در CSS 3، و کلیدواژه RebeccaPurple اضافهشده در CSS 4 به یادبود دختر نویسنده CSS، اریک مایر، میشود. تمام ۱۴۸ نام به بزرگی و کوچکی حروف حساس نیستند و در هر مرورگر مدرنی کار میکنند.
تفاوت بین یابنده نام رنگ و مبدل رنگ چیست؟
مبدل رنگ یک رنگ را بین فرمتها تبدیل میکند: hex به RGB، HSL به hex، RGB به CMYK. یابنده نام رنگ کاری متفاوت انجام میدهد. در ۱۴۸ رنگ نامدار CSS جستجو میکند و آنی را که کمترین فاصله را با ورودی شما دارد برمیگرداند. خروجی یک کلیدواژه است (مانند Tomato یا SlateBlue)، نه یک نمایش عددی.
فاصله اقلیدسی RGB برای تطبیق رنگ چقدر دقیق است؟
فاصله اقلیدسی RGB برای اکثر جستجوهای رنگ نتایج درستی میدهد. میتواند در محدوده سبز-آبی تطابقهای غیرمنتظرهای تولید کند زیرا چشم انسان سبز را شدیدتر از آبی درک میکند، اما مدل RGB هر سه کانال را به طور مساوی میبیند. برای وظایف توسعه وب مانند پیدا کردن نزدیکترین کلیدواژه CSS، این تفاوت در عمل به ندرت اهمیت دارد.
آیا میتوانم نامهای رنگ CSS را در JavaScript استفاده کنم؟
بله. CSS.supports() API، زمینه 2D canvas، و ویژگیهای fill/stroke در SVG همگی رنگهای نامدار را قبول میکنند. میتوانید مستقیماً element.style.backgroundColor = 'Tomato' تنظیم کنید. رنگهای نامدار همچنین در ویژگیهای سفارشی CSS و با متد getComputedStyle() کار میکنند، اگرچه مرورگرها مقدار محاسبهشده را در فرمت rgb() برمیگردانند صرف نظر از اینکه چطور آن را تنظیم کردهاید.
چرا برخی رنگها نامهای عجیبی مانند PapayaWhip یا BlanchedAlmond دارند؟
این نامها از پایگاه داده رنگ X11 میآیند که برای X Window System روی ایستگاههای کاری یونیکس در دهه ۱۹۸۰ ساخته شد. نامها توسط نویسندگان اصلی بدون یک قرارداد نامگذاری رسمی انتخاب شدند. وقتی CSS رنگهای X11 را در Level 3 پذیرفت، نامهای موجود را برای سازگاری با نسخههای قبلی حفظ کرد. نتیجه ترکیبی از نامهای توصیفی (DarkRed)، اشارات غذایی (PapayaWhip، Chocolate، Salmon)، و اصطلاحات جغرافیایی (Peru، Sienna) است.
آیا RebeccaPurple یک رنگ رسمی CSS است؟
بله. RebeccaPurple (#663399) در سال ۲۰۱۴ به مشخصات CSS Color Level 4 اضافه شد. توسط CSS Working Group به یادبود Rebecca Meyer، دختر نویسنده CSS، اریک مایر، که در سن شش سالگی از سرطان مغز درگذشت، پیشنهاد شد. این رنگ در تمام مرورگرهای منتشرشده پس از ۲۰۱۴ پشتیبانی میشود.
اگر ورودی hex من از دو رنگ نامدار فاصله مساوی داشته باشد چه اتفاقی میافتد؟
وقتی دو رنگ نامدار فاصله اقلیدسی یکسانی از ورودی دارند، نتیجه به ترتیب پیمایش بستگی دارد. این ابزار به ترتیب الفبایی فهرست رنگهای CSS را پیمایش میکند و اولین تطابق یافته را نگه میدارد. در عمل، تساوی دقیق نادر است زیرا ۱۴۸ رنگ نامدار به طور نامتقارن در فضای RGB توزیع شدهاند. اکثر ورودیهای hex یک نزدیکترین تطابق منحصر به فرد دارند.