مدل رنگ آر جی بی ( RGB )

این سیستم برای رسانه های تصویری مانند تلویزیون ها ، مانیتور ها ، گوشی ها و هر آن چه که از آن نور ساطع شود استفاده می شود . در این مدل تمام رنگ ها از سه ترکیب رنگ تشکیل می شود . این سه رنگ عبارتند از :   قرمز ( RED ) , سبز ( Green ) , آبی ( Blue ) 

نام این سیستم رنگ از حرف اول سه رنگ بالا گرفته شده است . و از ترکیب رنگ های بالا که به آن ها رنگ های اولیه گفته می شود ، با این سه رنگ می توان  میلیون ها ترکیب رنگی جدید به وجود آورد . پس برای طراحی یک وب سایت یا یک بنر وب باید از این ترکیب رنگی استفاده کنیم . در این ترکیب رنگ برای نشان دادن رنگ سیاه از کد 000# استفاده می شود یعنی هیچ رنگی را باهم ادغام نمی کنیم . کدها از عدد 0 تا F به صورت هگز و یا از 0 تا 255  می توان استفاده کرد .

متد Hexadecimal

از میان متدهای رنگ در CSS متد هگزا دسیمال است که بیش تر استفاده می شود و تقریباً همه مرورگرها و موتورهای جستجوگر از این متد پشتیبانی می کنند . رنگ ها در این متد با یک علامت # ( هشتک ) شروع می شوند و به دنبال علامت # از سه یا شش عددی که در مدل RGB قرار دارند استفاده می شود .

هرچه از صفر به طرف F می رویم کد رنگی ما روشن تر می شود و در نهایت کد FFF# برای تعیین رنگ سفید می باشد . در این کد عدد یا حرف اول بیان کننده رنگ قرمز است و عدد دوم برای رنگ سبز و عدد سوم برای رنگ آبی می باشد ، اگر من بخواهم رنگ سبز را در فتوشاپ نشان دهم برای این کار کافیست کد 0F0 # را بنویسم ، برای رنگ قرمز کد F00 # را به کار می بریم . به زبان ساده کد به این صورت است که رقم اول رنگ قرمز را مشخص می کند و هرچه از صفر به طرف F می رویم پر رنگ تر می شود و صفر ها نشان دهنده این است که از رنگ سبز و آبی استفاده نشود . کدهای رنگی به این صورت هم استفاده می شود FFFFFF# که در این صورت از 6 عدد یا حرف استفاده می کنیم . جون هگزا دسیمال از تعداد رنگ های بیشتری نسبت به CMYK استفاده می کند در مکان بالایی از دقت در رنگ بندی قراردارد .

Div{ color: #FFF; }
div{ color: #FFFFFF; }

متد rgb

با استفاده از این روش می توانیم به سادگی ترکیب های رنگی را بخوانیم ، به این صورت که از عدد 0 تا 255 برای هر کدام از رنگ های قرمز ، سبز ، آبی اختصاص می دهیم . یا به صورت درصدی مقدار رنگ ها را معیین می کنیم .

Div{ color: rgb( 155 , 50 , 255 ); }
Div{ color: rgb(30% , 20% , 70% ); }

متد HSL

مرورگر های جدید از متد HSL به خوبی پشتیبانی می کنند ولی کد نویسان کمی این متد را نادیده می گیرند .

اگر به تصویر بالا نگاه کنید سه رنگ قرمز ، سبز ، آبی را خواهید دید : قرمز روی صفر درجه قرار دارد ، سبز روی 120 درجه و آبی روی 240 درجه که دایره را به سه قسمت تقسیم کرده است و رنگ های فیروزه ایی ، زرد و سرخابی را هم می بینید . از بالای دایره شرع می کنیم ودر جهت عقربه های ساعت حرکت می کنیم .

جزء اول : بنابراین جزء اول این متد تعیین درجه یک رنگ در دایره بالا می باشد . یعنی اگر مقدار جزء برابر 120 درجه باشد رنگ آن سبز خواهد بود . یا رنگ صورتی که بین آبی ( 240 درجه )  و سرخابی (300 درجه) قرار دارد و کد آن به این صورت است  :

Div{ color: hsl(320 , 100% , 100%); }

جزء دوم ( Saturation ) : شدت رنگ را معیین می کند به این صورت که اگر به تصویر بالا نگاه کنید خواهید دید که هر چقدر به سمت داخل دایره حرکت کنیم ، رنگ ها کم رنگ تر می شوند پس اگر مقدار جزئ دوم را برابر 0% قرار دهیم رنگ روشن خواهد شد . اگر در فتوشاپ این کار را امتحان کنید خواهید دید هرچه مقدار جزء دوم به طرف صفر می رود از شدت رنگ آن کاسته می شود .

جزء سوم  ( Luminosity ) : مقدار این جزء درخشندگی را تعیین می کند که رنگ چقدر از سیاهی و سفیدی فاصله داشته باشد . اگر مقدار برابر 50% باشد یعنی میزان تیرگی و  روشنی رنگ به صورت متعادل می باشد و بدون تغییر باقی می ماند . کم کردن میزان luminosity باعث تیره شدن رنگ می شود . تمام رنگ های HSL با میزان Luminosity صفر کاملاً سیاه هستند . زیاد کردن میزان این جزء رنگ را روشن می کند ، در 100% تمامی رنگ های HSL به رنگ سفید هستند .

نکته : در HSL علامت درصد باید برای مقدار Saturation و هم برای مقدار Luminosity  گذاشته شود حتی اگر مقدار آن برابر صفر باشد .

مدل رنگ CMYK

این سیستم برای مواردی که نور ندارد کاربرد دارد و رنگ های بدون نور را به درستی نشان می دهد ، به عنوان مثال چون کاغذ از خود نور ندارد به همین دلیل از این سیستم برای چاپ استفاده می شود تا رنگ های چاپ شده در کاغذ با آنچه انتظار داریم متفاوت نباشد .

نام این سیستم برگرفته از حروف اول رنگ های تشکیل دهنده آن است . CMYK از ترکیب رنگ های فیروزه ایی ، سرخابی ، زرد ، سیاه برای به دست آوردن ترکیب رنگی استفاده می شود .

1.  C مخفف Cyan ( فیروزه ایی )
2. M مخفف Magenta ( سرخابی )
3. Y مخفف Yellow ( زرد )
4. K مخفف Black ( سیاه )