خواص رنگ CSS. کد رنگ

یک ابزار برای تغییر سبک صفحات وب CSS رنگ است. چند راه برای تغییر این تنظیم وجود دارد. هر دو دارای مزایا و معایب هستند.

عنوان

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

از آنجا که لیست کامل دشوار است برای یادآوری، نام در جدول سبک به ندرت استفاده می شود.

RGB

اکثر تلویزیون ها، گوشی های هوشمند، مانیتورها با مدل رنگ RGB کار می کنند. به این معنی که هر سایه می تواند با ترکیبی از رنگ های اصلی تنظیم شود که شامل قرمز، سبز و آبی است. . این رویکرد در هر دو دستگاه و در CSS استفاده می شود . основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. رنگ ترکیب اصلی، مقادیر 0 تا 255 است. و تعداد سایه های ممکن 16777216 است.

از آنجا که مدل RGB به طور مستقیم با قوانین فیزیکی تجسم رنگ مرتبط است، سیاه در آن به عنوان RGB (0، 0، 0) تعریف می شود، سفید RGB (255، 255، 255) است. سیستم RGBA کاملا با RGB مشابه است، فقط با اضافه کردن کانال آلفا. این بر روی شفافیت تاثیر می گذارد که رنگ را با پس زمینه ترکیب می کند. در این مورد، نوع عنصر بسته به "بستر" متفاوت خواهد بود.

HSL

برای درک چگونگی کار سیستم HLS، شما باید یک چرخ رنگی تهیه کنید. در مرکز آن قرمز است، و سپس (به عقب) تمام سایه های رنگین کمان دیگر. цвета при помощи системы HLS требуется задать три параметра: برای تعریف رنگ CSS با استفاده از سیستم HLS، شما باید سه پارامتر را مشخص کنید:

• رنگ (در درجه) - جهت از مرکز دایره؛
• اشباع (در درصد) میزان رنگ مورد نیاز است؛
• روشنایی (در درصد).

به عنوان مثال، بنفش می تواند تعریف شود: hsl (315، 100٪، 45٪). HSL برای آزمایشها راحت تر است پس از بررسی چرخ رنگ، می توانید تقریبا تصور کنید، در حالی که مشاهده یک صفحه سبک، چه رنگ به یک عنصر خاص اختصاص داده است. HSLA - همان HLS، تنها با کانال آلفا: hsl (0، 100٪، 50، 0.6) - قرمز، شفاف کمی بیش از نصف است.

هگز

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . در CSS، رنگ ها را می توان با استفاده از نماد شانزدهدهم مشخص کرد، برای مثال، نارنجی با مقدار # FF4500 تعیین می شود .

برای درک بهتر آنچه که نمایندگی هگزادسیمال است، ارزشمند است به سیستم دهدهی عمیق تر بروید. این شماره از 0 تا 9 است. هنگامی که شما نیاز به یک عدد بیش از 9 دارید، یک بیت اضافه می کنید، و شما 10، و سپس 100، و در نتیجه. در سیستم هگزادسیمال، همه چیز دقیقا همان است، اما در آن بعد از 9 می رود A، سپس B و غیره به F همانند 15 در سیستم اعشاری است. سپس یک بیت اضافه می شود، و ما 10، برابر با 16 در حساب معمول است.

همانطور که در RGB، سایه ها در HEX نشان می دهند که چه میزان از رنگ های اولیه استفاده می کنند. آنها با کاما (رنگ: # FFD500) جدا نمی شوند. هر دو کاراکتر مقدار قرمز، سبز و آبی را مشخص می کند.

CSS. به عنوان یک قاعده، سیستم HEX در طول آزمایش ها استفاده نمی شود، زیرا رنگ های CSS دلخواه را انتخاب نمی کند . может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. جدول می تواند در این مورد کمک کند، اما اگر شما به طور مداوم با آن بررسی کنید، کار به تأخیر افتاده است. نمایندگی هگزادسیمال در هنگام حرکت یک الگو از یک ویرایشگر گرافیکی راحت تر است. پس از همه، بسیار آسان تر از آنکه تنها یک عدد از آن را کپی کنید، از جایگزین سه استفاده کنید.

کدام راه بهترین است؟

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