خانه » نصب فونداسیون » Html رنگ سبز روشن. رنگ در سبک ها را می توان به روش های مختلف مشخص کرد: با مقدار هگزادسیمال، با نام، در فرمت RGB، RGBA، HSL، HSLA

Html رنگ سبز روشن. رنگ در سبک ها را می توان به روش های مختلف مشخص کرد: با مقدار هگزادسیمال، با نام، در فرمت RGB، RGBA، HSL، HSLA

راه های مختلفی برای نمایش رنگ در طراحی وب وجود دارد.

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)
Mauvein (بنفش آنیلین)		#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 صورتی		#997ABD	(153,122,141)

جدول خاکستریرنگ ها و سایه های آن

نام	رنگ	هگز	(RGB)
خاکستری		#808080	(128,128,128)
خاکستری		#بی بی بی	(190,190,190)
(سایه خاکستری)		#858585	(133,133,133)
خاکستری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)

با دقت به نقاشی نگاه کنید. پس زمینه پنجره کشویی شفاف می شود. این یک تکنیک طراحی نسبتا رایج است. بیایید به این فکر کنیم که چگونه می توان این را اجرا کرد.

وظیفه

رنگ مرورگر متقاطع را شفاف کنید.

راه حل

اولین فکر در این شرایط استفاده از یک تصویر png24 با شفافیت از پیش تعیین شده برای پس زمینه است. اما این تصویر کاملا غیر ضروری است. شما می توانید بدون آن به خوبی انجام دهید (و بنابراین بدون درخواست اضافی به سرور). بیایید همچنان سعی کنیم راه حل بهینه را پیدا کنیم.

فکر دوم استفاده از . اما در این مورد خیلی راحت نیست. از این گذشته ، نه تنها پس زمینه ، بلکه کتیبه ها نیز شفاف می شوند. بله، در واقع، کل پنجره به یکباره.

البته، می توانید سعی کنید یک ظرف اضافی اضافه کنید و فقط به آن opacity اعمال کنید، اما این عنصر HTML فقط برای تزئین در نظر گرفته شده است و بدیهی است که اضافی خواهد بود. آیا بدون آن امکان پذیر است؟

البته که می توانی! اگر از RGBA استفاده می کنید.

فرمت توضیحات رنگ RGBA

CSS3 به شما امکان می دهد رنگ را با استفاده از توابع RGB و RGBA مشخص کنید. در این مورد، باید نسبت هر جزء رنگی را که یک بایت به آن اختصاص داده شده است (از 0 تا 255، در صورتی که کسی نداند) مشخص کنیم.

نحو برای این مورد بسیار ساده است:

پس زمینه: rgb(0, 255, 0); /* تمیز رنگ سبز */

برای RGBA، پارامتر چهارم اضافه می شود - شفافیت آلفا (از 0 تا 1).

زمینه: rgba(255, 0, 0, 0.5); /* قرمز خالص با شفافیت 50 درصد */

راه حل مشکل ما اینجاست. فقط رنگ پس زمینه را با استفاده از rgba تنظیم کنید و همه چیز همانطور که می خواهیم به نظر می رسد. بدون تصاویر و عناصر غیر ضروری!

این اعداد را از کجا می توانم تهیه کنم؟

می توانید با استفاده از ابزار قطره چکان فتوشاپ به اجزای رنگ نگاه کنید.

درباره سازگاری بین مرورگرها

از آنجایی که عملکرد RGB بسیار قدیمی تر از RGBA است و از زمان استاندارد CSS2 وجود داشته است، برای محافظت در برابر قدیمی ترین مرورگرها، می توانید از ساختار تکراری زیر استفاده کنید:

SomeBlock ( پس‌زمینه: rgb(255، 0، 0؛ پس‌زمینه: rgba (255، 0، 0، 0.5)؛ )

با این رویکرد، پدربزرگ های مرورگرهای مدرن شفافیت ندارند، اما خود رنگ درست باقی می ماند.

شما باید به طور جداگانه از IE مراقبت کنید. خرها RGBA را تا نسخه 8 شامل نمی‌دانند.

مثل همیشه: زمین برای دهقانان، کارخانه ها برای کارگران، و الاغ ها یک عصا! مانند .

البته در شرایط جنگی این قانون را در یک CSS جداگانه قرار می دهیم که آن را متصل می کنیم.

SomeBlock ( پس زمینه: شفاف؛ فیلتر:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000؛ زوم: 1;)

ترفند این است که رنگ های شروع و پایان را یکسان (ff0000 - قرمز) مشخص کنید و از این واقعیت استفاده کنید که می توانید کانال آلفا را برای گرادیان در این فیلتر تنظیم کنید (در مثال، مقدار 80 است).

برای مرجع: فیلتر از سیستم هگزا دسیمال استفاده می کند و کد یک رنگ کاملاً مات FF است (در اعشار این 255 است). بر این اساس، هگزادسیمال 80 اعشاری 128 است، یعنی 50 درصد شفافیت.

تست شده در:

IE 6-9
فایرفاکس 3+
Opera 10+
سافاری 4
کروم

ماژول رنگی 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

کاراکترهای فاصله در اطراف مقادیر عددی مجاز هستند.

رنگ را می توان در CSS تنظیم کرد راه های مختلف:

بر اساس اسم،
با مقدار هگزادسیمال،
در فرمت های RGB و RGBA
در فرمت های HSL و HSLA.

رنگ را با نام تنظیم کنید

مرورگرها از تعیین برخی رنگ ها برای عناصر با نام پشتیبانی می کنند. در این جدول چند کلمه کلیدی ( اسامی انگلیسیرنگ ها) برای تعیین ویژگی های رنگ، کد RGB، کد هگزا دسیمال (HEX) و کد HSL استفاده می شود.

جدول 1. نام رنگ ها، کد RGB، HEX و HSL آنها.

نام	RGB	HEX	HSL	شرح
سفید	rgb(255، 255، 255)	#ffffff یا #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 در CSS

فیروزه متوسط

رنگ قهوه ای

زرشکی

بنفش آبی

رولودراب

در اینجا نحوه کار این کد آمده است:

تنظیم رنگ با استفاده از RGB

RGB یک مدل رنگ افزودنی است. به انگلیسی علاوه بر این- اضافه RGB مخفف است کلمات انگلیسی: قرمز، سبز، آبی - قرمز، سبز، آبی). از اینجا مشخص می شود که در مدل RGB، رنگ ها با افزودن سه رنگ (قرمز، سبز، آبی) در مقادیر مختلف سنتز می شوند.

با ترکیب رنگ های قرمز، سبز و آبی می توانید چندین میلیون سایه به دست آورید. تمام ترکیبات ممکن در حافظه کامپیوتر ذخیره می شوند.

برو سر اصل مطلب.

برای تنظیم خصوصیات در این قالب، از علامت rgb(r، g، b) استفاده کنید، که r، g، b سه کانال برای هر رنگ (قرمز، سبز، آبی) هستند. مقادیر برای هر کانال در محدوده 0 تا 255 تنظیم شده است.

کد نمونه

برای روشن شدن همه چیز، در اینجا یک مثال کد وجود دارد:

RGB در CSS

rgb(255، 0، 0)

rgb(0، 255، 0)

rgb(0، 0، 255)

این مثال چگونه باید کار کند:

عکس. 1. رنگ ها در RGB

برای مثال توضیحات

در ابتدای صفحه کلاس div.rgb را ایجاد می کنیم، برای بلوک های ایجاد شده توسط تگ مورد نیاز است

در اندازه مورد نیاز نمایش داده شد: 240 پیکسل در 40 پیکسل. ما به ویژگی line-height مقدار 40px اختصاص می دهیم، یعنی برابر با ارتفاع بلوک، این به شما امکان می دهد متن را در بلوک نمایش دهید.

