کدهای html رنگی رنگ ها در "MTA": آنچه شما باید بدانید؟ کدهای رنگ

CSS قابل درک نیست). بنابراین، مدیر وب سایت آینده فقط نیاز به مطالعه دارد ابزارهای HTML که به شما امکان تغییر رنگ را می دهد،به عنوان مثال، به منظور ایجاد خبرنامه های ایمیل روشن و رنگارنگ که توجه مخاطبان سایت را به خود جلب کند.

این ورودی کاملاً حجیم است ، اما از آن با تمام ویژگی های فنی کار با رنگ با استفاده از HTML آشنا خواهید شد. ما ضبط را با این سوال شروع می کنیم: چرا باید عناصر خاصی از صفحه HTML را با رنگ برجسته کنیم. سپس در مورد مدل RGB صحبت خواهیم کرد، که به شما امکان می دهد با استفاده از کدهای خاص رنگ ها را در HTML مشخص کنید (به طور گذرا به کدهای رنگ اعشاری و مقادیر رنگ HTML هگزا دسیمال نگاه خواهیم کرد). همچنین از این پست در مورد پالت رنگ ها یاد خواهید گرفت و همچنین متوجه خواهید شد که چرا پالت در HTML وجود ندارد. و پایان این نشریه خواهد بود نمونه هایی از تغییر رنگ پس زمینه، متن و پیوند.

استفاده از رنگ ها در HTML

صفحات سایت بدون تصاویر خسته کننده و غیر جالب خواهند بود که قبلاً و با جزئیات زیاد در مورد آنها صحبت کردیم. اما تصاویر یک نقطه ضعف قابل توجه دارند: هر تصویر یک تصویر اضافی است و بر این اساس، یک بار اضافی بر روی هاست است.

توجه داشته باشم که برای طراحی وبلاگ وردپرس خود از یک تصویر استفاده نکردم، طرح کاملاً با رنگ تزئین شده است. فقط همین در مورد رنگ ها در HTML، امروز با شما صحبت خواهیم کرد. رنگ‌ها در HTML برای اهداف مختلفی استفاده می‌شوند، به عنوان مثال، ما می‌توانیم طرح‌بندی وب‌سایت را با برجسته کردن یکی یا دیگری در یک رنگ یا دیگری طراحی کنیم.

با کمک رنگ، می توانیم توجه بازدیدکنندگان خود را بر روی یک متن یا بلوک سایت خاص متمرکز کنیم. توجه داشته باشید که با استفاده از رنگ نیز مشخص می شود به گونه ای که کاربر بتواند بفهمد: روی کدام لینک قبلا کلیک کرده است، کدام یک را هنوز بازدید نکرده است و در حال حاضر در کدام صفحه HTML است.

مراقب باش استفاده از رنگ ها برای استایل دادن به اسناد HTML، همه رنگ ها با یکدیگر خوب نیستند و هر رنگی برای بازدیدکنندگان سایت شما خوشایند نخواهد بود. اما بهتر است از طراحان وب در مورد این ظرافت ها بپرسید، این مقاله به شما کمک می کند تا با ویژگی های فنی مقابله کنید که به شما امکان می دهد رنگ عناصر صفحه HTML را کنترل کنید.

اما فراموش نکنید که طراحی باید از محتوا جدا باشد، پس بهتر است از CSS برای دستکاری رنگ در صفحات HTML استفاده کنید، اما در پست دیگری در این مورد صحبت خواهیم کرد. حالا خواهیم دید چه ابزارهایی در HTML برای کنترل رنگ در صفحات سایت وجود دارد.

در صنعت IT مدل های رنگی زیادی برای دستکاری رنگ وجود دارد. پرکاربردترین مدل نمایش رنگ، مدل RGB است. ما در اینجا در مورد برخی از ویژگی های این مدل صحبت خواهیم کرد و برای آشنایی بیشتر با RGB یک انتشار جداگانه ارائه خواهد شد. در زیر لیستی از مدل های رنگی مورد استفاده در فناوری اطلاعات (نه فقط HTML و CSS) را مشاهده خواهید کرد:

