کد نارنجی آموزش HTML. رنگ های RGB رنگ های پالت ایمن

با استفاده از ویژگی 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 - شفافیت به درجات مختلف.

نمونه کد.

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

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

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

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

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

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

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

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

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

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

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

تنظیم رنگ با HSL

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

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

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

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

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

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

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

Someblock (رنگ پس‌زمینه: rgb(255,50,50)؛ رنگ پس‌زمینه: rgba (255,50,50,0.85)

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

HEX/HTML

یک رنگ در فرمت HEX چیزی بیش از نمایش هگزادسیمال RGB نیست.

رنگ ها به عنوان سه گروه از ارقام هگزا دسیمال نشان داده می شوند که هر گروه مسئول رنگ خود است: #112233، که در آن 11 قرمز، 22 سبز، 33 آبی است. همه مقادیر باید بین 00 و FF باشند.

بسیاری از برنامه‌ها یک نماد کوتاه برای رنگ‌های هگزادسیمال را می‌پذیرند. اگر هر یک از سه گروه دارای کاراکترهای یکسانی باشد، برای مثال #112233، می توان آنها را به صورت #123 نوشت.

1. h1 (رنگ: #ff0000; ) /* قرمز */
2. h2 (رنگ: #00ff00; ) /* سبز */
3. h3 (رنگ: #0000ff; ) /* آبی */
4. h4 ( رنگ: #00f; ) /* همان آبی، مختصر */

RGB

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

مقادیر RGB به عنوان یک عدد صحیح بین 0 و 255 مشخص می شوند. برای مثال rgb(0,0,255) به رنگ آبی نمایش داده می شود زیرا پارامتر آبی روی بالاترین مقدار خود (255) و بقیه روی 0 تنظیم شده است.

برخی از برنامه ها (به ویژه مرورگرهای وب) از درصد RGB (از 0٪ تا 100٪) پشتیبانی می کنند.

1. h1 (رنگ: rgb(255، 0، 0؛ ) /* قرمز */
2. h2 ( رنگ: rgb(0, 255, 0); ) /* سبز */
3. h3 ( رنگ: rgb(0, 0, 255); ) /* آبی */
4. h4 ( رنگ: rgb(0٪، 0٪، 100%)؛ ) /* همان آبی، نماد درصد */

مقادیر رنگ RGB در همه مرورگرهای اصلی پشتیبانی می شود.

RGBA

اخیراً، مرورگرهای مدرن یاد گرفته‌اند که با مدل رنگی RGBA کار کنند، یک پسوند RGB با پشتیبانی از یک کانال آلفا که کدورت یک شی را تعیین می‌کند.

مقدار رنگ RGBA به صورت: rgba (قرمز، سبز، آبی، آلفا) مشخص می شود. پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملاً مات) است.

1. h1 ( رنگ: rgb(0، 0، 255؛ ) /* آبی در RGB معمولی */
2. h2 ( رنگ: rgba(0, 0, 255, 1); ) /* همان آبی در RGBA به دلیل شفافیت: 100% */
3. h3 ( رنگ: rgba(0, 0, 255, 0.5); ) /* کدورت: 50% */
4. h4 ( رنگ: rgba(0, 0, 255, 0.155); ) /* کدورت: 15.5% */
5. h5 ( رنگ: rgba(0, 0, 255, 0); ) /* کاملاً شفاف */

RGBA در IE9+، Firefox 3+، Chrome، Safari و Opera 10+ پشتیبانی می‌شود.

HSL

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

HSL مخفف Hue (رنگ / رنگ)، اشباع (اشباع)، Lightness / Luminance (سبکی / سبکی / درخشندگی است که نباید با روشنایی اشتباه گرفته شود).

Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع یک مقدار درصد اشباع (از 0٪ تا 100٪) است. سبکی درصدی از سبکی (از 0٪ تا 100٪) است.

1. h1 ( رنگ: hsl(120، 100%، 50%)؛ ) /* سبز */
2. h2 ( رنگ: hsl(120، 100، 75%)؛ ) /* سبز روشن */
3. h3 ( رنگ: hsl(120، 100%، 25%)؛ ) /* سبز تیره */
4. h4 ( رنگ: hsl(120، 60%، 70%)؛ ) /* سبز پاستلی */

HSL در IE9+، Firefox، Chrome، Safari و Opera 10+ پشتیبانی می‌شود.

HSLA

مشابه RGB/RGBA، HSL دارای یک حالت HSLA با پشتیبانی از یک کانال آلفا برای تعیین کدورت یک شی است.

مقدار رنگ HSLA به صورت: hsla (رنگ، ​​اشباع، روشنایی، آلفا) مشخص می شود. پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (کاملاً مات) است.

1. h1 ( رنگ: hsl(120، 100%، 50%)؛ ) /* سبز در HSL معمولی */
2. h2 ( رنگ: hsla(120, 100%, 50%, 1)؛ ) /* در HSLA سبز یکسان به دلیل کدورت: 100% */
3. h3 ( رنگ: hsla(120، 100٪، 50٪، 0.5)؛ ) /* تیرگی: 50٪ */
4. h4 ( رنگ: hsla(120, 100%, 50%, 0.155); ) /* کدورت: 15.5% */
5. h5 (رنگ: hsla(120، 100، 50، 0؛ ) /* کاملا شفاف */

CMYK

مدل رنگی CMYK اغلب با چاپ رنگی، با چاپ همراه است. CMYK (بر خلاف RGB) یک مدل تفریق کننده است، به این معنی که مقادیر بالاتر با رنگ های تیره تر همراه است.

رنگ ها با نسبت فیروزه ای (سیان)، سرخابی (سرخابی)، زرد (زرد)، با افزودن رنگ سیاه (کلید / سیاه K) تعیین می شوند.

هر یک از اعدادی که یک رنگ را در CMYK تعریف می‌کنند، نشان‌دهنده درصد جوهر یک رنگ معین است که ترکیب رنگ را می‌سازد، یا بهتر است بگوییم، اندازه نقطه شطرنجی نشان‌داده‌شده روی فتوتایپتر روی فیلم این رنگ (یا مستقیماً روی رنگ) صفحه چاپ در مورد CTP).

به عنوان مثال، برای به دست آوردن رنگ "PANTONE 7526" باید 9 قسمت فیروزه ای، 83 قسمت سرخابی، 100 قسمت زرد و 46 قسمت سیاه را با هم مخلوط کنید. این را می توان به صورت زیر نشان داد: (9،83،100،46). گاهی اوقات آنها از چنین عناوینی استفاده می کنند: C9M83Y100K46، یا (9٪، 83٪، 100٪، 46٪)، یا (0.09 / 0.83 / 1.0 / 0.46).

HSB/HSV

HSB (همچنین به عنوان HSV شناخته می شود) شبیه HSL است، اما آنها دو مدل رنگ متفاوت هستند. آنها هر دو بر اساس هندسه استوانه ای هستند، اما HSB/HSV بر اساس مدل "هگزاکون" است در حالی که HSL بر اساس مدل "دو هگزاکون" است. هنرمندان اغلب ترجیح می دهند از این مدل استفاده کنند، به طور کلی پذیرفته شده است که دستگاه HSB / HSV به درک رنگ طبیعی نزدیکتر است. به طور خاص، مدل رنگ HSB در فتوشاپ استفاده می شود.

HSB / HSV مخفف Hue (رنگ / رنگ)، Saturation (اشباع)، Brightness / Value (روشنایی / ارزش) است.

Hue موقعیت رنگ را در چرخه رنگ (از 0 تا 360) تنظیم می کند. اشباع یک مقدار درصد اشباع (از 0٪ تا 100٪) است. روشنایی درصدی از روشنایی (از 0٪ تا 100٪) است.

XYZ

مدل رنگ XYZ (CIE 1931 XYZ) یک فضای کاملاً ریاضی است. برخلاف مدل‌های RGB، CMYK و سایر مدل‌ها، در XYZ اجزای اصلی "تخیلی" هستند، به این معنی که نمی‌توانید X، Y و Z را به هر مجموعه رنگ ترکیبی نگاشت کنید. XYZ مدل اصلی تقریباً برای تمام مدل های رنگی دیگر است که در زمینه های فنی استفاده می شود.

آزمایشگاه

مدل رنگ LAB (CIELAB، "CIE 1976 L*a*b*") از فضای CIE XYZ محاسبه می شود. هدف آزمایشگاه ایجاد فضای رنگی بود که در آن تغییر رنگ از نظر درک انسان خطی تر باشد (در مقایسه با XYZ)، یعنی همان تغییر در مقادیر مختصات رنگ در مناطق مختلف فضای رنگ ایجاد شود. همان احساس تغییر رنگ

ولاد مرژویچ

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

FA

+

8E

+

47

=

FA8E47

هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 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 نام رنگ های محبوب را نشان می دهد.

Tab. 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 و توضیحات را نشان می دهد.

Tab. 1. نام رنگ

نام	رنگ	کد	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. رنگ ها در صفحه وب