قابلیتهای این انتخابگر رنگ
- نمونهگیری رنگ از تصاویر* یا شروع از چرخ رنگ دقیق یا ورودی HEX/RGB
- تبدیلهای غنی: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
- بررسیکننده کنتراست WCAG داخلی در برابر #000000 و #FFFFFF با استفاده از روشنایی نسبی
- پیشنهادهای HEX ایمن برای وب و کوتاهنویسی در صورت امکان
- هارمونیهای رنگ: مکمل، سهتایی، چهارتایی، مشابه، تکرنگ (محاسبه شده از طریق چرخش فام)
- پیشنمایش روشنایی و درخشندگی ادراکی برای پیشبینی مشکلات کنتراست
- تطبیق تقریبی شبیه پانتون بر اساس نزدیکترین فاصله RGB (با مجموعه داده کش شده)
- تحلیل در سمت کلاینت اجرا میشود؛ تنها دادههای حداقلی هنگام فعالشدن جستجوی اختیاری پانتون استفاده میشود
🔧 نحوه استفاده از انتخابگر رنگ for color-picker
1. انتخاب یا نمونهگیری یک رنگ پایه
مقدار HEX را جایگذاری کنید، RGB/HSL را تایپ کنید، یا از انتخابگر برای گرفتن رنگ از تصویر یا چرخ استفاده کنید. ابزار آن را به مقدار HEX ایمن نرمالایز میکند.
2. تنظیم دقیق فام و روشنایی
فام، اشباع و روشنایی را تا زمانی که نمونه رنگ مناسب به نظر برسد تنظیم کنید. یک پیشنمایش بزرگ رنگ را روی سطوح روشن و تیره برای درک بهتر نشان میدهد.
3. خواندن و کپی کردن فرمتهای مورد نیاز
HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB و LCH را با یک کلیک کپی کنید. از آنها برای متغیرهای CSS، توکنهای طراحی یا یادداشتهای تحویل استفاده کنید.
4. بررسی کنتراست WCAG
نسبتهای کنتراست در برابر #000000 و #FFFFFF بر اساس روشنایی sRGB را ببینید. از نتایج برای تصمیمگیری سریع در مورد مناسب بودن رنگ برای متن بدنه، عنوانهای بزرگ یا المانهای UI استفاده کنید.
5. تولید هارمونیها و ساخت پالت
رنگهای مکمل، سهتایی، چهارتایی، مشابه و تکرنگ تولید شده از طریق چرخش فام را کاوش کنید. موردعلاقههای خود را به پالت/تاریخچه اضافه کرده و به عنوان توکن صادر کنید.
جزئیات فنی
مدیریت ورودی و نرمالایزاسیون
ابزار کدهای رنگ هگزادسیمال را میپذیرد و آنها را به HEX 6 رقمی نرمالایز شده به عنوان مرجع داخلی تبدیل میکند.
| جنبه | رفتار | یادداشتها |
|---|---|---|
| نرمالسازی HEX | HEX سهرقمی و ششرقمی، # اختیاری در ابتدا | HEX کوتاه (مثلاً #0f8) به #00ff88 گسترش مییابد؛ کاراکترهای غیر HEX حذف میشوند. |
| پشتیبانی HEX8 | RGBA از طریق #RRGGBBAA | کانال آلفا به 0–255 تبدیل شده و به عنوان بایت چهارم اضافه میشود. |
| پیشنهاد ایمن برای وب | گرد کردن به نزدیکترین گام 51 در هر کانال | مقادیر به نزدیکترین مضرب 51 گرد میشوند (0, 51, 102, 153, 204, 255). |
| پیشنهاد HEX مختصر | فقط زمانی که قابل فشردهسازی باشد | زمانی نمایش داده میشود که هر جفت رقم HEX تکرار شده باشد (مثلاً #112233 → #123). |
فضاهای رنگی و تبدیلها
تمام محاسبات بر اساس sRGB با سفید مرجع D65 انجام میشود.
| فضا | محاسبه | کاربرد |
|---|---|---|
| RGB | از HEX نرمالشده (0–255 در هر کانال) | نمایش پایه برای تبدیلها. |
| HSL / HSV | تبدیلهای استوانهای استاندارد از sRGB | برای ویرایشهای شهودی و محاسبات هارمونی استفاده میشود. |
| CMYK | تقریب مستقل از دستگاه | به صورت 1−max(R,G,B) با اجزای 0–100% محاسبه میشود؛ به پروفایلهای ICC وابسته نیست. |
| XYZ | sRGB خطیشده → XYZ با استفاده از ماتریس D65 | فضای میانی برای LAB/LCH و تحلیل عمیقتر. |
| LAB | CIE L*a*b* از XYZ | فضای متریک با یکنواختی ادراکی بیشتر. |
| LCH | CIE L*C*h° از LAB | مفید برای تنظیمات فام/غلظت/روشنایی و طراحی پالت ادراکی. |
روشنایی و کنتراست WCAG
کنتراست با استفاده از فرمول استاندارد روشنایی نسبی WCAG محاسبه میشود.
| جنبه | جزئیات | یادداشتها |
|---|---|---|
| روشنایی نسبی | محاسبه شده از sRGB خطی شده (مؤلفه Y) | از ضرایب 0.2126R + 0.7152G + 0.0722B استفاده میکند. |
| نسبت کنتراست | (L1 + 0.05) / (L2 + 0.05) | ابزار کنتراست را در مقابل #000000 و #FFFFFF گزارش میدهد. |
| آستانههای WCAG | AA/AAA برای متن معمولی و بزرگ | آستانههای معمول: 4.5:1 (AA معمولی), 3:1 (AA بزرگ), 7:1 (AAA معمولی), 4.5:1 (AAA بزرگ). |
هارمونیها و رنگهای مشتق شده
هارمونیها به عنوان چرخشهای ساده hue در HSL تولید میشوند و saturation و lightness حفظ میشوند.
| هارمونی | قاعده | مثال |
|---|---|---|
| مکمل | +180° hue | نقطه مقابل روی چرخ رنگ. |
| تریاد | ±120° hue | سه رنگ با فاصله مساوی. |
| تتراد | +90°, +180°, +270° hue | چهار رنگ که یک مستطیل روی چرخ تشکیل میدهند. |
| آنالوگ | −30° / +30° hue | همسایگان اطراف رنگ پایه. |
| تکرنگ | روشن/تیره کردن در L | نسخههای روشنتر و تیرهتر از همان hue. |
مطابقت شبیه پانتون (تقریبی)
وقتی مجموعه داده پانتون در دسترس باشد، ابزار نزدیکترین تطابق را در فضای RGB محاسبه میکند.
| جنبه | رفتار | یادداشتها |
|---|---|---|
| بارگذاری مجموعه داده | بارگذاری کش شده + ناهمگام از طریق getPantoneColors / getPantoneColorsCached | رابط کاربری میتواند بلافاصله هنگام گرم بودن کش یا پس از بارگذاری ناهمگام کوتاه، تطابق را نشان دهد. |
| معیار تطابق | فاصله اقلیدسی مربع در RGB (0–255) | تقریب سریع و ساده؛ یک متریک ΔE* ادراکی نیست. |
| خروجی | شناسه و نام شبیه پانتون | فقط به عنوان راهنما نمایش داده میشود؛ نگاشت رسمی پانتون نیست. |
عملکرد و حریم خصوصی
تبدیلها، روشنایی، کنتراست و هارمونیها کاملاً در سمت کلاینت محاسبه میشوند. جستجوی پانتون ممکن است بسته به پیکربندی، از یک مجموعه داده محلی یا راهدست استفاده کند، اما رنگهای خام به صورت رشتههای HEX ساده باقی میمانند مگر اینکه شما صراحتاً آنها را به اشتراک بگذارید یا صادر کنید.
موارد استفاده محبوب
UI/UX و فرانتاند
- ایجاد جفتهای قابل دسترس پیشزمینه/پسزمینه برای دکمهها، لینکها و متن.
- صدور متغیرهای CSS و توکنهای طراحی مستقیماً از رنگهای انتخاب شده.
- بررسی کنتراست برای حالتهای روشن/تیره قبل از پیادهسازی تغییردهنده تم.
/* توکنهای رنگ CSS */
:root {
--brand: #4caf50;
--brand-rgb: 76, 175, 80;
--on-brand: #0b0b0b;
}
.button-primary {
background-color: var(--brand);
color: var(--on-brand);
}برندینگ و هویت بصری
- استخراج پالت اصلی/ثانویه/تزئینی از یک رنگ قهرمان واحد.
- کاوش گزینههای مکمل یا سهتایی برای لوگو یا خط تولید.
- دریافت نامگذاری تقریبی شبیه پانتون قبل از تهیه راهنمای برند.
نمایش داده و داشبوردها
- تعریف رنگهای سری که در هر دو پسزمینه روشن و تیره قابل تشخیص باقی بمانند.
- استفاده از LAB/LCH برای طراحی پالتها با گامهای ادراکی کنترلشده.
- بررسی سریع اینکه آیا رنگهای نمودار انتظارات کنتراست را در راهنما و برچسبها برآورده میکنند.
❓ Frequently Asked Questions
تفاوت HEX، RGB، HSL و HSV چیست؟
چرا مقادیر CMYK تقریبی به نظر میرسند؟
LAB و LCH برای چه مفید هستند؟
کنتراست چگونه محاسبه میشود؟
آیا نامهای پانتون دقیق هستند؟
آیا تصاویر یا رنگهای من ذخیره میشوند؟
Pro Tips
همیشه رنگها را روی سطوح روشن و تاریک پیشنمایش کنید؛ اشباع و کنتراست درکشده میتواند به شدت با زمینه تغییر کند.
هنگام تولید سایههای روشن و تاریک از LAB یا LCH استفاده کنید تا تغییرات روشنایی برای چشم انسان یکنواختتر به نظر برسد.
کنتراست AA/AAA را برای تمام حالتهای تعاملی (هاور، فعال، غیرفعال) بررسی کنید، نه فقط رنگ پیشفرض دکمه.
متغیرهای CSS یا توکنهای طراحی را از تب فرمتها صادر کنید تا رنگها در کامپوننتهای شما ثابت بمانند.
هنگام نمونهبرداری از تصاویر، میانگین را از یک ناحیه کوچک به جای یک پیکسل واحد بگیرید تا نویز ناشی از فشردهسازی و ضد-علیاسینگ کاهش یابد.
Additional Resources
Other Tools
- زیباکننده CSS
- زیباکننده HTML
- زیباکننده JavaScript
- زیباکننده PHP
- استخراجکننده اسپرایت
- دیکودر Base64
- انکودر Base64
- فرمتدهنده C#
- فرمتدهنده CSV
- Dockerfile Formatter
- فرمتدهنده Elm
- فرمتدهنده ENV
- فرمتدهنده Go
- فرمتدهنده GraphQL
- فرمتدهنده HCL
- فرمتدهنده INI
- فرمتدهنده JSON
- فرمتدهنده LaTeX
- فرمتدهنده Markdown
- فرمتدهنده Objective-C
- Php Formatter
- فرمتدهنده Proto
- فرمتدهنده Python
- فرمتدهنده Ruby
- فرمتدهنده Rust
- فرمتدهنده Scala
- فرمتدهنده اسکریپت شل
- فرمتدهنده SQL
- قالببندی SVG
- قالببندی Swift
- قالببندی TOML
- Typescript Formatter
- قالببندی XML
- قالببندی YAML
- قالببندی Yarn
- کوچککننده CSS
- Html Minifier
- Javascript Minifier
- کوچککننده JSON
- کوچککننده XML
- نمایشگر هدرهای HTTP
- PDF به متن
- تستکننده Regex
- بررسیکننده رتبه SERP
- جستجوی Whois