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

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

برای تعیین رنگ ها از اعداد هگزادسیمال استفاده می شود. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 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 در نظر گرفته شود.

بر اساس اسم

مرورگرها برخی از رنگ ها را با نام پشتیبانی می کنند. روی میز. 1 نام ها، کد هگزا، مقادیر در فرمت RGB، HSL و توضیحات را نشان می دهد.

با RGB

شما می توانید یک رنگ را با استفاده از مقادیر قرمز، سبز و آبی به صورت اعشاری تعریف کنید. هر یک از سه جزء رنگی از 0 تا 255 مقدار می گیرند. همچنین تنظیم رنگ به عنوان درصد قابل قبول است، در حالی که 100٪ با عدد 255 مطابقت دارد. ابتدا کلمه کلیدی rgb مشخص می شود و سپس اجزای رنگ مشخص می شوند. در پرانتز مشخص شده و با کاما از هم جدا شده اند، برای مثال rgb(255، 128، 128) یا rgb(100٪، 50٪، 50٪).

RGBA

فرمت RGBA از نظر نحو شبیه به RGB است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.

RGBA به CSS3 اضافه شده است، بنابراین اعتبار کد CSS باید مطابق این نسخه انجام شود. لازم به ذکر است که استاندارد CSS3 هنوز در دست توسعه است و ممکن است برخی از ویژگی های آن تغییر کند. به عنوان مثال، یک رنگ RGB که به ویژگی background-color اضافه می‌شود، اعتبارسنجی را انجام می‌دهد، اما رنگی که به ویژگی پس‌زمینه اضافه می‌شود، تایید نمی‌شود. در عین حال، مرورگرها به درستی رنگ هر دو ویژگی را درک می کنند.

HSL

نام فرمت HSL از ترکیب حروف اول Hue (رنگ)، Saturate (اشباع) و Lightness (سبک) تشکیل شده است. Hue مقدار رنگ در چرخه رنگ است (شکل 1) و بر حسب درجه مشخص می شود. 0 درجه قرمز، 120 درجه سبز و 240 درجه آبی است. مقدار رنگ می تواند از 0 تا 359 متفاوت باشد.

برنج. 1. چرخ رنگ

اشباع شدت یک رنگ است که به صورت درصدی از 0٪ تا 100٪ اندازه گیری می شود. مقدار 0٪ نشان دهنده عدم وجود رنگ و سایه خاکستری است، 100٪ حداکثر مقدار اشباع است.

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

HSLA

فرمت HSLA از نظر نحو شبیه به HSL است، اما شامل یک کانال آلفا است که شفافیت عنصر را تعیین می کند. مقدار 0 کاملاً شفاف، 1 مات و مقدار میانی مانند 0.5 نیمه شفاف است.

مقادیر رنگ در فرمت‌های RGBA، HSL و HSLA به CSS3 اضافه می‌شوند، بنابراین هنگام استفاده از این فرمت‌ها، اعتبار کد را در برابر نسخه بررسی کنید.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

هشدار

تمامی روش های صید شیر درج شده در سایت بصورت تئوری و مبتنی بر روش های محاسباتی می باشد. نویسندگان ایمنی شما را هنگام استفاده از آنها تضمین نمی کنند و مسئولیت نتیجه را سلب می کنند. به یاد داشته باشید، شیر یک حیوان درنده و خطرناک است!

نتیجه این مثال در شکل نشان داده شده است. 2.

برنج. 2. رنگ ها در صفحه وب

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

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

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

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

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

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

همانطور که قبلا ذکر شد، رنگ های 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

در html، رنگ را می توان در چندین فرمت مشخص کرد:

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

• اولین جفت عددی مسئول رنگ قرمز است.
• جفت دوم برای محتوای رنگ سبز است.
• دومی برای محتوای رنگ آبی است.

در ابتدای کد (قبل از اعداد) یک علامت هش قرار می گیرد. این کد رنگ هگزادسیمال است. علاوه بر اعداد از 1 تا 9، این سیستم اعداد از حروف الفبای لاتین (A، B، C، D، E، F) استفاده می کند.

برای مثال، کد رنگ سفید در html شبیه #FFFFFF است:

خاکستری با دو کلمه کلیدی نشان داده می شود: خاکستری و خاکستری. کد هگزادسیمال آنها (HEX) با همان مقدار #808080 داده می شود.

مثال :

#808080

• R - قرمز (قرمز)؛
• G - سبز (سبز)؛
• ب - آبی (آبی).

شماره رنگ در فرمت RGB به صورت زیر نوشته شده است: rgb(0, 210, 100).

پس‌زمینه رنگ: rgb (100,186,43)

مثال استفاده:

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

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

اما مولد رنگ نه تنها در سایت های تخصصی موجود است. تقریباً تمام ویرایشگرهای گرافیکی به ابزار مشابهی مجهز هستند. مثلا فتوشاپ:

ایمنی رنگ

و این مدت‌ها پیش بود، در دوران کارت‌های ویدئویی که تنها از 256 رنگ پشتیبانی می‌کردند. در آن روزها، سیستم عامل ها می توانستند تنها تعداد معینی از سایه های هشت بیتی را بدون اعوجاج نمایش دهند.

سپس جدول بزرگ رنگ های امن پرورش داده شد. این 216 سایه را نشان می دهد که می تواند بدون اعوجاج در هر یک از مرورگرهای آن زمان نمایش داده شود. و تا امروز این نسخه خطی عالی» هنوز در برخی منابع موجود است:

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

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