کدهای رنگ در 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 |
در HTML رنگ را می توان به سه روش مشخص کرد:
تنظیم یک رنگ در HTML با نام آن
برخی از رنگ ها را می توان با نام آنها، با استفاده از نام رنگ در انگلیسی به عنوان مقدار مشخص کرد. رایج ترین کلمات کلیدی: سیاه، سفید، قرمز، سبز، آبی و غیره:
رنگ متن - قرمز
محبوب ترین رنگ های استاندارد کنسرسیوم وب جهانی (W3C):
| رنگ | نام | رنگ | نام | رنگ | نام | رنگ | نام |
|---|---|---|---|---|---|---|---|
| مشکی | خاکستری | نقره | سفید | ||||
| رنگ زرد | اهک | آبی | فوشیا | ||||
| قرمز | سبز | آبی | رنگ بنفش | ||||
| مارون | زیتون | نیروی دریایی | آبی رنگ |
نمونه ای از استفاده از نام رنگ های مختلف:
مثال: تعیین یک رنگ با نام آن
- خودت آن را امتحان کن "
هدر در پس زمینه قرمز
هدر در پس زمینه نارنجی
سر در زمینه آهکی
متن سفید در پس زمینه آبی
هدر در پس زمینه قرمز
هدر در پس زمینه نارنجی
سر در زمینه آهکی
متن سفید در پس زمینه آبی
تعیین رنگ با استفاده از RGB
هنگام نمایش رنگ های مختلف بر روی مانیتور، پالت RGB به عنوان پایه استفاده می شود. هر رنگی با مخلوط کردن سه رنگ اصلی به دست می آید: R - قرمز, G - سبز, ب - آبی. روشنایی هر رنگ با یک بایت داده می شود و بنابراین می تواند مقادیری از 0 تا 255 داشته باشد. برای مثال، RGB(255,0,0) به صورت قرمز نمایش داده می شود زیرا قرمز روی بالاترین مقدار خود (255) تنظیم شده است. بقیه روی 0 تنظیم شده اند همچنین می توانید رنگ را به صورت درصد تنظیم کنید. هر پارامتر میزان روشنایی رنگ مربوطه را نشان می دهد. به عنوان مثال: مقادیر rgb (127، 255، 127) و rgb (50٪، 100٪، 50%) همان رنگ سبز متوسط را تنظیم می کنند:
مثال: تعیین رنگ با استفاده از RGB
- خودت آن را امتحان کن "
rgb(127، 255، 127)
rgb(50%, 100, 50%)
rgb(127، 255، 127)
rgb(50%, 100, 50%)
رنگ را با مقدار هگزادسیمال تنظیم کنید
ارزش های آر جی بهمچنین می توان با استفاده از مقادیر رنگی هگزا دسیمال (HEX) به این شکل مشخص کرد: #RRGGBB که در آن RR (قرمز)، GG (سبز) و BB (آبی) مقادیر هگزادسیمال از 00 تا FF هستند (همانند اعشاری 0-255). ) . سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر پایه عدد 16 استوار است. A، B، C، D، E، F. در اینجا اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. اعداد بزرگتر از 15 در سیستم هگزادسیمال با ترکیب دو کاراکتر در یک مقدار نشان داده می شوند. به عنوان مثال، بالاترین عدد 255 در اعشار مربوط به بالاترین مقدار FF در هگزادسیمال است. برخلاف سیستم اعشاری، قبل از یک عدد هگزادسیمال یک نماد هش قرار می گیرد. # به عنوان مثال، #FF0000 به صورت قرمز نشان داده می شود زیرا قرمز روی بالاترین مقدار خود (FF) و بقیه رنگ ها روی حداقل مقدار خود (00) تنظیم شده اند. علائم بعد از نماد هش # می توانید با حروف بزرگ و کوچک تایپ کنید. سیستم هگزادسیمال به شما امکان می دهد از شکل اختصاری #rgb استفاده کنید که در آن هر کاراکتر معادل دو برابر است. بنابراین، ورودی #f7O باید به عنوان #ff7700 در نظر گرفته شود.
مثال: رنگ HEX
- خودت آن را امتحان کن "
قرمز: #FF0000
سبز: #00FF00
آبی: #0000FF
قرمز: #FF0000
سبز: #00FF00
آبی: #0000FF
قرمز+سبز=زرد: #FFFF00
قرمز+آبی=بنفش: #FF00FF
سبز+آبی=فیروزه ای: #00FFFF
لیست رنگ های رایج (نام، HEX و RGB):
| نام انگلیسی | نام روسی | نمونه | HEX | RGB | ||
|---|---|---|---|---|---|---|
| آمارانت | آمارانت | #E52B50 | 229 | 43 | 80 | |
| کهربا | کهربا | #FFBF00 | 255 | 191 | 0 | |
| آبی | سبز آبی | #00FFFF | 0 | 255 | 255 | |
| لاجوردی | لاجوردی | #007FFF | 0 | 127 | 255 | |
| مشکی | مشکی | #000000 | 0 | 0 | 0 | |
| آبی | آبی | #0000FF | 0 | 0 | 255 | |
| باندی آبی | آب ساحل بوندی | #0095B6 | 0 | 149 | 182 | |
| برنج | برنج | #B5A642 | 181 | 166 | 66 | |
| رنگ قهوه ای | رنگ قهوه ای | #964B00 | 150 | 75 | 0 | |
| سرولین | لاجوردی | #007BA7 | 0 | 123 | 167 | |
| سبز تیره بهاری | سبز تیره بهاری | #177245 | 23 | 114 | 69 | |
| زمرد | زمرد | #50C878 | 80 | 200 | 120 | |
| بادمجان | بادمجان | #990066 | 153 | 0 | 102 | |
| فوشیا | فوشیا | #FF00FF | 255 | 0 | 255 | |
| طلا | طلا | #FFD700 | 250 | 215 | 0 | |
| خاکستری | خاکستری | #808080 | 128 | 128 | 128 | |
| سبز | سبز | #00FF00 | 0 | 255 | 0 | |
| نیل | نیل | #4B0082 | 75 | 0 | 130 | |
| یشم | یشم | #00A86B | 0 | 168 | 107 | |
| اهک | اهک | #CCFF00 | 204 | 255 | 0 | |
| مالاکیت | مالاکیت | #0BDA51 | 11 | 218 | 81 | |
| نیروی دریایی | آبی تیره | #000080 | 0 | 0 | 128 | |
| اخر | اخر | #CC7722 | 204 | 119 | 34 | |
| زیتون | زیتون | #808000 | 128 | 128 | 0 | |
| نارنجی | نارنجی | #FFA500 | 255 | 165 | 0 | |
| هلو | هلو | #FFE5B4 | 255 | 229 | 180 | |
| كدو حلوايي | كدو حلوايي | #FF7518 | 255 | 117 | 24 | |
| رنگ بنفش | بنفش | #800080 | 128 | 0 | 128 | |
| قرمز | قرمز | #FF0000 | 255 | 0 | 0 | |
| زعفران | زعفران | #F4C430 | 244 | 196 | 48 | |
| سبز دریا | دریای سبز | #2E8B57 | 46 | 139 | 87 | |
| سبز باتلاق | بولوتنی | #ACB78E | 172 | 183 | 142 | |
| آبی رنگ | سبز آبی | #008080 | 0 | 128 | 128 | |
| اولترامارین | اولترامارین | #120A8F | 18 | 10 | 143 | |
| بنفش | بنفش | #8B00FF | 139 | 0 | 255 | |
| رنگ زرد | رنگ زرد | #FFFF00 | 255 | 255 | 0 | |
کدهای رنگ (پس زمینه) بر اساس اشباع و رنگ.
11/28/14 11.1Kمتاسفانه هنوز امکان نمایش حس چشایی در وب سایت وجود ندارد. اما این را می توان با کمک رنگ ها به طور کامل جبران کرد. به هر حال، رنگ‌های html به شما امکان می‌دهند هر یک از میلیون‌ها سایه را نمایش دهید. بنابراین " مداد رنگیدر مجموعه او بیش از هفت نفر وجود دارد.
طرح رنگ در html
در html، رنگ را می توان در چندین فرمت مشخص کرد:
1. به عنوان یک مقدار هگزادسیمال - کد مشخص شده در سیستم اعداد هگزادسیمال استفاده می شود. چنین کدهای رنگی در html از سه جفت اعداد هگزا دسیمال تشکیل شده است. هر جفت مسئول اشباع سایه با رنگ اصلی خود است:
- اولین جفت عددی مسئول رنگ قرمز است.
- جفت دوم برای محتوای رنگ سبز است.
- مورد دوم برای محتوای آبی آن است.
یک علامت هش در ابتدای کد (قبل از اعداد) قرار می گیرد. این کد رنگ هگزادسیمال است. علاوه بر اعداد از 1 تا 9، این سیستم اعداد از حروف الفبای لاتین (A، B، C، D، E، F) استفاده می کند.
برای مثال، کد رنگ سفید در html شبیه #FFFFFF خواهد بود:
2. کلمه کلیدی - HTML در حال حاضر از 147 کلمه کلیدی پشتیبانی می کند. اما همه این کلمات منحصر به فرد نیستند. برخی از آنها به همان سایه رنگ اشاره دارند.
رنگ خاکستری با دو کلمه کلیدی نشان داده می شود: خاکستری و خاکستری. کد هگزا دسیمال آنها (HEX) با همان مقدار #808080 داده می شود.
مثال:
#808080
3. در قالب RGB - این رمزگذاری رنگ در html بر اساس استفاده از سه مقدار است که در محدوده 0 تا 255 تنظیم شده است. هر یک از آنها اشباع رنگ را با یکی از رنگ های اصلی تعیین می کند:
- R - قرمز (قرمز)؛
- G - سبز (سبز)؛
- ب - آبی (آبی).
شماره رنگ در فرمت RGB به شکل زیر نوشته شده است: rgb(0, 210, 100).
پس‌زمینه رنگ: rgb (100,186,43)
4. در قالب RGBA - این یک فرمت RGB بهبود یافته است، که در آن مقدار چهارم شفافیت رنگ را به عنوان کسر اعشاری از 0 تا 1 مشخص می کند.
مثال استفاده:
background-color:rgba(100,86,143,0.2)
background-color:rgba(100,86,143,0.5)
background-color:rgba(100,86,143,0.8)
پس‌زمینه رنگ: rgba (100,86,143,1)
جداول رنگ HTML و مولدهای رنگ
با چنین طیف گسترده ای از فرمت های تنظیم رنگ، گیج شدن آسان است. بنابراین، یک جدول رنگی خاص اختراع شد. این 147 نام کلیدی سایه رنگ را با کدهای انطباق در تمام استانداردهای رنگ اصلی ارائه می دهد. علاوه بر این، هر فیلد دارای یک نوار برای انتخاب رنگ بصری است. یکی از این جداول در وب سایت colorscheme.ru ارائه شده است:
اما حتی با این ساختار تطابق، انتخاب سایه مناسب می تواند دشوار باشد. و این یک واقعیت نیست که جدول کدهای رنگ حاوی رنگ مورد نیاز شما باشد.
برای دور زدن این مانع و سهولت در انتخاب سایه مناسب، خدمات وب تعاملی توسعه داده شده است. رابط کاربری آنها ممکن است کمی با یکدیگر متفاوت باشد.
در وب سایت html-color-codes.info مولد رنگ به شکل زیر است:
و در سرویس color-picker.appsmaster.co، این ابزار کمی متفاوت اجرا می شود:
اشباع هر رنگ در ژنراتور با استفاده از لغزنده های مخصوص تنظیم می شود. از نظر بصری، سایه با رنگ قاب و مستطیل در سمت چپ نمایش داده می شود. در پایین، 3 فیلد کد رنگ را در قالب های اصلی نمایش می دهد.
اما مولد رنگ نه تنها در سایت های تخصصی موجود است. تقریباً تمام ویرایشگرهای گرافیکی به ابزار مشابهی مجهز هستند. مثلا فتوشاپ:
نکات ایمنی هنگام کار با رنگ
و این مدت‌ها پیش بود، در دوران کارت‌های ویدئویی که تنها از 256 رنگ پشتیبانی می‌کردند. در آن زمان‌های دور، سیستم‌عامل‌ها فقط می‌توانستند تعداد مشخصی از سایه‌های هشت بیتی را بدون اعوجاج نمایش دهند.
سپس یک جدول عالی از رنگ های ایمن ایجاد شد. 216 سایه را مشخص کرد که می توانست بدون اعوجاج در هر یک از مرورگرهای آن زمان نمایش داده شود. و تا امروز این " نسخه خطی عالی» هنوز در برخی منابع موجود است:
امروزه همه چیز تغییر کرده است. بنابراین، تمام قوانین ایمنی هنگام کار با رنگ در html به طور کامل لغو می شود. پس از همه، سخت افزار کامپیوتر مدرن از بیش از 16 میلیون سایه مختلف پشتیبانی می کند. و 216 رنگ مطمئن در فراموشی فرو رفته است.
ولاد مرژویچ
در 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) جزء آبی را مشخص می‌کنند. نتیجه نهایی این رنگ خواهد بود.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند که در مجموع 256 سایه ایجاد می کند. بنابراین، تعداد کل رنگ ها می تواند 256x256x256 = 16777216 ترکیب باشد. مدل رنگی مبتنی بر اجزای قرمز، سبز و آبی RGB (قرمز، سبز، آبی؛ قرمز، سبز، آبی) نامیده می شود. این مدل افزودنی است (از add - add) که در آن افزودن هر سه جزء رنگ سفید را تشکیل می دهد.
برای سهولت در پیمایش رنگ های هگزا دسیمال، برخی از قوانین را در نظر بگیرید.
- اگر مقادیر اجزای رنگ یکسان باشد (به عنوان مثال: #D6D6D6)، نتیجه یک رنگ خاکستری خواهد بود. هرچه این عدد بیشتر باشد، رنگ روشن تر است، با مقادیری از #000000 (سیاه) تا #FFFFFF (سفید).
- اگر جزء قرمز حداکثر (FF) باشد و اجزای باقیمانده روی صفر تنظیم شوند، یک رنگ قرمز روشن تشکیل می‌شود. رنگی با مقدار #FF0000 قرمزترین رنگ قرمز ممکن است. همین امر برای سبز (#00FF00) و آبی (#0000FF) صادق است.
- زرد (#FFFF00) از ترکیب قرمز و سبز ایجاد می شود. این به وضوح در چرخه رنگ قابل مشاهده است (شکل 6.1)، که رنگ های اصلی (قرمز، سبز، آبی) و مکمل یا اضافی را نشان می دهد. اینها شامل زرد، فیروزه ای و بنفش (همچنین سرخابی نامیده می شود). به طور کلی هر رنگی را می توان با مخلوط کردن رنگ های نزدیک به آن به دست آورد. بنابراین، فیروزه ای (#00FFFF) با ترکیب آبی و سبز به دست می آید.
برنج. 6.1. دایره رنگی
رنگ های مبتنی بر مقادیر هگزادسیمال نباید به صورت تجربی انتخاب شوند. برای این منظور یک ویرایشگر گرافیکی که می تواند با مدل های رنگی مختلف کار کند، مثلا Adobe Photoshop مناسب است. در شکل شکل 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. رنگ پس زمینه و متن
متن نمونه
در این مثال، رنگ پس‌زمینه با استفاده از ویژگی bgcolor تگ تنظیم می‌شود
و رنگ متن از طریق ویژگی text. برای تنوع، ویژگی text روی یک عدد هگزا دسیمال و ویژگی bgcolor روی کلمه کلیدی رزرو شده teal تنظیم شده است.برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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 | شرح |
|---|---|---|---|---|---|
| سفید | #ffffff یا #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. رنگ ها در صفحه وب
