انتخابگر رنگ
هر رنگی را انتخاب کنید و کد آن را در همهٔ فرمت‌های رایج، آمادهٔ کپی، دریافت کنید. پالت‌های هماهنگ بسازید، رنگهای غالب یک عکس را بدون بارگذاری آن استخراج کنید و بررسی کنید که ترکیب رنگ متن و پس‌زمینه معیار کنتراست WCAG را برآورده میکند یا نه.
انتخابگر رنگ
کد رنگ در همه قالب‌ها
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (تقریبی)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
پالت‌هایی از این رنگ
مکمل
مجاور
سه‌گانه
روشن‌ها (مخلوط با سفید)
تیره‌ها (مخلوط با سیاه)
پالت رنگ از تصویر
تصویر شما توسط خود مرورگرتان خوانده میشود و هرگز بارگذاری نمیشود: پیکسل‌ها روی یک canvas در همین دستگاه نمونه‌برداری می‌شوند و چیزی به جایی ارسال نمیشود.
یک عکس، اسکرین‌شات یا لوگو را اینجا رها کنید
شش رنگ غالب تصویر شما اینجا نمایش داده میشود. روی یک نمونه رنگ کلیک کنید تا در انتخابگر بارگذاری شود.
بررسی کنتراست (WCAG 2.1)
نمونه متن درشت
The quick brown fox jumps over the lazy dog. 0123456789
- AA · متن معمولیقبول
- AAA · متن معمولیقبول
- AA · متن درشتقبول
- AAA · متن درشتقبول
متن درشت یعنی دستکم 18 pt (24 px) معمولی یا 14 pt (حدود 18.7 px) پررنگ. AA برای متن معمولی 4.5:1 و برای متن درشت 3:1 لازم دارد؛ AAA به 7:1 و 4.5:1 نیاز دارد.
رنگهای نامدار رایج CSS
بیست واژه کلیدی که همه مرورگرها می‌شناسند، با مقادیر دقیق HEX، RGB و HSL.
| نام | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX، RGB، HSL و HSB دقیقاً چه چیزی را توصیف می‌کنند
همهٔ رنگهای این صفحه در sRGB تعریف شده‌اند؛ فضای رنگی پیش‌فرض وب از اواخر دهه ۱۹۹۰ که مرورگرها آن را پذیرفتند. صفحه‌نمایش نور قرمز، سبز و آبی را ترکیب میکند و هر کانال ۲۵۶ سطح (0–255) دارد که ۱۶٬۷۷۷٬۲۱۶ رنگ ممکن می‌سازد. RGB همین سه عدد را مستقیم می‌نویسد؛ HEX همان سه عدد را در مبنای ۱۶ و با دو رقم برای هر کانال می‌نویسد، پس #FF6600 یعنی قرمز 255، سبز 102 و آبی 0. شکل کوتاه سه‌رقمی هر رقم را دوبار می‌نویسد: #F60 همان #FF6600 است.
HSL و HSB (که HSV هم نامیده میشود) همین رنگ‌ها را به شکلی توصیف می‌کنند که تنظیم دستی‌شان آسان‌تر است. فام (Hue) زاویه‌ای روی چرخهٔ رنگ است: 0° قرمز، 120° سبز، 240° آبی. تفاوت در عدد آخر است. در HSL روشنایی 100% همیشه سفید است و 50% خالص‌ترین حالت آن فام است؛ در HSB روشنی 100% همان فام خالص است و سفید به اشباع 0% نیاز دارد. برنامه‌های طراحی مانند Photoshop و Figma در انتخابگرشان از HSB استفاده می‌کنند و CSS به‌صورت بومی hsl() را می‌شناسد؛ برای همین هر دو در بالا آمده‌اند.
چرا مقدار CMYK فقط تقریبی است
صفحه‌نمایش نور اضافه میکند؛ چاپگر با جوهر فیروزه‌ای، سرخابی، زرد و مشکی نور را کم میکند. این دو سیستم دامنه‌های رنگی متفاوتی به نام گامات دارند. رنگهای بسیار اشباع صفحه‌نمایش، مانند سبز روشن RGB، آبی الکتریکی یا نارنجی نئونی، بیرون از توان جوهرهای چاپ‌اند و در چاپ کدرتر از مانیتور دیده می‌شوند.
اعداد CMYK در اینجا با تبدیل ریاضی ساده و بدون پروفایل ICC محاسبه شده‌اند؛ برای یک توضیح تقریبی مناسب است اما برای چاپ حرفه‌ای نه. چاپخانه با پروفایل مخصوص کاغذ و دستگاه خود تبدیل میکند، مانند FOGRA39 در اروپا یا GRACoL در آمریکا، و یک رنگ RGB یکسان با هر کدام درصدهای جوهر متفاوتی میدهد. برای کار چاپی، مقدار RGB یا HEX را همراه پروفایلی که چاپخانه می‌خواهد ارسال کنید.
نسبت کنتراست چگونه محاسبه میشود
WCAG 2.1 درخشندگی نسبی دو رنگ را مقایسه میکند: رنگ روشن‌تر به‌علاوهٔ 0.05 تقسیم بر رنگ تیرهتر به‌علاوهٔ 0.05. نتیجه از 1:1 (رنگهای یکسان) تا 21:1 (مشکی روی سفید) است. سطح AA برای متن معمولی دستکم 4.5:1 و برای متن درشت 3:1 می‌خواهد، یعنی 18 پوینت یا 14 پوینت ضخیم؛ سطح AAA این مقادیر را به 7:1 و 4.5:1 می‌رساند. اجزای رابط کاربری مانند کادر ورودی‌ها و آیکون‌ها طبق معیار 1.4.11 نسبت به اطرافشان به 3:1 نیاز دارند.
درخشندگی وزن سبز را بسیار بیشتر از آبی می‌گیرد، چون چشم به آن حساس‌تر است. برای همین متن زرد روی سفید به‌شدت رد میشود و آبی تیره روی سفید به‌راحتی قبول میشود، هرچند هر دو رنگ کاملاً اشباع به نظر می‌رسند. لوگوها و متن صرفاً تزئینی از این قاعده مستثنی‌اند.
استخراج پالت رنگ از عکس یا لوگو
پالت تصویر فایل شما را با canvas مرورگر می‌خواند، آن را در ضلع بلندتر به حداکثر 200 پیکسل کوچک میکند و پیکسل‌های مشابه را با روش median-cut که Paul Heckbert در 1982 شرح داد گروه‌بندی میکند: دامنهٔ رنگ بارها در پهن‌ترین کانال تقسیم میشود تا شش گروه بماند و میانگین هر گروه یک نمونه‌رنگ میشود. پیکسل‌های شفاف نادیده گرفته می‌شوند، پس لوگو روی پس‌زمینهٔ شفاف رنگهای خود لوگو را میدهد.
وقتی رنگ‌ها را داشتید، لوگوی تخت اغلب به‌صورت وکتور بهتر کار میکند. مبدل تصویر به SVG آن را به شکل‌هایی با همین رنگهای دقیق تبدیل میکند و اگر سربرگ کانال طراحی می‌کنید، تغییر اندازهٔ بنر یوتیوب طرح را با در نظر گرفتن ناحیهٔ امن به 2560 × 1440 درمی‌آورد.
پرسش‌های متداول
- چرا رنگ «green» در CSS از سبزِ انتخابگر RGB تیرهتر است؟
- کلیدواژهٔ green برابر #008000 است، یک سبز متوسط که از پالت قدیمی ۱۶رنگ HTML به ارث رسیده. #00FF00 که کاملاً اشباع است lime نام دارد. فهرست کامل CSS شگفتیهای مشابهی دارد: gray (#808080) از darkgray (#A9A9A9) تیرهتر است.
- آیا هنگام استخراج پالت، عکس من بارگذاری میشود؟
- خیر. فایل در مرورگر شما باز میشود، در حافظه روی canvas کشیده و همانجا تحلیل میشود. هیچ درخواستی همراه تصویر ارسال نمیشود و با بستن تب، تصویر از بین میرود.
- برای متن اصلی صفحه به چه نسبت کنتراستی نیاز دارم؟
- برای سطح AA در WCAG 2.1 دستکم 4.5:1 و برای سطح AAA نسبت 7:1. عنوانهای 18 پوینت یا بزرگتر، یا 14 پوینت ضخیم، برای AA میتوانند 3:1 داشته باشند. بسیاری از سیستمهای طراحی همهجا 4.5:1 را هدف میگیرند تا متن روی صفحههای کمنور و زیر نور خورشید خوانا بماند.
- آیا میتوانم از کد HEX هشترقمی با شفافیت استفاده کنم؟
- بله، در CSS. دو رقم آخر کانال آلفا هستند، پس #2F6FED80 همان آبی با حدود 50% opacity است. این انتخابگر با رنگهای مات کار میکند و شش رقم نشان میدهد؛ هر وقت لازم شد جفترقم آلفا را خودتان اضافه کنید.
- CSS چند رنگ نامدار دارد؟
- CSS Color Module Level 4، با احتساب املای تکراری مانند gray و grey، ۱۴۸ کلیدواژهٔ رنگ تعریف میکند. جدیدترین آن rebeccapurple (#663399) است که در 2014 به یاد Rebecca Meyer، دختر Eric Meyer نویسندهٔ CSS، افزوده شد.