1. مدل RGB این مدل بسیار گسترده شده است و شاید یکی از راحت ترین و رایج ترین راه ها برای دستکاری رنگ عناصر HTML باشد.
2. مدل RGB این مدل بسیار شبیه به مدل RGB است، اما شامل یک کانال آلفا برای رنگ است. ویژگی مدل RGBA این است که به شما امکان تنظیم می دهد نه تنها رنگ عنصر HTML، بلکه شفافیت آن نیز وجود داردبه دلیل وجود کانال آلفا مدل RGBA در CSS3 اضافه شده است و توسط مرورگرهای قدیمی پشتیبانی نمی شود.
3. مدل HSL ویژگی مدل HSL این است که رنگ را با استفاده از پارامترهای آن تنظیم می کنیم: رنگ، پومپوزیت و روشنایی. درک این مدل تا حدودی دشوارتر از مدل RGB است.
4. مدل HSLA این مدل بسیار شبیه به مدل HSL است، اما مانند مدل RGBA به شما امکان می دهد با کانال آلفای رنگ کار کنید، بنابراین با استفاده از HSLA می توانیم نه تنها رنگ عنصر HTML را در صفحه تنظیم کنیم، بلکه شفافیت آن
5. مدل HSV (HSB). این مدل را نباید با مدل HSL اشتباه گرفت. توجه داشته باشید که چهار مدل اول را می توان در HTML یا CSS برای استایل دادن به صفحات وب استفاده کرد، اما مدل HSV نمی تواند. مدل HSV توسط یکی از بنیانگذاران استودیو پیکسار در سال 1978 ساخته شد و بسیار شبیه به HSL است.
6. مدل CMY یا CMYK. این مدل در تمامی پرینترهای رنگی برای چاپ استفاده می شود. مدل CMYK بر اساس این قاعده است که چاپ روی کاغذهای سفید انجام می شود. هر رنگی در مدل CMYK با مخلوط کردن فیروزه ای (فیروزه ای کم رنگ، فیروزه ای)، سرخابی (سرخابی) و زرد به دست می آید. هر رنگ در مدل CMY دارای یک مشخصه کدورت (مقدار جوهر) است که به صورت درصد اندازه گیری می شود. اما علاوه بر سه رنگ ذکر شده، مدل CMYK از رنگ مشکی نیز استفاده می کند.

همه مدل های رنگی بالا وابسته به دستگاه هستند، یعنی اگر شما رنگ یک عنصر HTML را با استفاده از مدل RGB یا HSL تنظیم کنید، بنابراین نمی توان دقیقاً گفت که یک بازدید کننده از سایت شما چه نوع سایه رنگی را می بیند ، زیرا مانیتورهای همه کاربران متفاوت است و رنگ ها را به روش های مختلفی منتقل می کنند. همچنین توجه داشته باشید که تمامی مدل های فوق بر اساس مدل RGB هستند و هر رنگی که در هر یک از مدل ها مشخص شده است (به جز HSLA و RGBA به دلیل وجود کانال آلفا) قابل تبدیل به RGB می باشد.

اگر در مورد مدل های رنگی مستقل از دستگاه صحبت می کنیم، شایان ذکر است که مدل LAB. بنابراین، کمی از کار با رنگ در HTML منحرف شدیم و با چند مدل رنگ آشنا شدیم. توجه داشته باشید که مرورگرها فقط چهار مدل اول را "درک" می کنند: HSL، RGB، HSLA و RGBA. بنابراین تنها با کمک این مدل ها می توانیم رنگ عناصر HTML را کنترل کنیم.

چگونه رنگ یک عنصر HTML تشکیل می شود: برخی از ویژگی های مدل RGB

