برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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. رنگ ها در صفحه وب
کدهای رنگ در 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 |
جدول (پالت) رنگ های htmlاین فرصت را به شما می دهد تا به طور مستقل آهنگ مورد نیاز خود را انتخاب کنید. مقدار رنگ در سه فرمت Hex، RGB و HSV نمایش داده می شود.
- هگز از سه مقدار دو کاراکتر در نماد هگزادسیمال تشکیل شده است. به عنوان مثال: #ff00b3، که در آن اولین جفت اعداد قرمز، دومی سبز و سومی آبی است.
- RGB (RedGreenBlue) دارای شکل "200،100،255" است که میزان تن مربوطه (قرمز، سبز، آبی) را در رنگ حاصل نشان می دهد.
- HSV (رنگ، اشباع، ارزش - تن، اشباع، ارزش) - یک مدل رنگ که در آن مختصات عبارتند از:
- رنگ - تن رنگ، می تواند از 0 درجه تا 360 درجه متفاوت باشد.
- اشباع - اشباع، بین 0-100 یا 0-1 متغیر است. هرچه این تنظیم بزرگتر باشد، رنگ "خالص تر" است، به همین دلیل است که گاهی اوقات به این تنظیم به عنوان خلوص رنگ نیز گفته می شود. و هر چه این پارامتر به صفر نزدیکتر باشد، رنگ به خاکستری خنثی نزدیکتر است.
- مقدار (مقدار رنگ) - روشنایی را تنظیم می کند، مقدار نیز می تواند بین 0-100 یا 0-1 متفاوت باشد.
کد رنگ را وارد کنید: برو
لیست رنگ ها با نام
جدول نام رنگ های موجود را فهرست می کند زبان انگلیسی(که می تواند به عنوان مقادیر استفاده شود) توسط همه مرورگرها و مقادیر هگزادسیمال آنها پشتیبانی می شود. تمام رنگ های فهرست شده "ایمن" هستند، به این معنی که در همه مرورگرها یکسان نمایش داده می شوند.
| نام رنگ | HEX | رنگ |
|---|---|---|
| مشکی | #000000 | |
| نیروی دریایی | #000080 | |
| آبی تیره | #00008B | |
| آبی متوسط | #0000CD | |
| آبی | #0000FF | |
| سبز تیره | #006400 | |
| سبز | #008000 | |
| آبی رنگ | #008080 | |
| فیروزه ای تیره | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| فیروزه ای تیره | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| اهک | #00FF00 | |
| بهارگرین | #00FF7F | |
| آبی | #00FFFF | |
| فیروزه ای | #00FFFF | |
| آبی نیمه شب | #191970 | |
| داجر آبی | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| جنگل سبز | #228B22 | |
| سبز دریا | #2E8B57 | |
| خاکستری تیره | #2F4F4F | |
| لیمو سبز | #32CD32 | |
| سبز دریای متوسط | #3CB371 | |
| فیروزه | #40E0D0 | |
| آبی سلطنتی | #4169E1 | |
| آبی فولادی | #4682B4 | |
| تیره رنگ آبی | #483D8B | |
| فیروزه ای متوسط | #48D1CC | |
| نیل | #4B0082 | |
| سبز زیتونی تیره | #556B2F | |
| کادت آبی | #5F9EA0 | |
| گل ذرت آبی | #6495ED | |
| مدیوم آکوامارین | #66CDAA | |
| خاکستری کم رنگ | #696969 | |
| اسلیت آبی | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| Slate Gray | #708090 | |
| LightSlate Gray | #778899 | |
| SlateBlue متوسط | #7B68EE | |
| چمن سبز | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| آکوامارین | #7FFFD4 | |
| مارون | #800000 | |
| رنگ بنفش | #800080 | |
| زیتون | #808000 | |
| خاکستری | #808080 | |
| آبی آسمانی | #87CEEB | |
| نور آسمان آبی | #87 CEFA | |
| بنفش آبی | #8A2BE2 | |
| قرمز تیره | #8B0000 | |
| DarkMagenta | #8B008B | |
| زین براون | #8B4513 | |
| DarkSea Green | #8FBC8F | |
| سبز روشن | #90EE90 | |
| بنفش متوسط | #9370D8 | |
| بنفش تیره | #9400D3 | |
| سبز کمرنگ | #98FB98 | |
| ارکیده تیره | #9932CC | |
| زرد سبز | #9ACD32 | |
| سینا | #A0522D | |
| رنگ قهوه ای | #A52A2A | |
| خاکستری تیره | #A9A9A9 | |
| آبی کمرنگ | #ADD8E6 | |
| زرد سبز | #ADFF2F | |
| رنگی فیروزه ای | #AFEEEE | |
| روشن استیل آبی | #B0C4DE | |
| آبی پودری | #B0E0E6 | |
| آجر نسوز | #B22222 | |
| میله طلایی تیره | #B8860B | |
| ارکیده متوسط | #BA55D3 | |
| رزی براون | #BC8F8F | |
| خاکی تیره | #BDB76B | |
| نقره | #C0C0C0 | |
| بنفش متوسط قرمز | #C71585 | |
| قرمز هندی | #CD5C5C | |
| پرو | #CD853F | |
| شکلات | #D2691E | |
| قهوهای مایل به زرد | #D2B48C | |
| خاکستری روشن | #D3D3D3 | |
| بنفش کم رنگ قرمز | #D87093 | |
| خار مریم | #D8BFD8 | |
| ارکیده | #DA70D6 | |
| میله طلایی | #DAA520 | |
| زرشکی | #DC143C | |
| گینزبورو | #DCDCDC | |
| آلو | #DDA0DD | |
| بوقلمون | #DEB887 | |
| فیروزه ای روشن | #E0FFFF | |
| اسطوخودوس | #E6E6FA | |
| سالمون تیره | #E9967A | |
| بنفش | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| لایت کورال | #F08080 | |
| خاکی | #F0E68C | |
| آلیس بلو | #F0F8FF | |
| عسلک | #F0FFF0 | |
| لاجوردی | #F0FFFF | |
| شنی براون | #F4A460 | |
| گندم | #F5DEB3 | |
| رنگ بژ | #F5F5DC | |
| دود سفید | #F5F5F5 | |
| کرم نعناعی | #F5FFFA | |
| شبح سفید | #F8F8FF | |
| ماهی سالمون | #FA8072 | |
| سفید عتیقه | #FAEBD7 | |
| کتانی | #FAF0E6 | |
| طلایی روشن راد زرد | #FAFAD2 | |
| توری قدیمی | #FDF5E6 | |
| قرمز | #FF0000 | |
| فوشیا | #FF00FF | |
| ارغوانی | #FF00FF | |
| صورتی پررنگ | #FF1493 | |
| قرمز نارنجی | #FF4500 | |
| گوجه فرنگی | #FF6347 | |
| هات پینک | #FF69B4 | |
| مرجان | #FF7F50 | |
| نارنجی تیره | #FF8C00 | |
| سالمون لایت | #FFA07A | |
| نارنجی | #FFA500 | |
| صورتی روشن | #FFB6C1 | |
| رنگ صورتی | #FFC0CB | |
| طلا | #FFD700 | |
| هلو پاف | #FFDAB9 | |
| ناواهو سفید | #FFDEAD | |
| مقرنس | #FFE4B5 | |
| سوپ غلیظ خامه ای | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| بادام بلانچ شده | #FFBCD | |
| شلاق پاپایا | #FFFD5 | |
| رژگونه اسطوخودوس | #FFF0F5 | |
| صدف دریایی | #FFF5EE | |
| ابریشم ذرت | #FFF8DC | |
| لیموشیفون | #FFFACD | |
| سفید گلدار | #FFFAF0 | |
| برف | #FFFAFA | |
| رنگ زرد | #FFFF00 | |
| زرد کمرنگ | #FFFFE0 | |
| عاج | #FFFFF0 | |
| سفید | #FFFFFF |
متاسفانه هنوز امکان نمایش حس چشایی در سایت وجود ندارد. اما این را می توان با کمک رنگ ها به طور کامل جبران کرد. از این گذشته، رنگ‌های 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 رنگ مطمئن در فراموشی فرو رفته است.
این داده ها به طور کامل توسط آمار پشتیبانی می شوند. با قضاوت بر اساس آن، در سال 2014 تنها 0.5 درصد از کاربران کامپیوترهایی دارند که تنها از 256 سایه پشتیبانی می کنند.
اصول هارمونی رنگ
همه ما از یک حس چشایی هماهنگ طبیعی برخوردار نیستیم. بنابراین، انتخاب رنگ مناسب می تواند یک چالش واقعی باشد. اما، ستایش علم، او حتی توانست هماهنگی رنگ را در قالب چندین طرح توصیف کند. همه آنها بر اساس استفاده از چرخه رنگ هستند. طرح های انتخاب هماهنگ رنگ ها در html.
برای صفحات htmlرنگ ها در درجه اول با هگزادسیمال نشان داده می شوند. برای این، دو نوع ضبط کد استفاده می شود - کامل یا مخفف. برای اینکه رنگ html را با یک رکورد کامل به درستی نشان دهید، باید شش کاراکتر (اعداد و/یا حروف انگلیسی) بعد از شبکه بنویسید، مثلاً مشکی به این صورت نوشته می شود: #000000. یک نماد اختصاری برای تعیین رنگ های html از یک شبکه و سه عدد و / یا حرف پشت آن تشکیل شده است. در عین حال، این نوع ذخیره تنها در صورتی قابل استفاده است که رکورد کامل این رنگ از همان کاراکترهای بعد از شبکه تشکیل شده باشد. به عنوان مثال، همان رنگ مشکی را می توان اینگونه نوشت: #000. شما می توانید رنگ های html را با کاراکترهای بزرگ و کوچک مشخص کنید، زیرا به حروف کوچک و بزرگ حساس نیستند.
هر کاراکتری که بعد از "#" نوشته می شود، با نسبت مشخصی از رنگ های قرمز، سبز و آبی مطابقت دارد. به نوبه خود ، همه مانیتورها از تعداد زیادی پیکسل (نقاط میکروسکوپی) تشکیل شده اند که هر کدام شامل 3 به اصطلاح "چراغ قوه" (منابع نور) هستند: قرمز ، سبز و آبی. سپس با تنظیم شدت نور ساطع شده توسط این «چراغ قوه»، مانیتور رنگ مورد نیاز ما را نمایش می دهد.
با ترکیب شدت نور قرمز، آبی و سبز (از 0 تا 256) مانیتورها می توانند 16000000 رنگ مختلف را نمایش دهند.
همچنین، رنگ ها برای سایت ها را می توان به صورت شفاهی یا با کد RGB مشخص کرد.
تا به امروز به صورت شفاهی می توانید 147 رنگ را تجویز کنید. مهم است بدانید که برخی از نام‌های مختلف می‌توانند به رنگ‌های مشابهی اشاره داشته باشند، به عنوان مثال خاکستری و خاکستری خاکستری هستند (#808080).
رنگ های ایمن برای وب سایت ها
هر مانیتور و مرورگری نمی تواند تمام 16 میلیون رنگ html را به درستی نمایش دهد.
به عنوان مثال، اگر با رنگی مواجه شد که مرورگر نمی تواند به درستی نمایش دهد، پس:
- مرورگر آن را با مرورگر جایگزین می کند که بیشتر شبیه به آن است و می تواند با موفقیت بازتولید شود.
- برای نمایش صحیح، مرورگر می تواند چندین رنگ را ترکیب کرده و نتیجه را بازتولید کند.
برای اطمینان از اینکه خروجی در هر مرورگر و در هر مانیتور رنگی است که در کد مشخص کرده اید، توصیه می شود از "Safe Colors" استفاده کنید. آنها نه با دست یا به میل شخصی، بلکه به صورت ریاضی تعیین شدند. چنین رنگ های 100٪ ایمن برای اسناد html 216 عدد وجود دارد. و اگرچه فناوری امروزی به حدی رسیده است که مانیتورها و مرورگرهای مدرن میلیون ها سایه را تشخیص می دهند، توصیه می کنیم از این رنگ های ایمن برای اطمینان از بازتولید رنگ استفاده کنید.
| سیستم رنگ هگزادسیمال | کدهای رنگ در RGB (قرمز، سبز، آبی). |
| کد html رنگی: #000000 | رنگ RGB: 0 0 0 |
| کد html رنگی: #333333 | رنگ RGB: 51 51 51 |
| کد html رنگی: #666666 | رنگ RGB: 102 102 102 |
| کد html رنگی: #999999 | رنگ RGB: 153 153 153 |
| کد html رنگی: #CCCCCC | رنگ RGB: 204 204 204 |
| کد html رنگی: #FFFFFF | رنگ RGB: 255 255 255 |
| کد html رنگی: #666600 | رنگ RGB: 102 102 0 |
| کد html رنگی: #999900 | رنگ RGB: 153 153 0 |
| کد html رنگی: #999933 | رنگ RGB: 153 153 51 |
| کد html رنگی: #999966 | رنگ RGB: 153 153 102 |
| کد html رنگی: #CCCC33 | رنگ RGB: 204 204 51 |
| کد html رنگی: #CCCC66 | رنگ RGB: 204 204 102 |
| کد html رنگی: #333300 | رنگ RGB: 51 51 0 |
| کد html رنگی: #666633 | رنگ RGB: 102 102 51 |
| کد html رنگی: #CCCC99 | رنگ RGB: 204 204 153 |
| کد html رنگی: #CCFF33 | رنگ RGB: 204 255 51 |
| کد html رنگی: #CCFF00 | رنگ RGB: 204 255 0 |
| کد html رنگی: #CCFF66 | رنگ RGB: 204 255 102 |
| کد html رنگی: #669900 | رنگ RGB: 102 153 0 |
| کد html رنگی: #99CC33 | رنگ RGB: 153 204 51 |
| کد html رنگی: #99CC00 | رنگ RGB: 153 204 0 |
| کد html رنگی: #99CC66 | رنگ RGB: 153 204 102 |
| کد html رنگی: #99FF33 | رنگ RGB: 153 255 51 |
| کد html رنگی: #99FF00 | رنگ RGB: 153 255 0 |
| کد html رنگی: #336600 | رنگ RGB: 51 102 0 |
| کد html رنگی: #669933 | رنگ RGB: 102 153 51 |
| کد html رنگی: #66CC33 | رنگ RGB: 102 204 51 |
| کد html رنگی: #66CC00 | رنگ RGB: 102 204 0 |
| کد html رنگی: #99FF66 | رنگ RGB: 153 255 102 |
| کد html رنگی: #CCFF99 | رنگ RGB: 204 255 153 |
| کد html رنگی: #009900 | رنگ RGB: 0 153 0 |
| کد html رنگی: #339900 | رنگ RGB: 51 153 0 |
| کد html رنگی: #33CC00 | رنگ RGB: 51 204 0 |
| کد html رنگی: #33FF00 | رنگ RGB: 51 255 0 |
| کد html رنگی: #66FF33 | رنگ RGB: 102 255 51 |
| کد html رنگی: #66FF00 | رنگ RGB: 102 255 0 |
| کد html رنگی: #00CC33 | رنگ RGB: 0 204 51 |
| کد html رنگی: #33CC33 | رنگ RGB: 51 204 51 |
| کد html رنگی: #00CC00 | رنگ RGB: 0 204 0 |
| کد html رنگی: #00FF00 | رنگ RGB: 0 255 0 |
| کد html رنگی: #00FF33 | رنگ RGB: 0 255 51 |
| کد html رنگی: #33FF33 | رنگ RGB: 51 255 51 |
| کد html رنگی: #003300 | رنگ RGB: 0 51 0 |
| کد html رنگی: #336633 | رنگ RGB: 51 102 51 |
| کد html رنگی: #669966 | رنگ RGB: 102 153 102 |
| کد html رنگی: #66CC66 | رنگ RGB: 102 204 102 |
| کد html رنگی: #99CC99 | رنگ RGB: 153 204 153 |
| کد html رنگی: #CCFFCC | رنگ RGB: 204 255 204 |
| کد html رنگی: #006600 | رنگ RGB: 0 102 0 |
| کد html رنگی: #339933 | رنگ RGB: 51 153 51 |
| کد html رنگی: #00FF66 | رنگ RGB: 0 255 102 |
| کد html رنگی: #33FF66 | رنگ RGB: 51 255 102 |
| کد html رنگی: #66FF66 | رنگ RGB: 102 255 102 |
| کد html رنگی: #99FF99 | رنگ RGB: 153 255 153 |
| کد html رنگی: #009933 | رنگ RGB: 0 153 51 |
| کد html رنگی: #00CC66 | رنگ RGB: 0 204 102 |
| کد html رنگی: #33CC66 | رنگ RGB: 51 204 102 |
| کد html رنگی: #00FF99 | رنگ RGB: 0 255 153 |
| کد html رنگی: #33FF99 | رنگ RGB: 51 255 153 |
| کد html رنگی: #66FF99 | رنگ RGB: 102 255 153 |
| کد html رنگی: #006633 | رنگ RGB: 0 102 51 |
| کد html رنگی: #009966 | رنگ RGB: 0 153 102 |
| کد html رنگی: #339966 | رنگ RGB: 51 153 102 |
| کد html رنگی: #00CC99 | رنگ RGB: 0 204 153 |
| کد html رنگی: #33CC99 | رنگ RGB: 51 204 153 |
| کد html رنگی: #66CC99 | رنگ RGB: 102 204 153 |
| کد html رنگی: #009999 | رنگ RGB: 0 153 153 |
| کد html رنگی: #33CCCC | رنگ RGB: 51 204 204 |
| کد html رنگی: #00FFCC | رنگ RGB: 0 255 204 |
| کد html رنگی: #33FFCC | رنگ RGB: 51 255 204 |
| کد html رنگی: #66FFCC | رنگ RGB: 102 255 204 |
| کد html رنگی: #99FFCC | رنگ RGB: 153 255 204 |
| کد html رنگی: #00CCCC | رنگ RGB: 0 204 204 |
| کد html رنگی: #00FFFF | رنگ RGB: 0 255 255 |
| کد html رنگی: #33FFFF | رنگ RGB: 51 255 255 |
| کد html رنگی: #66FFFF | رنگ RGB: 102 255 255 |
| کد html رنگی: #99FFFF | رنگ RGB: 153 255 255 |
| کد html رنگی: #CCFFFF | رنگ RGB: 204 255 255 |
| کد html رنگی: #336666 | رنگ RGB: 51 102 102 |
| کد html رنگی: #006666 | رنگ RGB: 0 102 102 |
| کد html رنگی: #669999 | رنگ RGB: 102 153 153 |
| کد html رنگی: #339999 | رنگ RGB: 51 153 153 |
| کد html رنگی: #66CCCC | رنگ RGB: 102 204 204 |
| کد html رنگی: #99CCCC | رنگ RGB: 153 204 204 |
| کد html رنگی: #003333 | رنگ RGB: 0 51 51 |
| کد html رنگی: #0099CC | رنگ RGB: 0 153 204 |
| کد html رنگی: #3399CC | رنگ RGB: 51 153 204 |
| کد html رنگی: #00CCFF | رنگ RGB: 0 204 255 |
| کد html رنگی: #33CCFF | رنگ RGB: 51 204 255 |
| کد html رنگی: #66CCFF | رنگ RGB: 102 204 255 |
| کد html رنگی: #006699 | رنگ RGB: 0 102 153 |
| کد html رنگی: #336699 | رنگ RGB: 51 102 153 |
| کد html رنگی: #6699CC | رنگ RGB: 102 153 204 |
| کد html رنگی: #0099FF | رنگ RGB: 0 153 255 |
| کد html رنگی: #3399FF | رنگ RGB: 51 153 255 |
| کد html رنگی: #99CCFF | رنگ RGB: 153 204 255 |
| کد html رنگی: #003366 | رنگ RGB: 0 51 102 |
| کد html رنگی: #003399 | رنگ RGB: 0 51 153 |
| کد html رنگی: #0033FF | رنگ RGB: 0 51 255 |
| کد html رنگی: #3366CC | رنگ RGB: 51 102 204 |
| کد html رنگی: #0066CC | رنگ RGB: 0 102 204 |
| کد html رنگی: #0066FF | رنگ RGB: 0 102 255 |
| کد html رنگی: #000033 | رنگ RGB: 0 0 51 |
| کد html رنگی: #0033CC | رنگ RGB: 0 51 204 |
| کد html رنگی: #0000CC | رنگ RGB: 0 0 204 |
| کد html رنگی: #0000FF | رنگ RGB: 0 0 255 |
| کد html رنگی: #3366FF | رنگ RGB: 51 102 255 |
| کد html رنگی: #6699FF | رنگ RGB: 102 153 255 |
| کد html رنگی: #000066 | رنگ RGB: 0 0 102 |
| کد html رنگی: #000099 | رنگ RGB: 0 0 153 |
| کد html رنگی: #3333CC | رنگ RGB: 51 51 204 |
| کد html رنگی: #3300CC | رنگ RGB: 51 0 204 |
| کد html رنگی: #3300FF | رنگ RGB: 51 0 255 |
| کد html رنگی: #3333FF | رنگ RGB: 51 51 255 |
| کد html رنگی: #333366 | رنگ RGB: 51 51 102 |
| کد html رنگی: #333399 | رنگ RGB: 51 51 153 |
| کد html رنگی: #666699 | رنگ RGB: 102 102 153 |
| کد html رنگی: #6666CC | رنگ RGB: 102 102 204 |
| کد html رنگی: #6666FF | رنگ RGB: 102 102 255 |
| کد html رنگی: #9999CC | رنگ RGB: 153 153 204 |
| کد html رنگی: #330066 | رنگ RGB: 51 0 102 |
| کد html رنگی: #330099 | رنگ RGB: 51 0 153 |
| کد html رنگی: #6600FF | رنگ RGB: 102 0 255 |
| کد html رنگی: #6633FF | رنگ RGB: 102 51 255 |
| کد html رنگی: #9999FF | رنگ RGB: 153 153 255 |
| کد html رنگی: #CCCCFF | رنگ RGB: 204 204 255 |
| کد html رنگی: #330033 | رنگ RGB: 51 0 51 |
| کد html رنگی: #663399 | رنگ RGB: 102 51 153 |
| کد html رنگی: #6633CC | رنگ RGB: 102 51 204 |
| کد html رنگی: #6600CC | رنگ RGB: 102 0 204 |
| کد html رنگی: #9966FF | رنگ RGB: 153 102 255 |
| کد html رنگی: #9966CC | رنگ RGB: 153 102 204 |
| کد html رنگی: #663366 | رنگ RGB: 102 51 102 |
| کد html رنگی: #660099 | رنگ RGB: 102 0 153 |
| کد html رنگی: #9900FF | رنگ RGB: 153 0 255 |
| کد html رنگی: #9933FF | رنگ RGB: 153 51 255 |
| کد html رنگی: #9933CC | رنگ RGB: 153 51 204 |
| کد html رنگی: #CC99FF | رنگ RGB: 204 153 255 |
| کد html رنگی: #660066 | رنگ RGB: 102 0 102 |
| کد html رنگی: #996699 | رنگ RGB: 153 102 153 |
| کد html رنگی: #9900CC | رنگ RGB: 153 0 204 |
| کد html رنگی: #CC00FF | رنگ RGB: 204 0 255 |
| کد html رنگی: #CC33FF | رنگ RGB: 204 51 255 |
| کد html رنگی: #CC66FF | رنگ RGB: 204 102 255 |
| کد html رنگی: #993399 | رنگ RGB: 153 51 153 |
| کد html رنگی: #990099 | رنگ RGB: 153 0 153 |
| کد html رنگی: #CC33CC | رنگ RGB: 204 51 204 |
| کد html رنگی: #CC00CC | رنگ RGB: 204 0 204 |
| کد html رنگی: #CC66CC | رنگ RGB: 204 102 204 |
| کد html رنگی: #CC99CC | رنگ RGB: 204 153 204 |
| کد html رنگی: #CC3399 | رنگ RGB: 204 51 153 |
| کد html رنگی: #FF00FF | رنگ RGB: 255 0 255 |
| کد html رنگی: #FF33FF | رنگ RGB: 255 51 255 |
| کد html رنگی: #FF66FF | رنگ RGB: 255 102 255 |
| کد html رنگی: #FF99FF | رنگ RGB: 255 153 255 |
| کد html رنگی: #FFCCFF | رنگ RGB: 255 204 255 |
| کد html رنگی: #990066 | رنگ RGB: 153 0 102 |
| کد html رنگی: #CC0099 | رنگ RGB: 204 0 153 |
| کد html رنگی: #CC6699 | رنگ RGB: 204 102 153 |
| کد html رنگی: #FF33CC | رنگ RGB: 255 51 204 |
| کد html رنگی: #FF00CC | رنگ RGB: 255 0 204 |
| کد html رنگی: #FF66CC | رنگ RGB: 255 102 204 |
| کد html رنگی: #660033 | رنگ RGB: 102 0 51 |
| کد html رنگی: #993366 | رنگ RGB: 153 51 102 |
| کد html رنگی: #CC0066 | رنگ RGB: 204 0 102 |
| کد html رنگی: #FF0099 | رنگ RGB: 255 0 153 |
| کد html رنگی: #FF3399 | رنگ RGB: 255 51 153 |
| کد html رنگی: #FF99CC | رنگ RGB: 255 153 204 |
| کد html رنگی: #663333 | رنگ RGB: 102 51 51 |
| کد html رنگی: #996666 | رنگ RGB: 153 102 102 |
| کد html رنگی: #CC3366 | رنگ RGB: 204 51 102 |
| کد html رنگی: #FF0066 | رنگ RGB: 255 0 102 |
| کد html رنگی: #FF3366 | رنگ RGB: 255 51 102 |
| کد html رنگی: #FF6699 | رنگ RGB: 255 102 153 |
| کد html رنگی: #330000 | رنگ RGB: 51 0 0 |
| کد html رنگی: #990033 | رنگ RGB: 153 0 51 |
| کد html رنگی: #993333 | رنگ RGB: 153 51 51 |
| کد html رنگی: #CC3333 | رنگ RGB: 204 51 51 |
| کد html رنگی: #CC6666 | رنگ RGB: 204 102 102 |
| کد html رنگی: #CC9999 | رنگ RGB: 204 153 153 |
| کد html رنگی: #CC0033 | رنگ RGB: 204 0 51 |
| کد html رنگی: #FF0033 | رنگ RGB: 255 0 51 |
| کد html رنگی: #FF3333 | رنگ RGB: 255 51 51 |
| کد html رنگی: #FF6666 | رنگ RGB: 255 102 102 |
| کد html رنگی: #FF9999 | رنگ RGB: 255 153 153 |
| کد html رنگی: #FFCCCC | رنگ RGB: 255 204 204 |
| کد html رنگی: #990000 | رنگ RGB: 153 0 0 |
| کد html رنگی:#CC0000 | رنگ RGB: 204 0 0 |
| کد html رنگی: #FF0000 | رنگ RGB: 255 0 0 |
| کد html رنگی: #FF3300 | رنگ RGB: 255 51 0 |
| کد html رنگی: #CC3300 | رنگ RGB: 204 51 0 |
| کد html رنگی: #FF6633 | رنگ RGB: 255 102 51 |
| کد html رنگی: #660000 | رنگ RGB: 102 0 0 |
| کد html رنگی: #993300 | رنگ RGB: 153 51 0 |
| کد html رنگی: #CC6633 | رنگ RGB: 204 102 51 |
| کد html رنگی: #FF6600 | رنگ RGB: 255 102 0 |
| کد html رنگی: #FF9966 | رنگ RGB: 255 153 102 |
| کد html رنگی: #FFCC99 | رنگ RGB: 255 204 153 |
| کد html رنگی: #663300 | رنگ RGB: 102 51 0 |
| کد html رنگی: #996633 | رنگ RGB: 153 102 51 |
| کد html رنگی: #CC6600 | رنگ RGB: 204 102 0 |
| کد html رنگی: #CC9966 | رنگ RGB: 204 153 102 |
| کد html رنگی: #FF9933 | رنگ RGB: 255 153 51 |
| کد html رنگی: #FF9900 | رنگ RGB: 255 153 0 |
| کد html رنگی: #996600 | رنگ RGB: 153 102 0 |
| کد html رنگی: #CC9933 | رنگ RGB: 204 153 51 |
| کد html رنگی: #CC9900 | رنگ RGB: 204 153 0 |
| کد html رنگی: #FFCC33 | رنگ RGB: 255 204 51 |
| کد html رنگی: #FFCC00 | رنگ RGB: 255 204 0 |
| کد html رنگی: #FFCC66 | رنگ RGB: 255 204 102 |
| کد html رنگی: #CCCC00 | رنگ RGB: 204 204 0 |
| کد html رنگی: #FFFF00 | رنگ RGB: 255 255 0 |
| کد html رنگی: #FFFF33 | رنگ RGB: 255 255 51 |
| کد html رنگی: #FFFF66 | رنگ RGB: 255 255 102 |
| کد html رنگی: #FFFF99 | رنگ RGB: 255 255 153 |
| کد html رنگی: #FFFFCC | رنگ RGB: 255 255 204 |
این جدول شامل 216 کد رنگ امن html می باشد. هر رنگ دارای مقدار RGB برای تعیین رنگ در آن است ویرایشگرهای گرافیکیو HEX برای تعیین رنگ در صفحات html.
