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

متاسفانه هنوز امکان نمایش حس چشایی در سایت وجود ندارد. اما این را می توان با کمک رنگ ها به طور کامل جبران کرد. از این گذشته، رنگ‌های 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 را به درستی نمایش دهد.

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

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

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

این جدول شامل 216 کد رنگ امن html می باشد. هر رنگ دارای مقدار RGB برای تعیین رنگ در ویرایشگرهای گرافیکی و HEX برای تعیین رنگ در صفحات html است.

رنگ های HTML با شش کاراکتر بعد از اسلش نشان داده می شوند - به عنوان مثال، #000000. این شش کاراکتر نشان دهنده نسبت رنگ های مختلف (قرمز، سبز و آبی) در رنگ نهایی است. تصویر روی مانیتور کامپیوتر شما از تعداد زیادی نقطه به نام پیکسل تشکیل شده است. هر پیکسل یک منبع نور کوچک است، بگذارید آن را "چراغ قوه" بنامیم، که به نوبه خود از سه چراغ قوه - قرمز، سبز و آبی تشکیل شده است. با کاهش یا افزایش شدت درخشش تک فانوس های رنگی به رنگ دلخواه می رسیم.

کدهای رنگ html

رنگ ها در HTML با نماد هگزا دسیمال (HEX) برای ترکیب قرمز، آبی و سبز (RGB) مشخص می شوند.

کوچکترین مقدار رنگ 0 (هگزادسیمال 00) است. بالاترین مقدار رنگ 255 (هگزادسیمال FF) است.

مقدار رنگ هگزادسیمال سه رقمی است که با # شروع می شود.

کدهای رنگ (مقادیر)

16 میلیون سایه

ترکیب قرمز، آبی و سبز با مقادیری از 0 تا 255 برای هر رنگ بیش از 16 میلیون سایه (256 x 256 x 256) اضافه می کند.

اکثر مانیتورهای مدرن قادر به نمایش حداقل 16384 سایه مختلف هستند (مانیتورهای LCD معمولاً قادر به نمایش 262.16 میلیون هستند. (به روز شده در اکتبر 2013)رنگ ها، در حالی که مانیتورهای CRT می توانند تقریباً تعداد نامحدودی از رنگ ها را نمایش دهند).

جدول رنگ زیر تغییر نسبت رنگ قرمز از 0 تا 255 را با مقادیر صفر برای آبی و سبز نشان می دهد:

سایه های خاکستری

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

نام رنگ های html متقابل مرورگر (برای همه مرورگرها).

مجموعه ای از 150 نام رنگ html که در همه مرورگرها پشتیبانی می شود.

نام رنگ های استاندارد شده

W3C 16 نام رنگ معتبر را برای HTML و CSS فهرست کرده است: aqua (آکوامارین)، سیاه (مشکی)، آبی (آبی)، فوشیا (سرخابی)، خاکستری (خاکستری)، سبز (سبز)، لیمویی (آهکی یا سبز روشن)، مارون (شلوطی)، سرمه ای (اولترامارین)، زیتونی (زیتونی)، بنفش (بنفش)، قرمز (قرمز)، نقره ای (نقره ای)، آبی (خاکستری)، سفید (سفید) و زرد (زرد).

هنگام استفاده از رنگ هایی که در این لیست قرار ندارند، استفاده از کد هگزا دسیمال (HEX) یا کد RGB آنها صحیح تر خواهد بود.

رنگ های مطمئن

چند سال پیش، زمانی که رایانه‌ها می‌توانستند حداکثر 256 رنگ مختلف را پشتیبانی کنند، فهرستی از 216 «رنگ امن وب» با 40 رنگ برای سیستم پیشنهاد شد.

این پالت 216 رنگ به منظور نمایش صحیح رنگ ها در حالت پالت 256 رنگ ایجاد شده است.

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

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

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

ماژول رنگی CSS مقادیری را که به نویسندگان اجازه می دهد تا رنگ ها و شفافیت عناصر html و همچنین مقادیر ویژگی رنگ را مشخص کنند، جزئیات می دهد.

خاصیت رنگ

1. رنگ های اولویت: خاصیت رنگ

این ویژگی رنگ فونت را با استفاده از سیستم های رندر مختلف تنظیم می کند. این ویژگی رنگ محتوای متن عنصر را توصیف می کند. همچنین برای ارائه یک مقدار غیرمستقیم بالقوه (currentColor) برای هر ویژگی دیگری که مقادیر رنگ را می پذیرد استفاده می شود.

ملک موروثی است.

2. مقادیر رنگ

2.1. کلمات کلیدی اصلی

لیست کلمات کلیدی اصلی شامل مقادیر زیر است:

نام رنگ ها به حروف بزرگ و کوچک حساس نیستند.

نحو

رنگ: سرمه ای؛

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

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