بیایید آن را بفهمیم چگونه رنگ یک عنصر HTML تشکیل می شودو با برخی از ویژگی های مدل RGB. توجه داشته باشید که در مورد مدل RGB و همچنین مدل های دیگری که برای طراحی صفحات وب استفاده می شوند کمی بعد در ورودی های جداگانه صحبت خواهیم کرد.

بنابراین، مدل RGB مخفف قرمز، سبز، آبی است. مدل RGB بر اساس اصل افزودنی است. این اصل به این صورت است که برای به دست آوردن هر رنگی، رنگ را به مشکی اضافه می کنند. برای درک بهتر، تصور کنید که صفحه نمایش شما یک دیوار سیاه است و سه نورافکن دارید: اولی قرمز، دومی سبز و سومی آبی است. شما می توانید روشنایی هر نورافکن را با استفاده از یک خط کش با اعداد از 0 تا 255 تنظیم کنید. بر این اساس، اگر نورافکن را روی صفر قرار دهید، خاموش می شود و نمی درخشد، اگر مقدار آن 255 باشد، نورافکن روشن ترین رنگ را می دهد.

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

اصل توضیح داده شده در بالا زیربنای مدل RGB است و برای دستکاری رنگ ها در عناصر HTML در یک صفحه در یک مرورگر استفاده می شود.

ویژگی های HTML برای تغییر رنگ عناصر: رنگ پس زمینه عنصر و رنگ متن داخل عنصر

برای منحصر به فرد کردن عناصر صفحه استفاده می شود. با ویژگی های HTML، می توانیم رنگ عناصر را دستکاری کنیم:

1. ویژگی رنگ HTML این ویژگی به شما امکان می دهد رنگ متن را در یک عنصر HTML تغییر دهید. این ویژگی می تواند مقادیری را در قالب نام رنگ های HTML و کدهای مدل RGB در نمادهای هگزادسیمال و اعشاری دریافت کند. ویژگی color یک ویژگی منحصر به فرد HTML است که به شما امکان می دهد رنگ متن را در عناصر HTML خاصی تغییر دهید.
2. ویژگی متن HTML. این ویژگی یک ویژگی منحصر به فرد تگ است. . برچسب بزنید به همراه برچسب ها و فرم . اگر به خاطر دارید، پس داخل ظرف عناصری قرار می گیرند که سپس توسط مرورگر در ویوپورت نمایش داده می شوند. ویژگی text به شما امکان می دهد تنظیم کنید رنگ متن پیش فرض برای تمام صفحات html.
3. ویژگی HTML bgcolor. همچنین یک ویژگی منحصر به فرد HTML است و به شما امکان می دهد رنگ پس زمینه برخی از عناصر HTML را تغییر دهید.
4. ویژگی vlink HTML. این ویژگی منحصر به فرد است و فقط برای برچسب اعمال می شود. برای تغییر رنگ پیوندی که کاربر قبلاً از آن بازدید کرده است.
5. ویژگی پیوند HTML. این ویژگی نیز منحصر به فرد است و فقط برای تگ اعمال می شود. . ویژگی alink رنگ پیوند HTML فعال را تغییر می دهد.
6. ویژگی پیوند HTML. ویژگی پیوند فقط با یک برچسب استفاده می شود و برای تغییر رنگ پیوندهای صفحه HTML که کاربر هنوز از آن بازدید نکرده است استفاده می کند.

لطفاً توجه داشته باشید که استفاده از ویژگی ها برای تغییر رنگ عناصر HTML توصیه نمی شود، زیرا شیوه نامه های آبشاری وجود دارد که به شما امکان می دهد طراحی یک صفحه وب را از محتوای آن جدا کنید.

استفاده از کدهای رنگ اعشاری در HTML

بنابراین، ما در مورد اینکه چگونه می توانید روشنایی رنگ نورافکن را با استفاده از یک خط کش مخصوص تنظیم کنید، که روی آن ارقام شماره گذاری شده از 0 تا 255 وجود دارد، صحبت کردیم. حال بیایید ببینیم که چگونه این به ما کمک می کند تا رنگ عناصر HTML را تغییر دهیم. موضوع این است که می توانیم رنگ متن را در یک عنصر HTML یا رنگ پس زمینه در HTML را با استفاده از یک کد اعشاری به صورت زیر تغییر دهیم:

