• رنگ بی رنگ در html. آموزش HTML. رنگ های RGB رنگ های پالت ایمن

    ولاد مرژویچ

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

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

    HTML از اعداد هگزادسیمال برای تعیین رنگ ها استفاده می کند. سیستم هگزادسیمال بر خلاف سیستم اعشاری، همانطور که از نامش پیداست، بر اساس عدد 16 است. اعداد به صورت زیر خواهند بود: 0، 1، 2، 3، 4، 5، 6، 7، 8، 9، A , B, C , D, E, F. اعداد از 10 تا 15 با حروف لاتین جایگزین می شوند. روی میز. 6.1 مطابقت بین اعداد اعشاری و هگزادسیمال را نشان می دهد.

    اعداد بزرگتر از 15 در سیستم هگزادسیمال از ترکیب دو عدد در یک عدد تشکیل می شوند (جدول 6.2). به عنوان مثال، عدد 255 در اعشار با عدد FF در هگزادسیمال مطابقت دارد.

    برای جلوگیری از سردرگمی در تعریف سیستم اعداد، قبل از عدد هگزادسیمال علامت پوند #، به عنوان مثال #aa69cc قرار می گیرد. در این مورد، مورد مهم نیست، بنابراین نوشتن #F0F0F0 یا #f0f0f0 جایز است.

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

    در اینجا رنگ پس زمینه صفحه وب روی #FA8E47 تنظیم می شود. علامت پوند # در مقابل یک عدد به معنای هگزادسیمال بودن آن است. دو رقم اول (FA) جزء قرمز رنگ، رقم سوم تا چهارم (8E) جزء سبز و دو رقم آخر (47) جزء آبی را مشخص می‌کنند. نتیجه نهایی این رنگ است.

    FA + 8E + 47 = FA8E47

    هر یک از سه رنگ - قرمز، سبز و آبی - می توانند مقادیری از 00 تا FF داشته باشند که در نهایت 256 سایه را تشکیل می دهند. بنابراین، تعداد کل رنگ ها می تواند 256x256x256 = 16.777.216 ترکیب باشد. مدل رنگی بر اساس اجزای قرمز، سبز و آبی RGB (قرمز، سبز، آبی؛ قرمز، سبز، آبی) نامیده می شود. این مدل افزودنی است (از add - add) که در آن افزودن هر سه جزء سفید رنگ می شود.

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

    • اگر مقادیر اجزای رنگ یکسان باشد (به عنوان مثال: #D6D6D6)، یک رنگ خاکستری به دست می آید. هرچه این عدد بیشتر باشد، رنگ روشن‌تر است و مقادیر از #000000 (سیاه) به #FFFFFF (سفید) تغییر می‌کنند.
    • اگر جزء قرمز حداکثر (FF) باشد، یک رنگ قرمز روشن تشکیل می‌شود و بقیه اجزا روی صفر تنظیم می‌شوند. رنگ با مقدار #FF0000 قرمزترین رنگ قرمز ممکن است. همین امر برای سبز (#00FF00) و آبی (#0000FF) صادق است.
    • زرد (#FFFF00) از ترکیب قرمز با سبز به دست می آید. این به وضوح در چرخه رنگ دیده می شود (شکل 6.1)، که رنگ های اصلی (قرمز، سبز، آبی) و مکمل یا مکمل را نشان می دهد. اینها عبارتند از زرد، فیروزه ای و بنفش (همچنین سرخابی نامیده می شود). به طور کلی هر رنگی را می توان با مخلوط کردن رنگ های مجاور آن به دست آورد. بنابراین، فیروزه ای (#00FFFF) با ترکیب آبی و سبز به دست می آید.

    برنج. 6.1. دایره رنگی

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

    برنج. 6.2. انتخابگر رنگ در فتوشاپ

    رنگ های وب

    اگر کیفیت رنگ مانیتور را روی 8 بیت (256 رنگ) تنظیم کنید، می توان همان رنگ را در مرورگرهای مختلف به طور متفاوتی نمایش داد. این مربوط به نحوه رندر گرافیکی است که مرورگر با پالت خود کار می کند و نمی تواند رنگی را نشان دهد که در پالت آن نیست. در این حالت، رنگ با ترکیبی از پیکسل‌های رنگ‌های نزدیک به آن جایگزین می‌شود که از رنگ داده شده تقلید می‌کنند. برای اینکه رنگ در مرورگرهای مختلف یکسان بماند، پالتی از رنگ های به اصطلاح وب معرفی شد. رنگ های وب چنین رنگ هایی هستند که برای هر جزء آنها - قرمز، سبز و آبی - یکی از شش مقدار تنظیم شده است - 0 (00)، 51 (33)، 102 (66)، 153 (99)، 204 (CC)، 255 (FF). مقدار هگزادسیمال این جزء در براکت نشان داده شده است. تعداد کل رنگ ها از همه ترکیب های ممکن 6x6x6 - 216 رنگ می دهد. یک رنگ وب مثال #33FF66 است.

    ویژگی اصلی رنگ وب این است که در همه مرورگرها یکسان نمایش داده می شود. در حال حاضر، ارتباط رنگ های وب به دلیل بهبود کیفیت مانیتورها و گسترش قابلیت های آنها بسیار کم است.

    رنگ ها بر اساس نام

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

    Tab. 6.3. نام چند رنگ
    نام رنگ رنگ شرح مقدار هگز
    سیاه مشکی #000000
    آبی آبی #0000FF
    فوشیا بنفش روشن #FF00FF
    خاکستری خاکستری تیره #808080
    سبز سبز #008000
    اهک سبز روشن #00FF00
    مارون قرمز تیره #800000
    نیروی دریایی آبی تیره #000080
    زیتون زیتون #808000
    رنگ بنفش بنفش تیره #800080
    قرمز قرمز #FF0000
    نقره خاکستری روشن #C0C0C0
    سبز رنگ سبز آبی #008080
    سفید سفید #FFFFFF
    رنگ زرد رنگ زرد #FFFF00

    مهم نیست که چگونه رنگ را مشخص می کنید - با نام آن یا با استفاده از اعداد هگزادسیمال. در اثر آنها، این روش ها برابر هستند. مثال 6-1 نحوه تنظیم رنگ پس زمینه و متن یک صفحه وب را نشان می دهد.

    مثال 6.1. رنگ پس زمینه و متن

    رنگ ها

    متن نمونه

    در این مثال، رنگ پس‌زمینه با استفاده از ویژگی bgcolor تگ تنظیم می‌شود و رنگ متن از طریق ویژگی text. برای تنوع، مقدار ویژگی text روی یک عدد هگزادسیمال و bgcolor روی کلمه کلیدی رزرو شده teal تنظیم می شود.

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

    وظیفه

    مرورگر متقاطع را رنگ شفاف کنید.

    راه حل

    اولین فکر در این شرایط استفاده از یک تصویر png24 برای پس زمینه با شفافیت از قبل تنظیم شده است. اما این عکس کاملا زائد است. شما می توانید بدون آن به خوبی انجام دهید (و بنابراین بدون درخواست اضافی به سرور). بیایید سعی کنیم بهترین راه حل را پیدا کنیم.

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

    البته، می توانید سعی کنید یک ظرف اضافی اضافه کنید و فقط به آن Opacity اعمال کنید، اما این عنصر HTML فقط برای تزئین خواهد بود و بدیهی است که اضافی خواهد بود. آیا بدون آن امکان پذیر است؟

    البته که می توانی! اگر از RGBA استفاده می کنید.

    فرمت توضیحات رنگ RGBA

    CSS3 اجازه می دهد تا رنگ با استفاده از توابع RGB و RGBA مشخص شود. در عین حال، باید سهم هر جزء رنگی را مشخص کنیم که تحت آن یک بایت اختصاص داده شده است (از 0 تا 255، ناگهان کسی نمی داند).

    نحو برای این مورد بسیار ساده است:

    پس زمینه: rgb(0, 255, 0); /* رنگ سبز خالص */

    برای RGBA، پارامتر چهارم اضافه می شود - شفافیت آلفا (از 0 تا 1).

    زمینه: rgba(255, 0, 0, 0.5); /* قرمز خالص با کدورت 50 درصد */

    راه حل مشکل ما اینجاست. کافی است رنگ پس زمینه را با استفاده از rgba تنظیم کنیم و همه چیز همانطور که نیاز داریم به نظر می رسد. بدون تصاویر و عناصر اضافی!

    این اعداد را از کجا می توانم تهیه کنم؟

    با استفاده از ابزار قطره چکان در فتوشاپ می توانید رنگ های تشکیل دهنده را مشاهده کنید.


    درباره سازگاری بین مرورگرها

    از آنجایی که عملکرد RGB بسیار قدیمی تر از RGBA است و از زمان استاندارد CSS2 وجود داشته است، می توانید از ساختار تکراری زیر برای محافظت در برابر قدیمی ترین مرورگرها استفاده کنید:

    SomeBlock ( پس‌زمینه: rgb(255، 0، 0؛ پس‌زمینه: rgba (255، 0، 0، 0.5)؛ )

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

    به طور جداگانه، شما باید از IE مراقبت کنید. خر مانند تا نسخه هشتم RGBA را نمی فهمد.

    مثل همیشه: زمین - به دهقانان، کارخانه ها - به کارگران و خرها - یک عصا! مانند .

    البته در شرایط جنگی، این قانون را در یک CSS جداگانه بیرون می آوریم که در آن قرار می دهیم.

    SomeBlock ( پس زمینه: شفاف؛ فیلتر:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000؛ زوم: 1;)

    ترفند این است که همان رنگ های شروع و پایان (ff0000 - قرمز) را مشخص کنید و از این واقعیت استفاده کنید که می توانید کانال آلفا را برای گرادیان در این فیلتر تنظیم کنید (در مثال، مقدار 80 است).

    برای مرجع: فیلتر از یک سیستم هگزادسیمال استفاده می کند و کد FF مربوط به یک رنگ کاملاً مات است (در اعشار 255 است). بر این اساس، هگزادسیمال 80 اعشاری 128 است، یعنی 50 درصد شفافیت.

    تایید شده در:

    • IE 6-9
    • فایرفاکس 3+
    • Opera 10+
    • سافاری 4
    • کروم

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

    بیشتر بخوانید: