کدهای رنگ در 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 سی سی | #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 است. در فرمت 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 که به ویژگی پسزمینه-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 (رنگ / رنگ)، اشباع (اشباع)، 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) یک مدل تفریق کننده است، به این معنی که مقادیر بالاتر با رنگ های تیره تر همراه است.
رنگ ها با نسبت فیروزه ای (فیروزه ای)، سرخابی (سرخابی)، زرد (زرد)، با افزودن رنگ سیاه (کلید / سیاه K) تعیین می شوند.
هر یک از اعدادی که یک رنگ را در 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 بر اساس مدل "دو هگزا" است. هنرمندان اغلب ترجیح می دهند از این مدل استفاده کنند، به طور کلی پذیرفته شده است که دستگاه 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 محاسبه می شود. هدف آزمایشگاه ایجاد فضای رنگی بود که در آن تغییر رنگ از نظر درک انسان خطی تر باشد (در مقایسه با XYZ)، یعنی همان تغییر در مقادیر مختصات رنگ در مناطق مختلف فضای رنگ ایجاد شود. همان احساس تغییر رنگ