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

همانطور که می دانید، رنگ می تواند بر وضعیت یک فرد تأثیر بگذارد: روحی و جسمی. هر روز با مرور اینترنت، چشم ها میلیون ها رنگ و سایه را ارزیابی می کنند. یک طراح وب که با روانشناسی رنگ آشنا است می تواند روحیه بازدیدکنندگان را برای رسیدن به هر هدفی کنترل کند.

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

RGB یک مدل رنگی است که نشان دهنده روشی برای به دست آوردن تمام رنگ ها و سایه های آنها با مخلوط کردن به نسبت های مختلف سه جزء اصلی است که عبارتند از:

• رنگ قرمز ( قرمز);
• رنگ سبز ( سبز);
• رنگ آبی ( آبی).

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

مدل RGB امروزه محبوب ترین است و برای بازتولید رنگ ها در صفحه نمایش تلویزیون و مانیتور کامپیوتر استفاده می شود. از آنجایی که تولیدکنندگان به محصولات خود ویژگی‌های متفاوتی می‌دهند، در سال 1996 یک سیستم ترکیب رنگ مبتنی بر RGB به نام sRGB ایجاد شد که مایکروسافت و اچ‌پی با هم روی آن کار کردند.

نمایش رنگ عددی

همانطور که قبلا ذکر شد، رنگ های RGB از ترکیب رنگ های اصلی تشکیل می شوند. برای توصیف شدت هر یک از آنها، طرحی اتخاذ شد که در آن رنگ با محدوده 0-255 (8 بیت)، که مربوط به 00-FF در هگزادسیمال است، نشان داده می شود.

یعنی رنگ های اصلی به این صورت خواهند بود:

• قرمز - RGB (255.0.0);
• سبز - RGB (0.255.0)؛
• آبی - RGB (0.0.255);

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

نمودارهای رنگی RGB

به طور طبیعی، علاوه بر درجه بندی رنگ های اصلی، رنگ های مخلوط نیز وجود دارد و تعداد آنها بسیار زیاد است. بنابراین، جدولی از رنگ های RGB ایجاد شد که در آن تمام سایه های موجود و همچنین نام ها و نمایش های عددی آنها ارائه شده است. به صورت اعشاری و هگزادسیمال).

در اینجا می توانید با او آشنا شوید. این جدول زندگی را برای طراحان وب بسیار آسان تر می کند، زیرا در عرض چند ثانیه می توانید سایه مورد نظر را پیدا کنید و به نمایش عددی آن پی ببرید.

پالت رنگ ایمن RGB

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

هنگامی که مرورگر نمی تواند رنگی را به درستی نمایش دهد، سعی می کند با ترکیب رنگ های همسایه به آنچه که نیاز دارد نزدیک شود و به احتمال زیاد نتیجه کاملا غیر قابل قبول خواهد بود:

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

رنگ طلایی در مدل RGB

برای اولین بار کلمه "طلا" در آغاز قرن چهاردهم برای توصیف رنگ عنصر شیمیایی به نام Aurum - طلا استفاده شد. در مدل RGB، رنگ طلایی با مقادیر عددی زیر نمایش داده می شود:

• RGB (255، 215، 0) - سیستم اعشاری؛
• HEX #FFD700 - سیستم هگزا دسیمال.

رنگ بژ در مدل RGB

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

برای صفحات 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 است.

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

HEX یک سیستم هگزادسیمال برای نمایش رنگ ها در پایه 16 است. برای این سیستم از ارقام اعشاری عربی از 0 تا 9 و حروف لاتین از A تا F برای تکمیل عدد دیجیتالی 16 استفاده می شود. برای طراحی وب، 16 رنگ اصلی (کلیدی) کد رنگ هگزا دسیمال #RRGGBB که هر جفت مسئول سهم رنگ خود است: RR - قرمز، GG - سبز و BB - آبی. هر کسر رنگ از 00 تا FF متغیر است.

دو نمایش دیگر رنگ در طراحی وب عبارتند از: به شکل RGB(*،*،*)، که در آن هر قسمت "*" رنگ با ارقام اعشاری از 0 تا 255 و با نام رنگ ها در انگلیسی نشان داده می شود.

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

جدول 16 رنگ اصلی، که در همه مرورگرها استفاده می شود

جدول رنگ بنفشرنگ ها و سایه ها

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

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

جدول (پالت) رنگ های htmlاین فرصت را به شما می دهد تا به طور مستقل آهنگ مورد نیاز خود را انتخاب کنید. مقدار رنگ در سه فرمت Hex، RGB و HSV نمایش داده می شود.

• هگز از سه مقدار دو کاراکتر در نماد هگزادسیمال تشکیل شده است. به عنوان مثال: #ff00b3، که در آن اولین جفت اعداد قرمز، دومی سبز و سومی آبی است.
• RGB (RedGreenBlue) دارای شکل "200،100،255" است که میزان تن مربوطه (قرمز، سبز، آبی) را در رنگ حاصل نشان می دهد.
• HSV (رنگ، ​​اشباع، ارزش - تن، اشباع، ارزش) - یک مدل رنگ که در آن مختصات عبارتند از:
  • رنگ - تن رنگ، می تواند از 0 درجه تا 360 درجه متفاوت باشد.
  • اشباع - اشباع، بین 0-100 یا 0-1 متغیر است. هرچه این تنظیم بزرگتر باشد، رنگ "خالص تر" است، به همین دلیل است که گاهی اوقات از این تنظیم به عنوان خلوص رنگ یاد می شود. و هر چه این پارامتر به صفر نزدیکتر باشد، رنگ به خاکستری خنثی نزدیکتر است.
  • مقدار (مقدار رنگ) - روشنایی را تنظیم می کند، مقدار نیز می تواند بین 0-100 یا 0-1 متفاوت باشد.

کد رنگ را وارد کنید: برو

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

جدول نام رنگ های انگلیسی (که می تواند به عنوان مقادیر استفاده شود) که توسط همه مرورگرها پشتیبانی می شود و مقادیر هگزادسیمال آنها فهرست می شود. همه رنگ‌های فهرست شده «ایمن» هستند، به این معنی که در همه مرورگرها یکسان ارائه می‌شوند.