>> مدیریت رنگ
مقادیر رنگ RGB هگزادسیمال
روش‌های توصیف و پردازش رنگ در ارائه نهایی آنها با یکدیگر متفاوت است. اجازه دهید، برای مثال، نمایش رنگ ها را برای چاپ و برای نمایشگرهای کامپیوتر مقایسه کنیم. در مورد اول، اساس گرفته می شود سفیدرنگ کاغذی که بعداً سه رنگ اصلی روی آن اعمال می شود: آبی, رنگ بنفشو رنگ زرد... این سه رنگ اصلی که با یکدیگر و با رنگ سفید کاغذ به نسبت‌های مختلف مخلوط می‌شوند، به جز سیاهی خالص، سایه‌های رنگی متفاوتی می‌دهند یا در غیاب کامل رنگ، رنگ سفید کاغذ را می‌دهند. اگر رنگ مشکی را به آنها اضافه کنیم، می گیریم CMYK- روشی برای نمایش رنگ، زمانی که رنگ مورد نیاز با کم کردن رنگ های از دست رفته از سفید به دست می آید.
در حالت دوم، مبنا گرفته می شود سیاهرنگ صفحه نمایش مانیتور که هر سلول آن در یکی از سه رنگ می درخشد: قرمز-قرمز، سبز-سبز و آبی-آبی. سپس در غیاب کامل هیچ درخششی، یک رنگ صفحه سیاه خالص به دست می آید و هر یک از رنگ های مورد نیاز با نسبت هر یک از سه رنگ تنظیم می شود. در این صورت می گیریم RGB- روشی برای انتقال رنگ رنگ های اولیه می تواند از 0
قبل از 255
، یا از 0%
قبل از 100%
، یا می تواند به عنوان یک مقدار هگزادسیمال نمایش داده شود. در تصویر زیر نتایج اختلاط رنگ های اصلی را مشاهده می کنید.
سیستم اعداد هگزادسیمال، بر خلاف عدد اعشاری، در ردیف اعداد خود نه ده رقم، بلکه شانزده رقم دارد - از این رو نام آن است. بر این اساس، انواع غیر تکراری ترکیبات دو رقمی فقط می توانند - 256 ، برای ادامه یک سری ارقام بعد از آن 9 نامه هایی از آقبل از افبنابراین ردیف به این شکل خواهد بود -
| 0،1،2،3،4،5،6،7،8،9، A، B، C، D، E، F. |
در این حالت رنگ با سه عدد هگزادسیمال مشخص می شود که هر کدام از دو رقم تشکیل شده است. عدد اول شدت را تعیین می کند قرمزرنگ ها، متوسط سبز، آخرین چیز- آبیرنگ ها همه اعداد می توانند مقادیری در محدوده از 00 قبل از FF(از 0 تا 255). به عنوان مثال: سبز به عنوان داده شده است # 00FF00، قرمز مانند # FF0000، آبی - مانند # 0000 FF، سفید مانند #FFFFFF، عدم وجود کامل رنگ یا سیاه به عنوان داده شده است #000000 .
در فرم زیر می توانید هر مقدار هگزادسیمال را برای هر یک از سه رنگ تنظیم کنید و با کلیک در قسمت خروجی نتیجه اختلاط آنها را مشاهده کنید.
نمونه هایی از برخی مقادیر رنگ RGB هگزادسیمال درجه بندی قرمز، آبی و سبز است.
| چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000 FF |
تعیین رنگ با استفاده از حروف الفبای رشته
برای سهولت استفاده به برخی از رنگ ها و ترکیبات آنها نام هایی اختصاص داده شده است که توسط همه مرورگرها تشخیص داده شده است و امکان تنظیم نام بسیاری از آنها وجود دارد. جدول زیر تعدادی از نام رنگ ها را فهرست می کند:
| چشم انداز | نام | چشم انداز | نام | چشم انداز | نام | چشم انداز | نام |
| سفید | قرمز | نارنجی | رنگ زرد | ||||
| سبز | آبی | رنگ بنفش | مشکی | ||||
| آلیس بلو | سفید عتیقه | آبی | آکوامارین | ||||
| لاجوردی | رنگ بژ | سوپ غلیظ خامه ای | بلانچدالموند | ||||
| بنفش آبی | رنگ قهوه ای | بوقلمون | کادت بلو | ||||
| چارتروز | شکلات | مرجان | گل ذرت | ||||
| ابریشم ذرت | زرشکی | فیروزه ای | آبی تیره | ||||
| دارک سیان | تیره طلایی | خاکستری تیره | سبز تیره | ||||
| دارخاکی | Darkmagenta | دارکولی گرین | رنگ تیره | ||||
| دارکورچید | قرمز تیره | سالمون تیره | سبز تیره | ||||
| رنگ آبی تیره | خاکستری تیره | فیروزه ای تیره | بنفش تیره | ||||
| صورتی پررنگ | دیپ اسکای آبی | تیره رنگ | دوج بلو | ||||
| آجر نسوز | سفید گلی | جنگل سبز | فوشیا | ||||
| گینزبورو | گوست وایت | طلا | گلدن راد | ||||
| خاکستری | زرد سبز | عسلک | هات پینک | ||||
| سرخپوستی | نیل | عاج | خاکی | ||||
| اسطوخودوس | رژگونه اسطوخودوس | لیمونشیفون | آبی کمرنگ | ||||
| لایت کورال | لایت سیان | رنگ زرد روشن | سبز روشن | ||||
| خاکستری روشن | صورتی روشن | ماهی قزل آلا | لایت سیگرین | ||||
| آبی روشن | خاکستری روشن | لایت استیل آبی | زرد کمرنگ | ||||
| اهک | لیمو سبز | کتانی | ارغوانی | ||||
| مارون | مدیوم آکوامارین | آبی متوسط | مدیورکید | ||||
| بنفش متوسط | سبز متوسط | رنگ متوسط | بهار سبز متوسط | ||||
| فیروزه متوسط | بنفش متوسط | آبی نیمه شب | کرم نعنا | ||||
| میستروز | ناواهو سفید | نیروی دریایی | اولدلاس | ||||
| زیتون | زیتون | نارنجی شده | ارکیده | ||||
| پالگولدنرود | سبز کمرنگ | پالتوروزه | رنگ بنفش کمرنگ | ||||
| شلاق پاپایا | پفک هلو | پرو | رنگ صورتی | ||||
| آلو | آبی پودری | رزی براون | آبی سلطنتی | ||||
| زین قهوه ای | دریای سبز | صدف دریایی | سینا | ||||
| نقره اي | آبی آسمانی | تخته سنگی | اسلیت گری | ||||
| برف | بهارگرین | استیل آبی | قهوهای مایل به زرد | ||||
| آبی رنگ | خار مریم | گوجه فرنگی | فیروزه | ||||
| بنفش | گندم | دود سفید | سبز زرد |
استفاده از انتخابگر رنگ ایمن
متأسفانه، در پلتفرم های مختلف، با تنظیمات مختلف سیستم، رندر صحیح رنگ یک مشکل است. نکته این است که مرورگر همیشه سعی می کند با مخلوط کردن مستقل رنگ ها و جایگزینی آنها، پالت رنگ سند را با تنظیمات سیستم و قابلیت های مانیتور تنظیم کند. در نتیجه، گاهی اوقات کاربر دقیقاً آنچه را که مدیر وب می خواست به او نشان دهد، نمی بیند. راه برون رفت از این وضعیت در استفاده از یک پالت یافت شد که هر رنگ آن تضمین شده است که توسط همه مرورگرها در پلتفرم های مختلف یکسان ارائه شود. این به اصطلاح است تضمینپالت که به آن نیز گفته می شود بی خطرجعبه رنگ نقاشی. این پالت شامل رنگ‌هایی است که اجزای رنگ آنها مقادیر زیر را دارند: 00 ,33 ,66 ,99 , CC,FF، در تمام موارد ممکن 216 ترکیبات آنها
| چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد |
| ففففف | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399 سی سی | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699 سی سی | 336699 | 006699 | ||||||
| 0066FF | 3366 سی سی | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000 FF | 0000 سی سی | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300 سی سی | 3333 سی سی | 000099 | 000066 | ||||||
| 9999 سی سی | 6666FF | 6666 سی سی | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
| 9966 سی سی | 9966FF | 6600 سی سی | 6633 سی سی | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900 سی سی | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
کدهای رنگی CSS برای تعیین یک رنگ استفاده می شود. به طور معمول، کدهای رنگ یا مقادیر رنگ برای تنظیم یک رنگ برای پیش زمینه یک عنصر (به عنوان مثال، رنگ متن، رنگ پیوند) یا برای پس زمینه یک عنصر (رنگ پس زمینه، رنگ بلوک) استفاده می شود. همچنین می توان از آنها برای تغییر رنگ دکمه، حاشیه، نشانگر، شناور و سایر جلوه های تزئینی استفاده کرد.
شما می توانید مقادیر رنگ خود را در قالب های مختلف تنظیم کنید. جدول زیر تمام فرمت های ممکن را فهرست می کند:
فرمت های ذکر شده با جزئیات بیشتر در زیر توضیح داده شده است.
رنگ های CSS - کدهای هگزادسیمال
کد رنگ هگزادسیمالیک نمایش شش رقمی از یک رنگ است. دو رقم اول (RR) نشان دهنده مقدار قرمز، دو رقم بعدی نشان دهنده مقدار سبز (GG) و دو رقم آخر نشان دهنده مقدار آبی (BB) هستند.
رنگ های CSS - کدهای هگز کوتاه
کد رنگ هگز کوتاهشکل کوتاه‌تر نماد شش رقمی است. در این فرمت، هر رقم تکرار می شود تا مقدار رنگ شش رقمی معادل تولید شود. به عنوان مثال: # 0F0 تبدیل به # 00FF00 می شود.
مقدار هگزادسیمال را می توان از هر نرم افزار گرافیکی مانند Adobe Photoshop، Core Draw و غیره دریافت کرد.
قبل از هر کد رنگ هگزا دسیمال در CSS یک علامت هش "#" وجود دارد. در زیر نمونه هایی از استفاده از نماد هگزادسیمال آورده شده است.
رنگ های CSS - مقادیر RGB
مقدار RGBکد رنگی است که با استفاده از ویژگی rgb () تنظیم می شود. این ویژگی سه مقدار می گیرد، یکی برای قرمز، سبز و آبی. مقدار می تواند یک عدد صحیح، از 0 تا 255، یا یک درصد باشد.
توجه داشته باشید:همه مرورگرها از ویژگی رنگ rgb () پشتیبانی نمی کنند، بنابراین استفاده از آن توصیه نمی شود.
در زیر نمونه ای وجود دارد که چندین رنگ را با استفاده از مقادیر RGB نشان می دهد.
مولد کد رنگ
با استفاده از خدمات ما می توانید میلیون ها کد رنگ ایجاد کنید.
رنگ های ایمن مرورگر
در زیر جدولی از 216 رنگ وجود دارد که ایمن ترین و مستقل ترین رنگ های کامپیوتری هستند. این رنگ های CSS از 000000 تا هگزادسیمال FFFFFF متغیر است. استفاده از آنها بی خطر است زیرا اطمینان می دهند که همه رایانه ها هنگام کار با یک پالت رنگی 256 رنگ را به درستی نشان می دهند.
| جدول رنگی "ایمن" CSS | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000 سی سی | # 0000 FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | # 3300 سی سی | # 3300FF |
| #333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600 سی سی | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900 سی سی | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| # CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
| # CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| # FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
| # FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
| # FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |
ولاد مرژویچ
در HTML، یک رنگ به یکی از دو روش مشخص می شود: با استفاده از یک کد هگزادسیمال و با نام برخی از رنگ ها. روش مبتنی بر سیستم اعداد هگزادسیمال عمدتاً به عنوان جهانی ترین مورد استفاده قرار می گیرد.
رنگ های هگزادسیمال
از اعداد هگزادسیمال برای تعیین رنگ ها در HTML استفاده می شود. سیستم هگزا دسیمال، برخلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 16 است. اعداد به صورت زیر خواهد بود: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9. , A, B, C , D, E, F. اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. جدول 6.1 مطابقت بین اعداد اعشاری و هگزادسیمال را نشان می دهد.
اعداد بزرگتر از 15 در سیستم هگزادسیمال از ترکیب دو عدد در یک عدد تشکیل می شوند (جدول 6.2). به عنوان مثال، اعشار 255 FF هگزادسیمال است.
برای جلوگیری از سردرگمی در تعریف سیستم اعداد، کاراکتر هش # در جلوی عدد هگزادسیمال، به عنوان مثال # aa69cc قرار می گیرد. در این مورد، رجیستر اهمیتی ندارد، بنابراین نوشتن # F0F0F0 یا # f0f0f0 مجاز است.
یک رنگ معمولی که در HTML استفاده می شود به این شکل است.
در اینجا، رنگ پس‌زمینه صفحه وب روی # FA8E47 تنظیم می‌شود. نماد هش # در جلوی یک عدد به معنای هگزادسیمال بودن آن است. دو رقم اول (FA) جزء قرمز رنگ را مشخص می کند، رقم سوم تا چهارم (8E) سبز و دو رقم آخر (47) آبی هستند. در نتیجه شما این رنگ را دریافت می کنید.
| FA | + | 8E | + | 47 | = | FA8E47 |
هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند که در نتیجه 256 سایه ایجاد می شود. بنابراین، تعداد کل رنگ ها می تواند 256x256x256 = 16.777.216 ترکیب باشد. مدل رنگی بر اساس اجزای قرمز، سبز و آبی RGB (قرمز، سبز، آبی؛ قرمز، سبز، آبی) نامیده می شود. این مدل افزودنی است (از افزودن - به افزودن) که در آن افزودن هر سه جزء یک رنگ سفید را تشکیل می دهد.
برای سهولت در پیمایش در رنگ های هگزا دسیمال، قوانینی را در نظر بگیرید.
- اگر مقادیر اجزای رنگ یکسان باشد (به عنوان مثال: # D6D6D6)، یک رنگ خاکستری دریافت می کنید. هرچه این عدد بیشتر باشد، رنگ روشن‌تر است، مقادیر از # 000000 (سیاه) تا #FFFFFF (سفید) متغیر است.
- اگر مولفه قرمز روی حداکثر (FF) و بقیه مولفه ها روی صفر تنظیم شوند، یک رنگ قرمز روشن تشکیل می شود. رنگ #FF0000 قرمزترین رنگ قرمز ممکن است. در مورد سبز (# 00FF00) و آبی (# 0000FF) نیز همینطور است.
- زرد (#FFFF00) از ترکیب قرمز با سبز به دست می آید. این به وضوح در چرخه رنگ دیده می شود (شکل 6.1)، جایی که رنگ های اصلی (قرمز، سبز، آبی) و رنگ های مکمل یا مکمل ارائه می شوند. اینها عبارتند از زرد، فیروزه ای و بنفش (همچنین سرخابی نامیده می شود). به طور کلی، هر رنگی را می توان با مخلوط کردن رنگ های مجاور به دست آورد. بنابراین، فیروزه ای (# 00FFFF) با ترکیب آبی و سبز به دست می آید.
برنج. 6.1. دایره رنگی
رنگ های هگزادسیمال نیازی به انتخاب تجربی ندارند. برای این منظور، یک ویرایشگر گرافیکی که می تواند با مدل های رنگی مختلف کار کند، مناسب است، برای مثال Adobe Photoshop. در شکل 6.2 پنجره ای برای انتخاب رنگ در این برنامه نشان می دهد، مقدار هگزادسیمال حاصل از رنگ فعلی با یک خط مشخص شده است. می توانید آن را کپی و در کد خود جایگذاری کنید.
برنج. 6.2. پنجره انتخاب رنگ در فتوشاپ
رنگ های وب
اگر کیفیت رنگ مانیتور را روی 8 بیت (256 رنگ) تنظیم کنید، می توان همان رنگ را در مرورگرهای مختلف به طور متفاوتی نمایش داد. این به دلیل نحوه نمایش گرافیک است، جایی که مرورگر با پالت خود کار می کند و نمی تواند رنگی را که در پالت ندارد نشان دهد. در این حالت، رنگ با ترکیبی از پیکسل های رنگ های دیگر، نزدیک به آن، جایگزین می شود که از رنگ مشخص شده تقلید می کنند. برای اینکه رنگ در مرورگرهای مختلف تغییر نکند، پالتی از رنگ های به اصطلاح وب را معرفی کردیم. رنگ های وب آن دسته از رنگ هایی هستند که برای هر جزء آنها - قرمز، سبز و آبی - یکی از شش مقدار تنظیم شده است - 0 (00)، 51 (33)، 102 (66)، 153 (99)، 204 (CC) ), 255 (FF). پرانتز نشان دهنده مقدار هگزادسیمال این جزء است. تعداد کل رنگ ها از تمام ترکیب های ممکن 6x6x6 - 216 رنگ می دهد. نمونه ای از رنگ وب # 33FF66 است.
ویژگی اصلی رنگ وب این است که در همه مرورگرها یکسان به نظر می رسد. در حال حاضر ارتباط رنگ های وب به دلیل افزایش کیفیت مانیتورها و گسترش قابلیت های آنها بسیار کم است.
رنگ ها بر اساس نام
برای اینکه مجموعه ای از اعداد را حفظ نکنید، می توانید به جای آن از نام رنگ های رایج استفاده کنید. جدول 6.3 نام رنگ های محبوب را فهرست می کند.
| نام رنگ | رنگ | شرح | مقدار هگزادسیمال |
|---|---|---|---|
| سیاه | مشکی | #000000 | |
| آبی | آبی | # 0000 FF | |
| فوشیا | بنفش روشن | # FF00FF | |
| خاکستری | خاکستری تیره | #808080 | |
| سبز | سبز | #008000 | |
| اهک | سبز روشن | # 00FF00 | |
| مارون | قرمز تیره | #800000 | |
| نیروی دریایی | آبی سرمه ای | #000080 | |
| زیتون | زیتون | #808000 | |
| رنگ بنفش | بنفش تیره | #800080 | |
| قرمز | قرمز | # FF0000 | |
| نقره اي | خاکستری روشن | # C0C0C0 | |
| سبز رنگ | سبز آبی | #008080 | |
| سفید | سفید | #FFFFFF | |
| رنگ زرد | رنگ زرد | # FFFF00 |
فرقی نمی کند که رنگ را به چه طریقی مشخص کنید - با نام آن یا با استفاده از اعداد هگزادسیمال. این روش ها در عمل خود برابر هستند. مثال 6.1 نحوه تنظیم پس زمینه و رنگ متن یک صفحه وب را نشان می دهد.
مثال 6.1. رنگ پس زمینه و متن
متن نمونه
در این مثال، رنگ پس‌زمینه با استفاده از ویژگی bgcolor تگ تنظیم می‌شود
و رنگ متن از طریق ویژگی text. برای تغییر، ویژگی text روی یک عدد هگزا دسیمال و bgcolor روی کلمه کلیدی رزرو شده تیل تنظیم می شود.برای تنظیم رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزا دسیمال، برخلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 16 است. اعداد به صورت زیر خواهد بود: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9. , A, B, C , D, E, F. اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. اعداد بزرگتر از 15 در هگزادسیمال از ترکیب دو عدد در یک عدد تشکیل می شوند. به عنوان مثال، اعشار 255 برابر است با FF هگزادسیمال. برای جلوگیری از سردرگمی در تعریف سیستم اعداد، نماد هش # در جلوی عدد هگزادسیمال، به عنوان مثال # 666999 قرار می گیرد. هر یک از سه رنگ - قرمز، سبز و آبی - می توانند از 00 تا FF متغیر باشند. بنابراین، تعیین رنگ به سه جزء #rrggbb تقسیم می شود، که در آن دو کاراکتر اول جزء قرمز رنگ، دو کاراکتر میانی - سبز و دو کاراکتر آخر - آبی هستند. استفاده از شکل اختصاری مانند #rgb مجاز است که هر کاراکتر باید دو برابر شود. بنابراین، ورودی # fe0 باید به عنوان #ffee00 در نظر گرفته شود.
بر اساس اسم
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
مرورگرها برخی از رنگ ها را با نام پشتیبانی می کنند. جدول 1 نام ها، کد هگزادسیمال، مقادیر RGB، HSL و توضیحات را نشان می دهد.
| نام | رنگ | کد | RGB | Hsl | شرح |
|---|---|---|---|---|---|
| سفید | #ffffff یا #fff | rgb (255,255,255) | hsl (0.0%, 100%) | سفید | |
| نقره اي | # c0c0c0 | rgb (192,192,192) | hsl (0.0%, 75%) | خاکستری | |
| خاکستری | #808080 | rgb (128,128,128) | hsl (0.0%, 50%) | خاکستری تیره | |
| سیاه | # 000000 یا # 000 | rgb (0,0,0) | hsl (0.0%, 0%) | مشکی | |
| مارون | #800000 | rgb (128,0,0) | hsl (0.100%, 25%) | قرمز تیره | |
| قرمز | # ff0000 یا # f00 | rgb (255,0,0) | hsl (0.100%, 50%) | قرمز | |
| نارنجی | #ffa500 | rgb (255,165,0) | hsl (38.8,100%, 50%) | نارنجی | |
| رنگ زرد | # ffff00 یا # ff0 | rgb (255,255,0) | hsl (60,100%, 50%) | رنگ زرد | |
| زیتون | #808000 | rgb (128,128,0) | hsl (60,100%, 25%) | زیتون | |
| اهک | # 00ff00 یا # 0f0 | rgb (0.255.0) | hsl (120,100%, 50%) | سبز روشن | |
| سبز | #008000 | rgb (0.128.0) | hsl (120,100%, 25%) | سبز | |
| آبی | # 00ffff یا # 0ff | rgb (0,255,255) | hsl (180,100%, 50%) | آبی | |
| آبی | # 0000ff یا # 00f | rgb (0,0,255) | hsl (240,100%, 50%) | آبی | |
| نیروی دریایی | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | آبی سرمه ای | |
| سبز رنگ | #008080 | rgb (0.128.128) | hsl (180,100%, 25%) | سبز آبی | |
| فوشیا | # ff00ff یا # f0f | rgb (255,0,255) | hsl (300,100%, 50%) | رنگ صورتی | |
| رنگ بنفش | #800080 | rgb (128,0,128) | hsl (300,100%, 25%) | بنفش |
با RGB
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
می توانید رنگ را با استفاده از مقادیر اعشاری اجزای قرمز، سبز و آبی تعیین کنید. هر یک از سه مولفه رنگی از 0 تا 255 مقدار می گیرند. همچنین مجاز است رنگ را به صورت درصد تنظیم کنید، در حالی که 100٪ با عدد 255 مطابقت دارد. ابتدا کلمه کلیدی rgb مشخص می شود و سپس در پرانتز، اجزای رنگ نشان داده می شوند و با کاما از هم جدا می شوند، به عنوان مثال rgb (255، 128، 128) یا rgb (100٪، 50٪، 50٪).
RGBA
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
فرمت RGBA از نظر نحو شبیه به RGB است، اما شامل یک کانال آلفا است که شفافیت عنصر را کنترل می کند. مقدار 0 مربوط به شفافیت کامل، 1 به کدورت و مقدار میانی مانند 0.5 به نیمه شفافیت است.
RGBA در CSS3 اضافه شد، بنابراین اعتبار سنجی کد CSS باید با استفاده از این نسخه انجام شود. لازم به ذکر است که استاندارد CSS3 هنوز در حال توسعه است و برخی از ویژگی ها ممکن است تغییر کنند. به عنوان مثال، یک رنگ RGB که به ویژگی پس‌زمینه-color اضافه شده است اعتبارسنجی می‌شود، اما رنگی که به ویژگی پس‌زمینه اضافه می‌شود دیگر تایید نمی‌شود. در همان زمان، مرورگرها به درستی رنگ هر دو ویژگی را درک می کنند.
Hsl
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
نام فرمت HSL از ترکیب حروف اول Hue (رنگ)، Saturate (اشباع) و Lightness (سبک) تشکیل شده است. Hue مقدار یک رنگ در چرخه رنگ است (شکل 1) و به درجه داده می شود. 0 درجه قرمز، 120 درجه سبز و 240 درجه آبی است. مقدار رنگ می تواند از 0 تا 359 متغیر باشد.
برنج. 1. چرخ رنگ
اشباع شدت یک رنگ است که به صورت درصدی از 0٪ تا 100٪ اندازه گیری می شود. مقدار 0% نشان دهنده عدم وجود رنگ و سایه خاکستری است، 100% حداکثر مقدار اشباع است.
Lightness میزان روشن بودن رنگ را تعیین می کند و به صورت درصدی از 0٪ تا 100٪ نشان داده می شود. مقادیر کم رنگ را تیره‌تر می‌کند و مقادیر زیاد را روشن‌تر می‌کند، مقادیر شدید 0% و 100% مربوط به سیاه و سفید است.
HSLA
| اینترنت اکسپلورر | کروم | اپرا | سافاری | فایرفاکس | اندروید | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
فرمت HSLA از نظر نحو شبیه به HSL است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 مربوط به شفافیت کامل، 1 به کدورت و مقدار میانی مانند 0.5 به نیمه شفافیت است.
مقادیر رنگ در فرمت‌های RGBA، HSL و HSLA در CSS3 اضافه شده‌اند، بنابراین هنگام استفاده از این فرمت‌ها حتما اعتبار نسخه را بررسی کنید.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
هشدار
تمامی روش های صید شیر درج شده در سایت بصورت تئوری و مبتنی بر روش های محاسباتی می باشد. نویسندگان ایمنی شما را هنگام استفاده از آنها تضمین نمی کنند و مسئولیت نتیجه را سلب می کنند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!
نتیجه این مثال در شکل نشان داده شده است. 2.
برنج. 2. رنگ ها در صفحه وب
HEX / HTML
رنگ HEX چیزی بیش از نمایش هگزادسیمال RGB نیست.
رنگ ها به عنوان سه گروه از ارقام هگزا دسیمال نشان داده می شوند که هر گروه مسئول رنگ خود است: # 112233، که در آن 11 قرمز، 22 سبز، 33 آبی است. همه مقادیر باید بین 00 و FF باشد.
در بسیاری از کاربردها، شکل اختصاری علامت گذاری برای رنگ های هگزا دسیمال مجاز است. اگر هر یک از سه گروه دارای کاراکترهای یکسانی باشد، برای مثال # 112233، می توان آنها را به عنوان # 123 نوشت.
- h1 (رنگ: # ff0000;) / * قرمز * /
- h2 (رنگ: # 00ff00;) / * سبز * /
- h3 (رنگ: # 0000ff;) / * آبی * /
- h4 (رنگ: # 00f؛) / * همان آبی، مختصر * /
RGB
فضای رنگی RGB (قرمز، سبز، آبی) شامل تمام رنگ های ممکن است که می توان با ترکیب قرمز، سبز و آبی به دست آورد. این مدل در عکاسی، تلویزیون و گرافیک کامپیوتری محبوب است.
مقادیر RGB به عنوان یک عدد صحیح از 0 تا 255 مشخص می شود. برای مثال rgb (0,0,255) به رنگ آبی نمایش داده می شود زیرا پارامتر آبی روی بالاترین مقدار خود (255) و بقیه روی 0 تنظیم شده است.
برخی از برنامه ها (به ویژه مرورگرهای وب) از درصد نوشتن مقادیر RGB (0٪ تا 100٪) پشتیبانی می کنند.
- h1 (رنگ: rgb (255، 0، 0؛) / * قرمز * /
- h2 (رنگ: rgb (0، 255، 0؛) / * سبز * /
- h3 (رنگ: rgb (0، 0، 255؛) / * آبی * /
- h4 (رنگ: rgb (0٪، 0٪، 100٪؛) / * همان آبی، درصد نوشتن * /
مقادیر رنگ RGB در تمام مرورگرهای اصلی پشتیبانی می شود.
RGBA
اخیراً، مرورگرهای مدرن یاد گرفته اند که با مدل رنگی RGBA کار کنند - یک پسوند RGB با پشتیبانی از یک کانال آلفا که کدورت یک شی را تعیین می کند.
یک مقدار رنگ RGBA به صورت: rgba (قرمز، سبز، آبی، آلفا) مشخص می شود. آلفا عددی از 0.0 (کاملا شفاف) تا 1.0 (کاملاً مات) است.
- h1 (رنگ: rgb (0، 0، 255؛) / * آبی در RGB معمولی * /
- h2 (رنگ: rgba (0، 0، 255، 1؛) / * همان آبی در RGBA، زیرا کدورت: 100٪ * /
- h3 (رنگ: rgba (0، 0، 255، 0.5؛) / * کدورت: 50٪ * /
- h4 (رنگ: rgba (0، 0، 255، 0.155؛) / * کدورت: 15.5٪ * /
- h5 (رنگ: rgba (0، 0، 255، 0؛) / * کاملا شفاف * /
RGBA در IE9 +، Firefox 3+، Chrome، Safari و Opera 10+ پشتیبانی می‌شود.
Hsl
مدل رنگی HSL نمایشی استوانه ای از مدل RGB است. HSL رنگ ها را به روشی شهودی و قابل درک تر از RGB معمولی نشان می دهد. این مدل اغلب در برنامه های گرافیکی، در انتخابگرهای رنگ و برای تجزیه و تحلیل تصویر استفاده می شود.
HSL مخفف Hue, Saturation, Lightness / Luminance است که نباید با روشنایی اشتباه گرفته شود.
Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع درصدی از اشباع (0% تا 100%) است. سبکی درصد سبکی (0% تا 100%) است.
- h1 (رنگ: hsl (120، 100٪، 50%)؛) / * سبز * /
- h2 (رنگ: hsl (120، 100٪، 75%)؛) / * سبز روشن * /
- h3 (رنگ: hsl (120، 100٪، 25%)؛) / * سبز تیره * /
- h4 (رنگ: hsl (120، 60٪، 70%)؛) / * سبز پاستلی * /
HSL در IE9 +، Firefox، Chrome، Safari و Opera 10+ پشتیبانی می‌شود.
HSLA
مشابه RGB / RGBA، HSL دارای یک حالت HSLA با یک کانال آلفا برای نشان دادن کدورت یک شی است.
مقدار رنگ HSLA به صورت: hsla (رنگ، اشباع، روشنایی، آلفا) داده می شود. آلفا عددی از 0.0 (کاملا شفاف) تا 1.0 (کاملاً مات) است.
- h1 (رنگ: hsl (120، 100٪، 50%)؛) / * سبز در HSL معمولی * /
- h2 (رنگ: hsla (120، 100٪، 50٪، 1؛) / * همان سبز در HSLA، زیرا کدورت: 100٪ * /
- h3 (رنگ: hsla (120، 100٪، 50٪، 0.5؛) / * کدورت: 50٪ * /
- h4 (رنگ: hsla (120، 100٪، 50٪، 0.155؛) / * کدورت: 15.5٪ * /
- h5 (رنگ: hsla (120، 100٪، 50٪، 0؛) / * کاملا شفاف * /
CMYK
مدل رنگی CMYK اغلب با چاپ و چاپ رنگی همراه است. CMYK (بر خلاف RGB) یک مدل تفریق کننده است، به این معنی که مقادیر بالاتر با رنگ های تیره تر همراه است.
رنگ ها با نسبت فیروزه ای، سرخابی، زرد، با اضافه کردن رنگ سیاه (کلید / سیاه) تعیین می شوند.
هر یک از اعدادی که یک رنگ را در CMYK تعریف می‌کنند، نشان‌دهنده درصد جوهر یک رنگ معین است که ترکیب رنگی را می‌سازد، یا بهتر است بگوییم، اندازه یک نقطه شطرنجی نشان‌داده‌شده روی یک فتوستر روی یک فیلم با رنگ مشخص (یا مستقیماً روی یک صفحه چاپ در مورد CTP).
به عنوان مثال، برای به دست آوردن رنگ PANTONE 7526، 9 قسمت فیروزه ای، 83 سرخابی، 100 زرد و 46 سیاه را مخلوط کنید. این را می توان به صورت زیر نشان داد: (9،83،100،46). گاهی اوقات آنها از چنین عناوین استفاده می کنند: C9M83Y100K46، یا (9٪، 83٪، 100٪، 46٪)، یا (0.09 / 0.83 / 1.0 / 0.46).
HSB / HSV
HSB (همچنین به عنوان HSV شناخته می شود) شبیه HSL است، اما آنها دو مدل رنگی متفاوت هستند. آنها هر دو بر اساس هندسه استوانه ای هستند، اما HSB / HSV بر اساس مدل "هگزاکون" است، در حالی که HSL بر اساس مدل "bi-hexcone" است. هنرمندان اغلب ترجیح می دهند از این مدل استفاده کنند، به طور کلی پذیرفته شده است که دستگاه HSB / HSV به درک طبیعی رنگ ها نزدیک تر است. به طور خاص، مدل رنگ HSB در Adobe Photoshop استفاده می شود.
HSB / HSV مخفف Hue، Saturation، Brightness / Value است.
Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع درصدی از اشباع (0% تا 100%) است. روشنایی درصد روشنایی (0٪ تا 100٪) است.
XYZ
مدل رنگ XYZ (CIE 1931 XYZ) یک فضای کاملاً ریاضی است. برخلاف مدل‌های RGB، CMYK و سایر مدل‌ها، در XYZ، اجزای اصلی «تخیلی» هستند، یعنی نمی‌توانید X، Y و Z را به هر مجموعه‌ای از رنگ‌ها برای ترکیب کردن مرتبط کنید. XYZ مدل اصلی تقریباً تمام مدل های رنگی دیگر است که در زمینه های فنی استفاده می شود.
آزمایشگاه
مدل رنگ LAB (CIELAB، "CIE 1976 L * a * b *") از فضای CIE XYZ محاسبه می شود. هنگام توسعه Lab، هدف ایجاد فضای رنگی بود که در آن تغییر رنگ از نقطه نظر درک انسان خطی‌تر باشد (در مقایسه با XYZ)، یعنی همان تغییر در مقادیر مختصات رنگ در مناطق مختلف فضای رنگی احساس تغییر رنگ یکسانی را ایجاد می کند.