در مرکز عمودی متن را با استفاده از قانون ( متن تراز: مرکز ;).

بعد، در کد رنگ پس زمینه بلوک را تعیین می کنیم

با استفاده از ویژگی style، با استفاده از ویژگی پس زمینه، و اختصاص مقادیر به rgb(255, 0, 0), rgb(0, 255, 0) و rgb(0, 0, 255). یعنی ما به طور متناوب یک کانال را تا حد امکان اشباع می کنیم و کانال های باقی مانده برای سنتز استفاده نمی شوند، زیرا مقدار آنها صفر است.

سعی کنید این مثال را ویرایش کنید و مقادیر خود را مشخص کنید، برای مثال rgb(100، 100، 100).

تنظیم رنگ با استفاده از RGBA

CSS3 ابزار جدیدی برای کار با رنگ دارد - فرمت RGBA. می توان آن را تکامل مدل RGB نامید، اما با افزودن یک کانال جدید - کانال A یا آلفا. این کانال شفافیت رنگ را تنظیم می کند. مقادیر آن در محدوده 0 تا 1 تنظیم می شود. مقدار 0 مربوط به شفافیت کامل، 1 - شفافیت کامل (رنگ همان رنگی است که در سه کانال RGB اول مشخص شده است) و مقادیر میانی. مانند 0.4 یا 0.6 - شفافیت به درجات مختلف.

کد نمونه

RGBA در CSS3

در اینجا نحوه عملکرد آن آمده است:

این کد از نظر ظاهری شبیه به کد زیر است که از مدل RGB برای تعیین مقدار رنگ استفاده می کند:

RGBA در CSS3

نتیجه او این است:

یک مقدار کانال آلفا برابر با صفر، هر رنگی را نامرئی می کند - مقداری برابر با یک، رنگ را در کد 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 است.

کد HEX در CSS

#FF0000

#00FF00

#0000FF

این کد عناصر زیر را نمایش می دهد:

و در اینجا یک تصویر با نتیجه بخش "تنظیم رنگ ها با استفاده از RGB" در این صفحه بالا آمده است.

عکس. 1. رنگ ها در RGB

می بینیم که رنگ ها یکسان هستند.

یک نماد کوتاه از کد رنگ HEX مجاز است: یک عدد 6 رقمی را می توان به عنوان یک عدد 3 رقمی نوشت. این فقط زمانی معتبر است که دو رقم در مقدار رنگ یک کانال تکرار شود.

یعنی مخفف زیر قابل قبول است:

به عنوان مثال، رنگ #ff22aa را می توان به صورت #f2a یا رنگ #44aa22 را می توان به صورت #4a2 نوشت.

تنظیم رنگ با استفاده از HSL

CSS3 فرمت جدیدی برای تعیین رنگ دارد.

فرمت HSL مخفف کلمات انگلیسی Hue (hue)، Saturate (اشباع) و Lightness (سبک بودن) است.

Hue در HSL مقدار یک رنگ در یک چرخ رنگ خاص است (شکل 2) و بر حسب درجه مشخص می شود. اگر قیاس هایی با مدل RGB ترسیم کنیم، 0 درجه مربوط به قرمز، 120 درجه مربوط به سبز و 240 درجه مربوط به آبی است.

مقدار رنگ در محدوده 0 تا 359 تغییر می کند.

شکل 2. چرخ رنگ HSL.

مقدار دوم - اشباع (Saturate) به صورت درصد تنظیم می شود. در 100% اشباع، رنگ تا حد امکان "آبدار" است، زیرا نشانگر اشباع به سمت 0% حرکت می کند، رنگ کدرتر می شود و به رنگ خاکستری محو می شود.

مقدار سوم، 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 کار می کنند. چگونه می توانم استایل ها را روی مرورگرهای قدیمی کار کنم؟