اگر یک سند HTML ایجاد کنید که محفظه بدنه را مانند مثال توصیف کند، خواهید دید:

1. رنگ پس‌زمینه سند HTML اکنون سبز است: bgcolor=”rgb (0,255,0)”.
2. رنگ متن صفحه HTML آبی می شود: text=”rgb (0,0,255)”.
3. رنگ HTML پیوندی که کاربر از آن بازدید نکرده است سفید خواهد بود: link=”rgb (255,255,255)”.
4. رنگ پیوندی که در حال حاضر باز است مشکی خواهد بود: alink=”rgb (0,0,0)”.
5. و رنگ پیوند HTML که قبلاً بازدید شده است قرمز خواهد بود: vlink=”rgb (255,0,0)”.

لطفاً توجه داشته باشید: هیچ کس شما را منع نمی کند که "قدرت کانون" را به صلاحدید خود تنظیم کنید، می توانید تنظیم رنگ htmlبرای مثال به این صورت:

و رنگ سورپرایز کودکانه را بگیرید. این ویژگی، انعطاف پذیری و راحتی مدل RGB است. مانیتور شما یک دیوار سیاه است که نورهای نورافکن روی آن می درخشند و می توانید قدرت آن نورافکن ها را تنظیم کنید و انواع رنگ های پس زمینه، متن و پیوند را با استفاده از ویژگی های HTML در نماد اعشاری ایجاد کنید، یا می توانید بگویید: با استفاده از کدهای رنگ اعشاری.

در حقیقت گفتن کدهای رنگ اعشاری در html اشتباه است، درست تر است که بگوییم کدهای رنگ اعشاری RGBاز آنجایی که این مدل نه تنها برای طراحی صفحات وب در HTML و CSS استفاده می شود.

مقادیر هگزادسیمال رنگ های HTML

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

برای کسانی که با سیستم اعداد هگزادسیمال آشنایی ندارند توضیح مختصری داده شود تا به راحتی بتوانید رنگ عناصر HTML را با استفاده از کدهای مدل هگز RGB دستکاری کنید. اولاً، سیستم اعداد اعشاری به این دلیل نامیده می شود که هر عددی را می توان با ترکیب ده رقم به دست آورد (اصطلاحات مهم است: بین یک عدد و یک رقم تفاوت وجود دارد): 0، 1، 2، 3، 5، 6، 7، 8، 9.

در سیستم اعداد هگزادسیمال، هر عددی را می توان با ترکیبی از شانزده رقم نوشت: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، a، b، c، d، e، f. برای سهولت درک، می توانید در نظر بگیرید که a ده و f پانزده است. به عنوان مثال، عدد شانزده به صورت هگزادسیمال به صورت زیر نوشته می شود: 10. و عدد 255 به صورت ff نوشته می شود.

حالا بیایید ببینیم چگونه می توانیم رنگ عناصر HTML را با استفاده از مقادیر هگزادسیمال تنظیم کنید، مثال قبلی خود را تکرار می کنیم و کدهای رنگ اعشاری را با همتایان هگزادسیمال خود جایگزین می کنیم:

توجه داشته باشید: نوشتن رنگ در HTML در قالب هگزادسیمال تا حدودی فشرده تر استنسبت به اعشار اولین است. دوم: قدرت هر نورافکن با اعداد از 0 تا 255 مشخص می شود. برای نوشتن عدد 255، دو رقم با فرمت هگزا دسیمال (ff = 250) لازم است، بنابراین روشنایی هر کانال رنگی (نورهای ما به درستی کانال رنگ را صدا می کنند). ، کانال رنگ) با دو رقم از 0 تا f مشخص می شود.

