شبکه رنگی. رنگ در سبک ها را می توان به روش های مختلف تنظیم کرد: با مقدار هگزادسیمال، با نام، در فرمت RGB، RGBA، HSL، HSLA. مثال: تنظیم یک رنگ با نام آن
ماژول رنگی CSS مقادیری را که به نویسندگان اجازه می دهد رنگ ها و شفافیت عناصر html و همچنین مقادیر ویژگی رنگ را مشخص کنند، جزئیات می دهد.
خاصیت رنگ
1. رنگ های اولویت: خاصیت رنگ
این ویژگی رنگ فونت را با استفاده از سیستم های رندر مختلف تنظیم می کند. این ویژگی رنگ محتوای متن عنصر را توصیف می کند. همچنین برای ارائه یک مقدار غیرمستقیم بالقوه (currentColor) برای هر ویژگی دیگری که مقادیر رنگ را می پذیرد استفاده می شود.
ملک موروثی است.
2. مقادیر رنگ
2.1. کلمات کلیدی اصلی
لیست کلمات کلیدی اصلی شامل مقادیر زیر است:
| نام | HEX | RGB | رنگ |
|---|---|---|---|
| سیاه | #000000 | 0,0,0 | |
| نقره | #C0C0C0 | 192,192,192 | |
| خاکستری | #808080 | 128,128,128 | |
| سفید | #FFFFFF | 255,255,255 | |
| مارون | #800000 | 128,0,0 | |
| قرمز | #FF0000 | 255,0,0 | |
| رنگ بنفش | #800080 | 128,0,128 | |
| فوشیا | #FF00FF | 255,0,255 | |
| سبز | #008000 | 0,128,0 | |
| اهک | #00FF00 | 0,255,0 | |
| زیتون | #808000 | 128,128,0 | |
| رنگ زرد | #FFFF00 | 255,255,0 | |
| نیروی دریایی | #000080 | 0,0,128 | |
| آبی | #0000FF | 0,0,255 | |
| سبز رنگ | #008080 | 0,128,128 | |
| آبی | #00FFFF | 0,255,255 |
نام رنگ ها به حروف بزرگ و کوچک حساس نیستند.
نحو
رنگ: سرمه ای؛
2.2. مقادیر رنگ عددی
2.2.1. رنگ های مدل RGB
فرمت یک مقدار RGB در هگزادسیمال یک علامت # است که بلافاصله با سه یا شش کاراکتر هگزادسیمال دنبال می شود. نماد RGB سه رقمی #rgb با کپی کردن ارقام به شکل شش رقمی #rrggbb تبدیل می شود نه با افزودن صفر. به عنوان مثال، #fb0 به #ffbb00 گسترش می یابد. این تضمین می کند که #ffffff سفید را می توان در اختصار #fff مشخص کرد و هر گونه وابستگی به عمق رنگ نمایشگر را حذف می کند.
قالب یک مقدار RGB در نماد عملکردی rgb است (به دنبال آن یک لیست سه مقدار عددی جدا شده با کاما (یا سه مقدار صحیح یا سه عدد مقادیر درصد) به دنبال شخصیت) . مقدار صحیح 255 مربوط به 100٪ و F یا FF در نماد هگزادسیمال است:
rgb(255,255,255) = rgb(100%, 100, 100%) = #FFF
کاراکترهای فاصله در اطراف مقادیر عددی مجاز هستند.
برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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 | شرح |
|---|---|---|---|---|---|
| سفید | #فففف یا #ففف | 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، CSS، جاوا اسکریپت، فلش و غیره استفاده شود.
در مشخصات قدیمی WC3، تنها 16 کلمه کلیدی برای تنظیم رنگ ها در HTML و CSS استفاده می شد. در بعدها، مشخصات مدرن تر، 130 کلمه کلیدی دیگر برای نشان دادن نام رنگ ها اضافه شد. جدول زیر شامل نام رنگ ها، کدهای هگزا دسیمال و RGB آنها می باشد.
مطابق با قوانین cssنام رنگ ها به حروف بزرگ و کوچک حساس نیستند. ورودی های رنگ IndianRed و indianred معادل هستند.
همچنین شایان ذکر است که از 146 کلمه کلیدی جدول، در واقع رنگ های کمتری در آن وجود دارد. این به این دلیل است که برخی کلید واژه هانشان دهنده همان رنگ است. بنابراین نام خاکستری و خاکستری مخفف 50 درصد خاکستری با کد #808080 است و کلمه Magenta مترادف آن است. رنگ های HTMLفوشیا، مربوط به کد هگز #FF00FF. کلمات Aqua و Cyan نیز مترادف هستند، آنها با کد #00FFFF مطابقت دارند.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
راه های مختلفی برای نمایش رنگ در طراحی وب وجود دارد.
HEX یک سیستم هگزادسیمال برای نمایش رنگ ها در پایه 16 است. برای این سیستم، ارقام اعشاری عربی از 0 تا 9 و حروف لاتین از A تا F برای تکمیل عدد دیجیتال تا 16 استفاده می شود. برای طراحی وب، 16 رنگ اصلی (کلیدی) کد رنگ هگزا دسیمال #RRGGBB که هر جفت مسئول سهم رنگ خود است: RR - قرمز، GG - سبز و BB - آبی. هر کسر رنگ از 00 تا FF متغیر است.
دو نمایش دیگر رنگ در طراحی وب عبارتند از: به شکل RGB(*،*،*)، که در آن هر قسمت "*" رنگ با ارقام اعشاری از 0 تا 255 و با نام رنگ ها در انگلیسی نشان داده می شود.
هنگام ایجاد یک تصویر رنگی، مشکل اصلی بازتولید صحیح رنگ ها است انواع متفاوتکامپیوترها، مانیتورها و مرورگرها. اگر مرورگر نتواند یک رنگ را به درستی رندر کند، چندین رنگ را مطابقت یا ترکیب می کند. و گاهی اوقات می توان آن را با رنگ های کاملا متفاوت جایگزین کرد.
جدول 16 رنگ اصلی، که در همه مرورگرها استفاده می شود
| نام | رنگ | هگز | (RGB) |
| آکوا (موج دریا) | #00FFFF | (000,255,255) | |
| مشکی (سیاه) | #000000 | (000,000,000) | |
| آبی (آبی) | #0000FF | (000,000,255) | |
| فوشیا (سرخابی) | #FF00FF | (255,000,255) | |
| کاملا "خاکستری) | #808080 | (128,128,128) | |
| سبز (سبز) | #008000 | (000,128,000) | |
| لیمویی (سبز روشن) | #00FF00 | (000,255,000) | |
| مارون (مخمه ای) | #800000 | (128,000,000) | |
| نیروی دریایی (آبی تیره) | #000080 | (000,000,128) | |
| زیتون (زیتون) | #808000 | (128,128,000) | |
| بنفش (بنفش) | #800080 | (128,000,128) | |
| قرمز (قرمز) | #FF0000 | (255,000,000) | |
| نقره (نقره) | #C0C0C0 | (192,192,192) | |
| سبز آبی (سبز خاکستری) | #008080 | (000,128,128) | |
| سفید (سفید) | #FFFFFF | (255,255,255) | |
| زرد (زرد) | #FFFF00 | (255,255,000) |
جدول رنگ بنفشرنگ ها و سایه ها
| نام | رنگ | هگز | (RGB) |
| سرخابی (سرخابی) | #FFCBDB | (255,203,219) | |
| سرخابی (سرخابی) | #FF0099 | (255,000,153) | |
| سرخابی (سرخابی) | #F95A61 | (249,090,097) | |
| فوشیا (فوشیا) | #FF00FF | (255,000,255) | |
| مووین (بنفش آنیلین) | #EF0097 | (239,000,151) | |
| صورتی سالمون (صورتی نارنجی) | #FF91A4 | (255,145,164) | |
| سنیس (سایه ای از سرخابی) | #DE3163 | (153,149,140) | |
| بادمجان بادمجان (بادمجان) | #990066 | (153,000,132) | |
| رژگونه اسطوخودوس (اسطوخودوس مایل به صورتی) | #FFF0F5 | (255,240,245) | |
| یاس بنفش (یاس بنفش) | #C8A2C8 | (200,162,200) | |
| سرخابی (سرخابی) | #FF008F | (255,000,143) | |
| ارکیده (ارکیده) | #DA70D6 | (218,112,214) | |
| قرمز بنفش (بنفش قرمز) | #C71585 | (199,021,133) | |
| سانگوئن (سانگوئن) | #92000A | (146,000,010) | |
| خار (سایه ای از سرخابی) | #D8BFD8 | (185,211,238) | |
| بنفش-بادمجان (یک سایه سرخابی) | #991199 | (153,017,153) | |
| Rosa vivo (صورتی پر رنگ) | #FF007F | (255,000,127) | |
| رز اسطوخودوس (سایه ای از بنفش) | #FBA0E3 | (108,123,139) | |
| Mountbatten pink (Mounbatten pink) | #997ABD | (153,122,141) |
جدول خاکستریرنگ ها و سایه ها
| نام | رنگ | هگز | (RGB) |
| کاملا "خاکستری) | #808080 | (128,128,128) | |
| کاملا "خاکستری) | #بی بی بی | (190,190,190) | |
| (خاکستری مایل به خاکستری) | #858585 | (133,133,133) | |
| خاکستری33 (خاکستری-33) | #545454 | (084,084,084) | |
| (لوح خاکستری) | #708090 | (112,128,144) | |
| (کوارتز) | #99958с | (153,149,140) | |
| (خاکستری روشن) | #بببب | (187,187,187) | |
| (نقره) | #c0c0c0 | (192,192,192) | |
| (سفید خاکستری) | #f0f0f0 | (240,240,240) | |
| (ریش های عبدالکریم) | #e0e0e0 | (224,224,224) | |
| خاکستری روشن (خاکستری روشن) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (آبی گل ذرت کم رنگ1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (آبی گل ذرت کم رنگ2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |