همانطور که می دانید، رنگ می تواند بر وضعیت یک فرد تأثیر بگذارد: روحی و جسمی. هر روز با مرور اینترنت، چشم ها میلیون ها رنگ و سایه را ارزیابی می کنند. یک طراح وب که با روانشناسی رنگ آشنا باشد می تواند روحیه بازدیدکنندگان را برای رسیدن به هر هدفی کنترل کند.
این به این دلیل است که برخی از سایه ها تسکین می دهند و برخی برعکس، هیجان زده می شوند. در ادامه در مورد نحوه سنتز و نمایش رنگ با استفاده از فناوری رایانه صحبت خواهیم کرد.
RGB یک مدل رنگی است که نشان دهنده روشی برای به دست آوردن تمام رنگ ها و سایه های آنها با مخلوط کردن به نسبت های مختلف سه جزء اصلی است که عبارتند از:
- رنگ قرمز ( قرمز);
- رنگ سبز ( سبز);
- رنگ ابی ( آبی).
نام اختصاری RGB از اینجا آمده است. این رنگ ها به دلیلی به عنوان رنگ های اصلی انتخاب می شوند: دلیل آن فیزیولوژی شبکیه چشم انسان و نحوه درک آن است:
مدل RGB امروزه محبوب ترین است و برای بازتولید رنگ ها در صفحه نمایش تلویزیون و مانیتور کامپیوتر استفاده می شود. از آنجایی که تولیدکنندگان به محصولات خود ویژگی های متفاوتی می دهند، در سال 1996 یک سیستمیک ترکیب رنگ مبتنی بر RGB به نام sRGB که به طور مشترک توسط مایکروسافت و اچ پی توسعه داده شد.
نمایش رنگ عددی
همانطور که قبلا ذکر شد، رنگ های RGB از ترکیب رنگ های اصلی تشکیل می شوند. برای توصیف شدت هر یک از آنها، طرحی اتخاذ شد که در آن رنگ با محدوده 0-255 (8 بیت)، که مربوط به 00-FF در هگزادسیمال است، نشان داده می شود.
یعنی رنگ های اصلی به این صورت خواهند بود:
- قرمز - RGB (255.0.0);
- سبز - RGB (0.255.0)؛
- آبی - RGB (0.0.255);
اگر شدت رنگ کمتر از 255 باشد، سایه های مختلفی از قرمز، سبز و آبی به دست می آید. در زیر جدول درجه بندی آنها و همچنین مقادیر هگزادسیمال هر یک از سایه ها آمده است:
نمودارهای رنگی RGB
به طور طبیعی، علاوه بر درجه بندی رنگ های اصلی، رنگ های مخلوط نیز وجود دارد و تعداد آنها بسیار زیاد است. بنابراین، جدولی از رنگ های RGB ایجاد شد که در آن تمام سایه های موجود و همچنین نام ها و نمایش های عددی آنها ارائه شده است. به صورت اعشاری و هگزادسیمال).
اینجا می توانید با او آشنا شوید. این جدولزندگی را برای طراحان وب بسیار آسان تر می کند، زیرا در عرض چند ثانیه می توانید سایه مورد نظر را پیدا کنید و به نمایش عددی آن پی ببرید.
پالت رنگ ایمن RGB
با این حال، در مقطعی مشکل نمایش رنگ ها در مرورگرهای مختلف وجود داشت و برای حل آن، پالت به اصطلاح "ایمن" رنگ های RGB جمع آوری شد که با محاسبات ریاضی به دست آمد.
وقتی مرورگر نمی تواند رنگی را به درستی نمایش دهد، سعی می کند با ترکیب رنگ های همسایه به آنچه که نیاز دارد نزدیک شود و به احتمال زیاد نتیجه کاملا غیر قابل قبول خواهد بود:
با استفاده از کدها رنگ های RGBاز این پالت، یک توسعه دهنده وب ممکن است در هنگام مشاهده با استفاده از نمایش رنگ ها در صفحات سایت خود ترسی نداشته باشد. مرورگرهای مختلف، بر روی پلتفرم های مختلفو نظارت می کند. اگرچه روشن است این لحظهجدول رنگ های ایمن ارتباط خود را از دست می دهد ( پیشرفت فن آوری ثابت نمی ماند، هنگام استفاده از آن، همانطور که می گویند، می توانید آرام بخوابید.
رنگ طلایی در مدل RGB
برای اولین بار کلمه "طلا" در آغاز قرن چهاردهم برای توصیف رنگ عنصر شیمیایی به نام Aurum - طلا استفاده شد. در مدل RGB، رنگ طلایی با مقادیر عددی زیر نشان داده می شود:
- RGB (255، 215، 0) - سیستم اعشاری؛
- HEX #FFD700 - سیستم هگزادسیمال.
رنگ بژ در مدل RGB
رنگ بژ جایگاه نسبتاً قابل توجهی در تاریخ دارد، حتی اگر رساترین آن نباشد. بسیاری از آثار فرهنگی، به ویژه مجسمه های عتیقه، از استاتیت و سنگ صابون ساخته شده اند که رنگ بژ دارند. در مدل RGB، رنگ بژ دارای نمایش های عددی زیر است.
>> مدیریت رنگ
مقادیر رنگ 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، آبی - مانند #0000FF، سفید مانند #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 | #0000FF |
تعیین رنگ با حروف الفبای رشته
برای سهولت استفاده به برخی از رنگ ها و ترکیبات آنها نام هایی داده شد که توسط همه مرورگرها تشخیص داده شد و امکان تنظیم نام بسیاری از آنها فراهم شد. جدول زیر تعدادی از نام رنگ ها را نشان می دهد:
| چشم انداز | نام | چشم انداز | نام | چشم انداز | نام | چشم انداز | نام |
| سفید | قرمز | نارنجی | رنگ زرد | ||||
| سبز | آبی | رنگ بنفش | مشکی | ||||
| آلیس آبی | سفید عتیقه | آبی | آکوامارین | ||||
| لاجوردی | رنگ بژ | سوپ غلیظ خامه ای | بلانچدالموند | ||||
| بنفش آبی | رنگ قهوه ای | بوقلمون | کادبلو | ||||
| Chartreuse | شکلات | مرجان | گل ذرت | ||||
| ابریشم ذرت | زرشکی | فیروزه ای | آبی تیره | ||||
| دارک سیان | میله طلایی تیره | خاکستری تیره | سبز تیره | ||||
| دارکخاکی | Darkmagenta | دارکولیو گرین | نارنجی تیره | ||||
| دارکورچید | قرمز تیره | سالمون تیره | سبز دریای تیره | ||||
| آبی تیره | خاکستری تیره | فیروزه ای تیره | بنفش تیره | ||||
| صورتی پررنگ | آبی آسمان عمیق | تیره رنگ | آبی طفره زن | ||||
| آجر نسوز | سفید گلدار | جنگل سبز | فوشیا | ||||
| گینزبورو | شبح سفید | طلا | گلدنرود | ||||
| خاکستری | زرد سبز | عسلک | هات پینک | ||||
| سرخ هندی | نیل | عاج | خاکی | ||||
| اسطوخودوس | رژگونه اسطوخودوس | لیمونشیفون | آبی کمرنگ | ||||
| مرجان روشن | سبز رنگ | رنگ زرد روشن | سبز روشن | ||||
| خاکستری روشن | صورتی روشن | سالمون سبک | سبز روشن | ||||
| آبی روشن | خاکستری تیغه روشن | آبی روشن فولادی | زرد کمرنگ | ||||
| اهک | لیمو سبز | کتانی | ارغوانی | ||||
| مارون | مدیوم آکوامارین | آبی متوسط | ارکیده متوسط | ||||
| بنفش متوسط | سبز متوسط | رنگ متوسط | بهار سبز متوسط | ||||
| فیروزه ای متوسط | قرمز متوسط بنفش | آبی نیمه شب | کرم نعنا | ||||
| میستروز | ناواهو سفید | نیروی دریایی | قدیمی | ||||
| زیتون | زیتون | قرمز نارنجی | ارکیده | ||||
| palegoldenrod | سبز کمرنگ | رنگی فیروزه ای | رنگ بنفش کمرنگ | ||||
| شلاق پاپایا | پفک هلو | پرو | رنگ صورتی | ||||
| آلو | آبی پودری | رزی براون | آبی سلطنتی | ||||
| قهوه ای زینی | سبز دریایی | صدف دریایی | سینا | ||||
| نقره | آبی آسمانی | تخته سنگ آبی | اسلیت گری | ||||
| برف | بهارگرین | آبی فولادی | قهوهای مایل به زرد | ||||
| آبی رنگ | خار مریم | گوجه فرنگی | فیروزه | ||||
| بنفش | گندم | دود سفید | زرد سبز |
استفاده از انتخابگر رنگ ایمن
متأسفانه، در پلتفرم های مختلف، با تنظیمات مختلف سیستم، بازتولید رنگ صحیح یک مشکل است. نکته این است که مرورگر همیشه سعی می کند پالت رنگ سند زیر را تنظیم کند تنظیمات سیستمو قابلیت های نظارت، با خودآمیختن رنگ ها و جایگزینی آنها. در نتیجه، گاهی اوقات کاربر دقیقاً آنچه را که مدیر وب می خواست به او نشان دهد، نمی بیند. راه برون رفت از این وضعیت در استفاده از یک پالت یافت شد که هر رنگ آن تضمین شده است که به یک شکل توسط همه مرورگرها در پلتفرم های مختلف ارائه شود. این به اصطلاح تضمینپالت، همچنین به عنوان شناخته شده است بی خطرجعبه رنگ نقاشی. این پالت شامل رنگ هایی است که اجزای رنگ آنها مقادیر زیر را به خود می گیرند: 00 ,33 ,66 ,99 , CC,FF، در تمام موارد ممکن 216 ترکیبات آنها
| چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد | چشم انداز | کد |
| FFFFFF | 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 تنظیم کرد روش های مختلف:
- بر اساس اسم،
- با مقدار هگزادسیمال،
- در فرمت های RGB و RGBA
- در فرمت های HSL و HSLA.
رنگ را با نام تنظیم کنید
مرورگرها از تعیین رنگ های خاص برای عناصر با نام پشتیبانی می کنند. در این جدول برخی از کلمات کلیدی (نام رنگ انگلیسی) برای تنظیم ویژگی های رنگ، کد RGB، کد هگزا دسیمال (HEX) و کد HSL استفاده شده است.
| نام | رنگ | RGB | HEX | HSL | شرح |
|---|---|---|---|---|---|
| سفید | rgb(255، 255، 255) | #fffff یا #fff | hsl(0, 0, 100%) | سفید | |
| نقره | rgb(192، 192، 192) | #c0c0c0 | hsl(0, 0, 75%) | خاکستری | |
| خاکستری | rgb(128، 128، 128) | #808080 | hsl(0, 0, 50%) | خاکستری تیره | |
| سیاه | rgb(0، 0، 0) | #000000 یا #000 | hsl(0, 0, 0%) | مشکی | |
| مارون | rgb(128، 0، 0) | #800000 | hsl(0, 100, 25%) | قرمز تیره | |
| قرمز | rgb(255، 0، 0) | #ff0000 یا #f00 | hsl(0, 100, 50%) | قرمز | |
| نارنجی | rgb(255، 165، 0) | #ffa500 | hsl(38.8، 100، 50%) | نارنجی | |
| رنگ زرد | rgb(255، 255، 0) | #ffff00 یا #ff0 | hsl(60، 100، 50%) | رنگ زرد | |
| زیتون | rgb(128، 128، 0) | #808000 | hsl(60، 100، 25%) | زیتون | |
| اهک | rgb(0، 255، 0) | #00ff00 یا #0f0 | hsl(120, 100, 50%) | سبز روشن | |
| سبز | rgb(0، 128، 0) | #008000 | hsl(120، 100، 25%) | سبز | |
| آبی | rgb(0, 255, 255) | #00ffff یا #0ff | hsl(180، 100، 50%) | آبی | |
| آبی | rgb(0، 0، 255) | #0000ff یا #00f | hsl(240، 100، 50%) | آبی | |
| نیروی دریایی | rgb(0,0,128) | #000080 | hsl(240، 100، 25%) | آبی تیره | |
| سبز رنگ | rgb(0، 128، 128) | #008080 | hsl(180، 100، 25%) | سبز آبی | |
| فوشیا | rgb(255، 0، 255) | #ff00ff یا #f0f | hsl(300، 100، 50%) | رنگ صورتی | |
| رنگ بنفش | rgb(128، 0، 128) | #800080 | hsl(300، 100، 25%) | بنفش |
این نمونه ای از استفاده از نام رنگ ها است، نام رنگ ها از جدول توسعه یافته گرفته شده است.
در اینجا نحوه کار این کد آمده است:
تنظیم رنگ با RGB
RGB یک مدل رنگ افزودنی است. در زبان انگلیسی علاوه بر این- اضافه RGB مخفف کلمات انگلیسی است: قرمز، سبز، آبی - قرمز، سبز، آبی). از اینجا مشخص می شود که در مدل RGB، رنگ ها با افزودن سه رنگ (قرمز، سبز، آبی) در مقادیر مختلف سنتز می شوند.
با ترکیب رنگ های قرمز، سبز و آبی می توانید چندین میلیون سایه به دست آورید. تمام ترکیبات ممکن در حافظه کامپیوترها ذخیره می شود.
برو سر اصل مطلب.
این فرمت از نماد rgb(r, g, b) برای تنظیم خصوصیات استفاده می کند که r, g, b سه کانال برای هر رنگ (قرمز، سبز، آبی) هستند. مقادیر برای هر کانال در محدوده 0 تا 255 تنظیم شده است.
نمونه کد.
برای روشن شدن همه چیز، یک کد مثال می زنم:
این مثال چگونه باید کار کند:
عکس. 1. رنگ ها در RGB برای مثال توضیحات
در ابتدای صفحه، کلاس div.rgb را ایجاد می کنیم، به طوری که بلوک های ایجاد شده توسط تگ مورد نیاز است.
بعد، در کد، رنگ پس زمینه بلوک را تنظیم کنید
سعی کنید این مثال را ویرایش کنید تا مقادیر خود را شامل شود، مانند rgb(100، 100، 100).
تنظیم رنگ با RGBA
در CSS3 ظاهر شد ابزار جدیدبرای کار با رنگ - فرمت RGBA. می توان آن را تکامل مدل RGB نامید، اما با افزودن یک کانال جدید - کانال A یا آلفا. این کانال شفافیت رنگ را تنظیم می کند. مقادیر آن در محدوده 0 تا 1 تنظیم شده است. مقدار برابر با 0 مربوط به شفافیت کامل است، 1 - کدورت کامل (رنگ همان رنگی خواهد بود که در تنظیم شده است. سه اولکانال های RGB)، و مقادیر متوسط مانند 0.4 یا 0.6 - شفافیت به درجات مختلف.
نمونه کد.
در اینجا نحوه کار این است:
این کد از نظر ظاهری شبیه به کد زیر است که از مدل RGB برای تنظیم مقدار رنگ استفاده می کند:
نتیجه او این است:
یک مقدار کانال آلفا برابر با صفر، هر رنگی را نامرئی می کند - کاملاً شفاف، مقداری برابر با یک رنگ را در کد RGB بدون تغییر ترجمه می کند. ویژگی rgba(255,0,0,1.0) رنگ قرمز rgb(255, 0, 0) را نشان می دهد.
بر اساس مقدار هگزادسیمال (کد HEX)
در زندگی روزمره از سیستم اعشاری شمارش استفاده می کنیم. منشأ آن بسیار ساده است - ما ده انگشت روی دستان خود داریم و در زندگی راحت بود که روی انگشتان خود بشماریم. اگر در سیستم اعشاریده رقم: از 0 تا 9 و عدد 10 رقم بعدی است، سپس 16 رقم در سیستم اعداد هگزادسیمال وجود دارد و رقم بعدی عدد 16 خواهد بود.
برای نشان دادن کدهای رنگی، ارقام اعشاری معمولی از 0 تا 9 به عنوان ارقام هگزادسیمال و حروف لاتین از A تا F برای نشان دادن اعداد از 10 تا 15 استفاده می شود، یعنی (0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A، B، C، D، E، F). برای وضوح، بیایید این را در یک جدول خلاصه کنیم:
برای نوشتن اعداد هگزادسیمال بزرگتر از F (15 اعشاری)، مانند سیستم اعشاری، از اتحاد دو رقم نیز استفاده می کنند، اما از قبل هگزادسیمال، که واضح است. بله، برای ثبت عدد اعشاری 255 در نماد هگزادسیمال FF است.
سیستم هگزا دسیمال برای کامپیوتر قابل درک تر است، مقادیر داده شده توسط مقدار هگزادسیمال را سریعتر پردازش می کند.
برای تعیین یک رنگ در سیستم هگزادسیمال، قبل از مقدار عددی علامت "#" قرار دهید، به عنوان مثال: #FFC0CB. مقدار #FFC0CB خود از سه رقم هگزادسیمال FF، C0 و CB تشکیل شده است. معنای این مدخل همان تنظیم رنگ در است فرمت RGB(rgb(r, g, b)) - هر رقم هگزا دسیمال در کد HEX نشان دهنده اشباع رنگ در کانال مدل RGB آن است.
این کد عناصر زیر را نمایش می دهد:
و در اینجا یک تصویر با نتیجه از بخش "تنظیم رنگ با RGB" در این صفحه بالا آمده است.
عکس. 1. رنگ ها در RGB می بینیم که رنگ ها یکسان هستند.
یک علامت اختصاری برای کد رنگ HEX مجاز است: یک عدد 6 رقمی را می توان به عنوان یک عدد 3 رقمی نوشت. این تنها زمانی معتبر است که دو رقم در مقدار رنگ همان کانال تکرار شود.
یعنی مخفف زیر قابل قبول است:
به عنوان مثال، رنگ #ff22aa را می توان به صورت #f2a یا رنگ #44aa22 را می توان به صورت #4a2 نوشت.
تنظیم رنگ با HSL
CSS3 فرمت جدیدی برای تعیین رنگ دارد.
فرمت HSL مخفف کلمات انگلیسی Hue (رنگ)، Saturate (اشباع) و Lightness (سبک) است.
Hue در HSL یک مقدار رنگ در یک چرخ رنگ خاص است (شکل 2) و بر حسب درجه مشخص می شود. اگر قیاس هایی با مدل RGB ترسیم کنیم، 0 درجه مربوط به قرمز، 120 درجه مربوط به سبز و 240 درجه مربوط به آبی است.
مقدار رنگ از 0 به 359 تغییر خواهد کرد.
شکل 2. چرخ رنگ HSL. مقدار دوم - اشباع (Saturate) به عنوان درصد تنظیم می شود. در 100٪ اشباع، رنگ تا حد ممکن "آبدار" است، همانطور که نشانگر اشباع به سمت 0 حرکت می کند، رنگ بیشتر و بیشتر مات می شود و به رنگ خاکستری در می آید.
مقدار سوم - Lightness (Lightness) نیز به صورت درصد تنظیم می شود. هر چه درصد بیشتر باشد، رنگ روشن تر خواهد بود. مقادیر شدید 0% و 100% به ترتیب رنگ‌های سیاه (عدم نور) و سفید (در معرض) را نشان می‌دهند و مهم نیست که کدام رنگ از چرخه رنگ در کانال اول انتخاب شده است. مقدار بهینه را می توان مقدار روشنایی رنگ را معادل 50 درصد در نظر گرفت.
تنظیم رنگ با HSLA
فرمت HSLA مربوط به HSL است، همانطور که RGB به RGBA است. در فرمت HSLA و همچنین در RGBA یک کانال آلفا اضافه شده است که وظیفه شفافیت رنگ را بر عهده دارد.
رنگ مشخص شده در فرمت HSL راحت تر خوانده می شود. می توان گفت که شهودی است. برای مثال، کد hsl(120,60%,50%) می تواند رنگ نهایی را نشان دهد اگر تصویری از چرخه رنگ HSL در حافظه وجود داشته باشد. این را نمی توان در مورد فرمت های RGB و HEX گفت، کد رنگ مشخص شده در این فرمت ها تنها پس از رندر شدن در مانیتور مشخص می شود.
فرمت های جدید در CSS3 (HSL، HSLA و RGBA) در مرورگرها از نسخه های: IE 9.0، Opera 10.0 Firefox 3.0 کار می کنند. چگونه می توان استایل ها را در مرورگرهای قدیمی تر کار کرد؟
Someblock (رنگ پس‌زمینه: rgb(255,50,50)؛ رنگ پس‌زمینه: rgba (255,50,50,0.85)
هنگام استفاده از این کد در مرورگرهای قدیمی، رنگ پس‌زمینه کلاس .somebloсk، اگرچه از کانال آلفا استفاده نمی‌کند، با فرمت RGB نمایش داده می‌شود.
برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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 | شرح |
|---|---|---|---|---|---|
| سفید | #fffff یا #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 که به ویژگی background-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. رنگ ها در صفحه وب
ولاد مرژویچ
در 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 (قرمز، سبز، آبی؛ قرمز، سبز، آبی) نامیده می شود. این مدل افزودنی است (از add - add) که در آن افزودن هر سه جزء سفید رنگ می شود.
برای سهولت در پیمایش در رنگ های هگزا دسیمال، برخی از قوانین را در نظر بگیرید.
- اگر مقادیر اجزای رنگ یکسان باشد (به عنوان مثال: #D6D6D6)، یک رنگ خاکستری به دست می آید. هرچه این عدد بیشتر باشد، رنگ روشن‌تر است و مقادیر از #000000 (سیاه) به #FFFFFF (سفید) تغییر می‌کنند.
- اگر جزء قرمز حداکثر (FF) باشد، یک رنگ قرمز روشن تشکیل می‌شود و اجزای باقیمانده روی صفر تنظیم می‌شوند. رنگ با مقدار #FF0000 قرمزترین رنگ قرمز ممکن است. همین امر برای سبز (#00FF00) و آبی (#0000FF) صادق است.
- زرد (#FFFF00) از ترکیب قرمز با سبز به دست می آید. این به وضوح در چرخه رنگ دیده می شود (شکل 6.1)، که رنگ های اصلی (قرمز، سبز، آبی) و مکمل یا مکمل را نشان می دهد. اینها عبارتند از زرد، فیروزه ای و بنفش (همچنین سرخابی نامیده می شود). به طور کلی هر رنگی را می توان با مخلوط کردن رنگ های مجاور آن به دست آورد. بنابراین فیروزه ای (#00FFFF) با ترکیب آبی و سبز به دست می آید.
برنج. 6.1. دایره رنگی
رنگ های مبتنی بر مقادیر هگزادسیمال نباید به صورت تجربی انتخاب شوند. برای این منظور مناسب است ویرایشگر گرافیکیکه می تواند با مدل های رنگی مختلف کار کند، به عنوان مثال، فتوشاپ. روی انجیر 6.2 پنجره ای را برای انتخاب یک رنگ در این برنامه نشان می دهد، خط دور مقدار هگزادسیمال حاصل از رنگ فعلی می چرخد. می توانید آن را کپی کرده و در کد خود جایگذاری کنید.
برنج. 6.2. انتخابگر رنگ در فتوشاپ
رنگ های وب
اگر کیفیت رنگ مانیتور را روی 8 بیت (256 رنگ) تنظیم کنید، همان رنگ را می توان در مرورگرهای مختلفبه روش خودم این به نحوه رندر گرافیک مربوط می شود زمانی که مرورگر با پالت خود کار می کند و نمی تواند رنگی را که در پالت ندارد نشان دهد. در این حالت، رنگ با ترکیبی از پیکسل‌های رنگ‌های نزدیک به آن جایگزین می‌شود که از رنگ داده شده تقلید می‌کنند. برای اینکه رنگ در مرورگرهای مختلف یکسان بماند، پالتی از رنگ های به اصطلاح وب معرفی شد. رنگ های وب آن دسته از رنگ هایی هستند که برای هر جزء آنها - قرمز، سبز و آبی - یکی از شش مقدار تنظیم شده است - 0 (00)، 51 (33)، 102 (66)، 153 (99)، 204 (CC)، 255 (FF). مقدار هگزادسیمال این جزء در براکت نشان داده شده است. تعداد کل رنگ ها از تمام ترکیب های ممکن 6x6x6 - 216 رنگ می دهد. یک رنگ وب مثال #33FF66 است.
ویژگی اصلی رنگ وب این است که در همه مرورگرها یکسان نمایش داده می شود. در حال حاضر ارتباط رنگ های وب به دلیل افزایش کیفیت مانیتورها و گسترش قابلیت های آنها بسیار کم است.
رنگ ها بر اساس نام
برای اینکه مجموعه ای از اعداد را به خاطر نیاورید، می توانید به جای آن از نام رنگ های رایج استفاده کنید. روی میز. 6.3 نام رنگ های محبوب را نشان می دهد.
| نام رنگ | رنگ | شرح | مقدار هگز |
|---|---|---|---|
| سیاه | مشکی | #000000 | |
| آبی | آبی | #0000FF | |
| فوشیا | بنفش روشن | #FF00FF | |
| خاکستری | خاکستری تیره | #808080 | |
| سبز | سبز | #008000 | |
| اهک | سبز روشن | #00FF00 | |
| مارون | قرمز تیره | #800000 | |
| نیروی دریایی | آبی تیره | #000080 | |
| زیتون | زیتون | #808000 | |
| رنگ بنفش | بنفش تیره | #800080 | |
| قرمز | قرمز | #FF0000 | |
| نقره | خاکستری روشن | #C0C0C0 | |
| سبز رنگ | سبز آبی | #008080 | |
| سفید | سفید | #FFFFFF | |
| رنگ زرد | رنگ زرد | #FFFF00 |
مهم نیست که چگونه رنگ را مشخص می کنید - با نام آن یا با استفاده از اعداد هگزادسیمال. در اثر آنها، این روش ها برابر هستند. مثال 6-1 نحوه تنظیم رنگ پس زمینه و متن یک صفحه وب را نشان می دهد.
مثال 6.1. رنگ پس زمینه و متن
متن نمونه
AT این مثالرنگ پس زمینه با استفاده از ویژگی bgcolor تگ تنظیم می شود
و رنگ متن از طریق ویژگی text. برای تنوع، مقدار ویژگی text روی یک عدد هگزادسیمال و bgcolor روی یک مقدار رزرو شده تنظیم می شود. کلمه کلیدیسبز رنگ