لطفا توجه داشته باشید: روشنایی هر کانال رنگی جداگانه تنظیم می شود، اما اگر تصور کنیم که این یک عدد است، حداکثر عدد ممکن در سیستم هگزادسیمال مدل RGB ffffff است، به ما رنگ سفید می دهد و در سیستم اعشاری این است: 16 777 215. چنین تعداد رنگ و سایه به شما امکان تنظیم / استفاده از مدل RGB را می دهد. این عدد از این واقعیت ناشی می شود که هر کانال رنگی دارای 256 مقدار روشنایی (از 0 تا 255) است: به ترتیب: 256*256*256 = 16777215.

مقادیر هگزادسیمال رنگ HTML فشرده تر و توصیفی تر هستند، اکثر طراحان وب و طراحان صفحه آرایی از مقادیر هگزادسیمال برای دستکاری رنگ در HTML استفاده می کنند، بنابراین توصیه می کنیم به شکل اعشاری نماد رنگ عادت نکنید، بلکه بلافاصله از هگزادسیمال استفاده کنید.

واضح است که در ابتدا برای یک طراح تازه کار یا طراح صفحه‌آر پیمایش در شکل هگزا دسیمال نماد رنگی دشوار خواهد بود، بنابراین، تقریباً هر ویرایشگر گرافیکی دارای یک پالت به اصطلاح رنگ است که به شما امکان می‌دهد رنگ مورد نظر را انتخاب کنید و دریافت کنید. کد آن برای مدل های رنگی مختلف در سیستم های اعداد مختلف.

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

نام رنگ ها در HTML

ویژگی های HTML می توانند به عنوان یک مقدار در نظر گرفته شوند نه تنها کدهای اعشاری و مقادیر هگز، بلکه نام رنگ های خاص را نیز شامل می شود. تغییر رنگ یک عنصر HTML با استفاده از نام آن ایده خوبی نیست. اولاً، کد مدل RGB در پشت نام رنگ در HTML پنهان است و ثانیاً، هر مرورگر رنگ عنصر HTML مشخص شده را با استفاده از نام متفاوت نشان می دهد، این فقط به تمایل توسعه دهندگان مرورگر بستگی دارد.

از همین رو استفاده از نام رنگ در HTML منسوخ شده است. مدل RGB وابسته به سخت افزار است و رنگ مشخص شده با استفاده از نام به مرورگر و حتی نسخه آن بستگی دارد. بیایید سعی کنیم عناصر یک صفحه HTML را با استفاده از یک نام رنگ آمیزی کنیم:

همانطور که می توانید تصور کنید، رنگ ها و سایه های زیادی وجود دارد. در اینجا شایان ذکر است که ویژگی های HTML به شما امکان تنظیم گرادیان را نمی دهند، این در CSS امکان پذیر است، اما در پست دیگری در این مورد صحبت خواهیم کرد. و نام های زیادی برای رنگ ها در HTML وجود دارد. می توانید جدولی با نام رنگ ها در HTML و کدهای RGB آنها در وب سایت من پیدا کنید.

جدول بالا نشان می دهد اگر یک عنصر HTML نامی به آن بدهید چه رنگی می گیرد. این جدول 16 رنگ و نام آنها را جمع آوری می کند که توسط W3C تایید شده است و باید در هر مرورگری یکسان نمایش داده شود. اما در واقع، در HTML، می توانید از حدود 200 نام رنگ استفاده کنید که توسط مرورگرهای اصلی پشتیبانی می شوند، مانند: Opera، Chrome، Firefox، Safari، Internet Explorer (این عبارت در مورد دومی بسیار بحث برانگیز است).

پالت رنگ در HTML

در حقیقت هیچ انتخابگر رنگی در html وجود ندارد. بیایید تعریف کلمه پالت را به خاطر بسپاریم. پالت یک تخته کوچک نازک مستطیلی یا بیضی است که هنرمند روی آن رنگ ها را مخلوط کرده و انواع رنگ ها را به دست می آورد. گاهی اوقات یک سوراخ انگشت شست در پالت ایجاد می شود تا در دست گرفتن راحت باشد. تصویری از پالت را می توانید در زیر مشاهده کنید. بنابراین، هیچ پالتی در HTML وجود ندارد.

