RGB سفید. رنگ در سبک ها را می توان به روش های مختلف تنظیم کرد: با مقدار هگزادسیمال، با نام، در فرمت 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 که به ویژگی 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. رنگ ها در صفحه وب

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)، یعنی همان تغییر در مقادیر مختصات رنگ در مناطق مختلف فضای رنگ ایجاد شود. همان احساس تغییر رنگ

>> مدیریت رنگ

مقادیر رنگ RGB هگزادسیمال

روش‌های توصیف و پردازش رنگ‌ها از این نظر که برای نمایش نهایی در نظر گرفته شده‌اند، با یکدیگر متفاوت هستند. بیایید، برای مثال، نمایش رنگ ها را برای پلی گرافی و برای نمایشگرهای کامپیوتر مقایسه کنیم. در مورد اول، اساس است سفیدرنگ کاغذی که بعداً سه رنگ اصلی روی آن اعمال می شود: آبی, رنگ بنفشو رنگ زرد. این سه رنگ اصلی با اختلاط با یکدیگر و با رنگ سفید کاغذ به نسبت های مختلف، سایه های رنگی متفاوتی به جز سیاه خالص می دهند یا در غیاب کامل رنگ کاغذ سفید می دهند. اگر رنگ مشکی را به آنها اضافه کنیم، می گیریم CMYK- راهی برای انتقال رنگ زمانی که رنگ مورد نظر با کم کردن رنگ های از دست رفته از سفید به دست می آید.

در مورد دوم، اساس است سیاهرنگ صفحه نمایش مانیتور که هر سلول آن در یکی از سه رنگ می درخشد: قرمز-قرمز، سبز-سبز و آبی-آبی. سپس در غیاب کامل هیچ درخششی، یک رنگ مشکی خالص از صفحه به دست می آید و هر یک از رنگ های مورد نیاز با نسبت هر یک از سه رنگ به دست می آید. در این صورت به دست خواهیم آورد RGB- روش انتقال رنگ رنگ های اولیه می توانند معانی از 0 قبل از 255 ، یا از 0% قبل از 100% ، یا می تواند به عنوان یک مقدار هگزادسیمال نمایش داده شود. در شکل زیر نتایج اختلاط رنگ های اصلی را مشاهده می کنید.

سیستم اعداد هگزا دسیمال، بر خلاف سیستم اعداد اعشاری، نه ده رقم در سری ارقام خود، بلکه شانزده رقم دارد - از این رو نام آن است. بر این اساس، انواع غیر تکراری ترکیبات دو رقمی فقط می توانند - 256 ، برای ادامه سری ارقام بعد از آن 9 نامه هایی از آقبل از اف، بنابراین ردیف به این شکل خواهد بود -

در این مورد، رنگ با سه عدد هگزادسیمال، که هر کدام از دو رقم تشکیل شده است، داده می شود. عدد اول شدت را تعیین می کند قرمزرنگ ها، متوسط سبز، آخرین چیز- آبیرنگ ها همه اعداد می توانند مقادیر متفاوتی داشته باشند 00 قبل از FF(از 0 تا 255). به عنوان مثال: رنگ سبز به عنوان داده شده است #00FF00، قرمز مانند #FF0000، آبی - مانند #0000FF، سفید مانند #FFFFFF، عدم وجود کامل رنگ یا سیاه به عنوان داده شده است #000000 .

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

نمونه هایی از مقادیر رنگ RGB هگزادسیمال: درجه بندی قرمز، آبی و سبز.

تعیین رنگ با حروف الفبای رشته

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

استفاده از انتخابگر رنگ ایمن

متأسفانه، در پلتفرم های مختلف، با تنظیمات مختلف سیستم، بازتولید صحیح رنگ مشکل ساز است. نکته این است که مرورگر همیشه سعی می کند با ترکیب و جایگزینی رنگ ها به تنهایی، پالت رنگ سند را با تنظیمات سیستم و قابلیت های مانیتور تنظیم کند. در نتیجه، گاهی اوقات کاربر دقیقاً آنچه را که مدیر وب می خواست به او نشان دهد، نمی بیند. راه برون رفت از این وضعیت در استفاده از پالتی یافت شد که هر رنگ آن تضمین شده است که به یک شکل توسط همه مرورگرها در پلتفرم های مختلف ارائه شود. این به اصطلاح تضمینپالت، همچنین به عنوان شناخته شده است بی خطرجعبه رنگ نقاشی. این پالت شامل رنگ هایی است که اجزای رنگ آنها مقادیر زیر را به خود می گیرند: 00 ,33 ,66 ,99 , CC,FF، در تمام موارد ممکن 216 ترکیبات آنها

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