کدهای رنگ در CSS برای تعیین رنگ ها استفاده می شود. به طور معمول، کدهای رنگ یا مقادیر رنگ برای تنظیم یک رنگ یا به استفاده می شود پیش زمینهعنصر (به عنوان مثال، رنگ متن، پیوندها)، یا برای پس زمینه عنصر (رنگ پس زمینه، بلوک). همچنین می توان از آنها برای تغییر رنگ دکمه، حاشیه، نشانگر، شناور و سایر جلوه های تزئینی استفاده کرد.
شما می توانید مقادیر رنگ خود را در آن تنظیم کنید فرمت های مختلف. جدول زیر تمام فرمت های ممکن را فهرست می کند:
این فرمت ها با جزئیات بیشتر در زیر توضیح داده شده است.
رنگ های CSS - کدهای هگز
کد رنگ هگزادسیمالیک نمایش رنگی شش رقمی است. دو رقم اول (RR) مقدار قرمز، دو رقم بعدی مقدار سبز (GG) و دو رقم آخر مقدار آبی (BB) هستند.
رنگ های CSS - کدهای هگز کوتاه
کد رنگ هگزادسیمال کوتاهشکل کوتاه تری از نماد شش نویسه است. در این فرمت، هر رقم تکرار می شود تا مقدار رنگ شش رقمی معادل تولید شود. به عنوان مثال: #0F0 تبدیل به #00FF00 می شود.
مقدار هگزادسیمال را می توان از هر گرافیکی گرفت نرم افزار، مانند فتوشاپ، نقشه اصلی و غیره
قبل از هر کد رنگ هگزا دسیمال در CSS یک علامت هش "#" وجود دارد. در زیر نمونه هایی از استفاده از نماد هگزادسیمال آورده شده است.
رنگ های CSS - مقادیر RGB
مقدار RGBیک کد رنگی است که با استفاده از ویژگی rgb() تنظیم می شود. این ویژگی سه مقدار می گیرد: یکی برای قرمز، سبز و آبی. مقدار می تواند یک عدد صحیح، از 0 تا 255، یا یک درصد باشد.
توجه داشته باشید:همه مرورگرها از ویژگی رنگ rgb() پشتیبانی نمی کنند، بنابراین استفاده از آن توصیه نمی شود.
در زیر نمونه ای وجود دارد که چندین رنگ را با استفاده از مقادیر RGB نشان می دهد.
مولد کد رنگ
شما می توانید میلیون ها کد رنگ را با خدمات ما ایجاد کنید.
رنگ های ایمن مرورگر
در زیر جدولی از 216 رنگ که امن ترین و مستقل از کامپیوتر هستند را مشاهده می کنید. این رنگ ها در CSS از 000000 تا کد هگز FFFFFF متغیر است. استفاده از آنها ایمن است زیرا اطمینان حاصل می کند که همه رایانه ها هنگام کار با پالت رنگ 256 رنگ را به درستی نشان می دهند.
جدول رنگ های "ایمن" در CSS | |||||
#000000 | #000033 | #000066 | #000099 | #0000 سی سی | #0000FF |
#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 | #9900CC | #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 |
رنگ در زبان 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 است. V فرمت 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 نمایش داده میشود.
02/26/15 8.9Kهمانطور که می دانید، رنگ می تواند بر وضعیت یک فرد تأثیر بگذارد: روحی و جسمی. هر روز با مرور اینترنت، چشم ها میلیون ها رنگ و سایه را ارزیابی می کنند. یک طراح وب که با روانشناسی رنگ آشنا است می تواند روحیه بازدیدکنندگان را برای رسیدن به هر هدفی کنترل کند.
این به دلیل این واقعیت است که برخی از سایه ها تسکین می دهند، و برخی، برعکس، هیجان زده می شوند. به علاوه ما صحبت خواهیم کرددر مورد چگونگی سنتز و نمایش رنگ با استفاده از فناوری کامپیوتری.
RGB یک مدل رنگی است که نشان دهنده روشی برای به دست آوردن تمام رنگ ها و سایه های آنها با مخلوط کردن به نسبت های مختلف سه جزء اصلی است که عبارتند از:
- رنگ قرمز ( قرمز);
- رنگ سبز ( سبز);
- رنگ آبی ( آبی).
نام اختصاری RGB از اینجا آمده است. این رنگ ها به دلیلی به عنوان رنگ های اصلی انتخاب می شوند: دلیل آن فیزیولوژی شبکیه چشم انسان و نحوه درک آن است:
مدل RGB امروزه محبوب ترین است و برای بازتولید رنگ ها بر روی صفحه نمایش تلویزیون و مانیتورهای کامپیوتر. از آنجایی که تولید کنندگان محصولات خود را وقف می کنند ویژگی های مختلف، در سال 1375 تاسیس شد یک سیستمیک سنتز رنگ بر اساس RGB به نام sRGB که به طور مشترک روی آن کار شده است مایکروسافتو HP
نمایش رنگ عددی
همانطور که قبلا ذکر شد، رنگ های 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، رنگ بژ دارای نمایش های عددی زیر است.
برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال، برخلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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 که به ویژگی پسزمینه-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. رنگ ها در صفحه وب