اما در ویرایشگرهای متن مختلف وجود دارد پلاگین های پالت رنگکه کمک می کند به سرعت رنگ یک عنصر HTML را انتخاب کنید. همچنین یک پالت رنگ در ویرایشگرهای گرافیکی وجود دارد، زیرا نشستن و محاسبه برای یک طراح چندان راحت و سرگرم کننده نیست: با روشنایی خاص یک کانال خاص چه رنگی به دست می آید. در شکل زیر ساده ترین پالت ویرایشگر Paint را مشاهده می کنید.

توجه داشته باشید که بسیاری از ماژول ها و پلاگین های پالت رنگ به شما امکان می دهند کد رنگ را نه تنها در قالب RGB / RGBA، بلکه در قالب مدل های دیگر نیز دریافت کنید. یاد آوردن که هیچ پالتی در HTML وجود ندارد، خوب، با این تفاوت که شما یک هنرمند هستید و پالت رنگ صفحه HTML آن رنگ ها را نامگذاری کنید، که برای تزئین آن استفاده می شد (بالاخره، گاهی اوقات به پالت رنگ هایی گفته می شود که این یا آن هنرمند استفاده می کند یا رنگ هایی که برای ایجاد این یا آن تصویر استفاده شده است).

آموزش تغییر رنگ متن در HTML

گرفتیم تئوری های زیادی در مورد رنگ ها در HTMLبیایید به تمرین و تلاش بپردازیم کار با رنگ عناصر HTML. اولین کاری که یاد خواهیم گرفت انجام دهیم - تغییر رنگ متن در سند htmlبا استفاده از ویژگی ها و برچسب های خاص هر ویرایشگر را باز کنید و کد زیر را در آن بنویسید:

آموزش کار با رنگ در HTML

تغییر رنگ متن

برای تغییر رنگ متن، می توانیم از ویژگی منحصر به فرد عنصر متن BODY و همچنین می توانیم از عنصر FONT و ویژگی رنگ آن استفاده کنیم. این متن خاکستری خواهد بود.

من این فایل را به عنوان color.html ذخیره می کنم و به شما توصیه می کنم که فراموش نکنید. نماد رنگ اعشاری توسط کروم، فایرفاکس و اپرا پشتیبانی نمی شود، اما IE این نماد رنگی را درک می کند و هدر HTML را به رنگ سبز برجسته می کند:

درست است که بگوییم رنگ متن را در HTML تغییر نمی دهیم، اما رنگ فونت را در HTML تغییر می دهیم. حرفه ای

در 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):

کدهای رنگ (پس زمینه) بر اساس اشباع و رنگ.

ولاد مرژویچ

در 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) جزء آبی را مشخص می کنند. نتیجه نهایی این رنگ است.

هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند که در نهایت 256 سایه را تشکیل می دهند. بنابراین، تعداد کل رنگ ها می تواند 256x256x256 = 16.777.216 ترکیب باشد. مدل رنگی بر اساس اجزای قرمز، سبز و آبی 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 نام رنگ های محبوب را نشان می دهد.

مهم نیست که چگونه رنگ را مشخص می کنید - با نام آن یا با استفاده از اعداد هگزادسیمال. در اثر آنها، این روش ها برابر هستند. مثال 6-1 نحوه تنظیم رنگ پس زمینه و متن یک صفحه وب را نشان می دهد.

مثال 6.1. رنگ پس زمینه و متن

متن نمونه

در این مثال، رنگ پس‌زمینه با استفاده از ویژگی bgcolor تگ تنظیم می‌شود و رنگ متن از طریق ویژگی text. برای تنوع، مقدار ویژگی text روی یک عدد هگزادسیمال و bgcolor روی کلمه کلیدی رزرو شده teal تنظیم می شود.

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