Somebloсk (رنگ پس زمینه: rgb(255,50,50)؛ رنگ پس زمینه: rgba(255,50,50,0.85)

هنگام استفاده از این کد در مرورگرهای قدیمی، رنگ پس زمینه کلاس .somebloсk، اگرچه از کانال آلفا استفاده نمی کند، در قالب RGB نمایش داده می شود.

برای صفحات htmlرنگ ها عمدتاً به صورت هگزادسیمال مشخص می شوند. برای انجام این کار، از دو نوع ضبط کد استفاده می شود - کامل یا مخفف. برای نشان دادن صحیح رنگ html به طور کامل، باید شش کاراکتر (اعداد و/یا) وارد کنید حروف انگلیسی) بعد از هش مثلاً مشکی به این صورت نوشته می شود: #000000. خلاصه برای تعیین رنگ های html از یک هش و سه عدد و/یا حرف پشت آن تشکیل شده است. با این حال، این نوع سهام تنها در صورتی قابل استفاده است که رکورد کامل یک رنگ مشخص از نمادهای یکسان بعد از علامت هش تشکیل شده باشد. به عنوان مثال، همان رنگ مشکی را می توان اینگونه نوشت: #000. شما می توانید رنگ های html را با استفاده از کاراکترهای بزرگ و کوچک مشخص کنید، زیرا به حروف بزرگ و کوچک حساس نیستند.

هر کاراکتری که بعد از "#" نوشته می شود، با نسبت مشخصی از قرمز، سبز و رنگ های آبی. به نوبه خود ، همه مانیتورها از تعداد زیادی پیکسل (نقاط میکروسکوپی) تشکیل شده اند که هر کدام شامل 3 به اصطلاح "چراغ قوه" (منابع نور) هستند: قرمز ، سبز و آبی. سپس، با تنظیم شدت نور ساطع شده توسط این "چراغ قوه"، مانیتور رنگ مورد نیاز ما را نمایش می دهد.

با ترکیب شدت انتشار نور قرمز، آبی و سبز (از 0 تا 256)، مانیتورها می توانند 16000000 سایه مختلف را نمایش دهند.

همچنین، رنگ ها برای وب سایت ها را می توان به صورت شفاهی یا با کد RGB نشان داد.

امروزه 147 رنگ را می توان به صورت شفاهی نوشت. مهم است بدانید که برخی از نام‌های مختلف می‌توانند به معنای رنگ‌های یکسان باشند، به عنوان مثال خاکستری و خاکستری رنگ خاکستری هستند (#808080).

رنگ های ایمن برای وب سایت ها

هر مانیتور و مرورگری نمی تواند همه 16 میلیون رنگ html را به درستی نمایش دهد.

به عنوان مثال، اگر با رنگی مواجه شدید که مرورگر نمی تواند به درستی نمایش دهد، سپس:

مرورگر آن را با مرورگر جایگزین می کند که بیشتر شبیه به آن است و می تواند با موفقیت بازتولید شود.
برای نمایش صحیح، مرورگر می تواند چندین رنگ را ترکیب کرده و نتیجه را بازتولید کند.

برای اطمینان از اینکه خروجی در هر مرورگر و هر مانیتور رنگی است که در کد مشخص کرده اید، توصیه می شود از "Safe Colors" استفاده کنید. آنها نه به صورت دستی یا به میل شخص دیگری، بلکه به صورت ریاضی تعیین شدند. 216 رنگ 100٪ ایمن برای اسناد HTML وجود دارد و اگرچه فناوری های امروزی به نقطه ای رسیده اند که مانیتورها و مرورگرهای مدرن میلیون ها رنگ را تشخیص می دهند، توصیه می کنیم از این رنگ های ایمن برای تضمین رندر رنگ استفاده کنید.

نمودار رنگ ایمن HTML

سیستم رنگ هگزادسیمال	کدهای رنگ در 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 است.