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

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

در 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 است.

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