یادداشت‌ها

»

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

همانطور که می‌دانید، همه‌ی رنگ‌ها از ترکیب سه رنگ اصلی Red, Green, Blue (قرمز و سبز و آبی) تولید می‌شود که به اختصار RGB نامیده می‌شود و برای تولید هر رنگی، کافی است که درصدی از آنها را ترکیب کنیم. معمولا میزان شدت هریک از رنگ‌های سه‌گانه فوق را بین 0 تا 255 (یا 00 تا FF در مبنای 16) تعریف می‌کنند و لذا یک رنگ را به یکی از دو صورت زیر، در استایل صفحات می‌توانیم تعریف کنیم:

color: #4A3BFF;
color: rgb(74, 59, 255);

در نسخه سوم سی اس اس (css3) امکان تعریف میزان شفافیت یک رنگ در هنگام تعریفش فراهم شده است. به این منظور لازم است بجای rgb از rgba استفاده کنید که پارامتر چهارم عددی بین صفر تا یک بوده و میزان شفافیت alpha transparency را معین می‌کند:

color: rgba(74, 59, 255, 0.75);

نکته: معیار RGB بیشتر جهت تعیین رنگ برای نمایشگرها بکار می‌رود اما برای چاپ، معمولا معیار دیگری به نام CYMK استفاده می‌شود که ترکیب چهار رنگ فیروزه‌ای، زرد، بنفش و سیاه است. لذا در صورتی که با نرم افزار فوتوشاپ، کاری را وب آماده می‌کنید، لازم است color mode آن را روی RGB و اگر برای چاپ (مثلا پوستر یا جلد کتاب) طرحی را آماده می‌کنید، بهتر است color mode آن را روی CYMK قرار دهید تا رنگ نهایی چاپ شده، به آنچه روی مانیتور می‌بینید، نزدیکتر باشد.

رنگ‌ها و جاوا اسکریپت و پی‌اچ‌پی

با کمک دو تابع JAVAScript زیر می‌توان مقدار rgb و hex را به هم تبدیل کرد. ذکر این توابع به جهت معرفی توابع موردنیاز جهت کار با رنگ (مثلا تبدیل مبنای 16 به 10 و برعکس) انجام شده است:

function rgb2hex(a, b, c) {
  return "#" + ((256 + a << 8 | b) << 8 | c).toString(16).slice(1)
}
function hex2rgb(a) {
  var a = '0x' + a.slice(1).replace(a.length > 4 ? a : /./g, '$&$&') | 0;
  return [a >> 16, a >> 8 & 255, a & 255]
}

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

تولید پلت رنگ

زمانی که در فرم بخواهیم از کاربر یک رنگ را به عنوان ورودی بخواهیم، نیاز است که یک پلت رنگ تولید کرده و در اختیار وی قرار دهیم. به اینگونه نرم افزارها و برنامه‌ها اصطلاحا Color picker گفته می‌شود که با جستجوی آن عبارت، با حجم بالایی از برنامه‌های آماد در این زمینه مواجه می‌شوید.
شالوده کلی این برنامه‌ها اینچنین است که با کمک 3 حلقه for برای شما یک جدول (یا تعدادی div شناور در نمایی شبیه جدول) تولید می‌کنند و با کلیک بر روی یک رنگ، رنگ بکگراند آن td یا div خوانده شده و در input قرار می‌گیرد و جدول رنگ‌ها بسته می‌شود.

تولید رنگ تصادفی

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

echo 'color:rgb(', mt_rand(0, 255), ', ', mt_rand(0, 255), ', ', mt_rand(0, 255), ')';

در جاوا اسکریپت نیز این کار به سادگی میسر است که 5 نمونه آن را پاول اریش در این مطلب آورده است.

تولید رنگ متناسب با زمان

در یکی از پروژه‌هایی که انجام دادم، دوست داشتم که رنگ کاراکتر مربع (◙) کنار لیست مطالب، با توجه به میزان داغ و جدید بودن قرمز باشد! یعنی وقتی مطلبی تازه درج شده، قرمز خیلی پررنگ و با مرور زمان (مثلا طی یک ماه) از شدت رنگ آن کاسته و نهایتا به رنگ مثلا سفید برسد.
در اینجا با توجه به صحبتی که در ابتدای مطلب مورد تولید رنگ شد و همچنین با کمک گرفتن از ریاضی می‌توان به این مقصود دست یافت.
برای طیف رنگ قرمز (از قرمز خالی تا سفید) کافی است که R برابر 255 باشد و دو رنگ دیگر بین 0 تا 255 تغییر کنند منتها با هم مساوی باشند یعنی Green و Blue با هم تغییر کنند تا به سیاهی نزند.
اگر ما بخواهیم این مساله را با php حل کنیم، لازم است از تابع base_convert استفاده کنیم و عددی که بین 0 تا 255 برای Green و Blue درنظر گرفته‌ایم را ابتدا به مبنای شانزده ببریم و سپس استفاده کنیم.
برای تغییر بر حسب زمان، لازم است ضمن ثابت نگه داشتن Red روی 255، طی یک ماه مقدار Green و Blue از 0 (قرمز خالص) به 255 (سفید) برسد.
برای این کار می‌توانید از توابع مختلف ریاضی استفاده کنید (مثلا من تابع هموگرافیک و نمایی را ترجیح می‌دهم) اما شما می‌توانید از توابع ساده خطی استفاده کنید:
اگر زمان را محور x و شدت رنگ را محور y در نظر بگیریم، شما معادله خطی را می‌خواهید که از x=0, y=0 و نقطه x=30*24, y=255 بگذرد.
(البته من زمان رو برحسب ساعت گرفتم، شما می‌تونید بر حسب مقداری کمتر یا بیشتر بگیرید اما با توجه به مقدار محور y همین مقدار ساعت برای مثال شما مناسب است. بله اگر قرار بود طی یک روز از قرمز به سفید برسد، خب از دقیقه استفاده می‌کردیم)
خب معادله ما به صورت y=x*255/720 در می‌آید. یعنی شما اختلاف ساعت الآن را با ساعت درج آن مورد حساب می‌کنید و به عنوان x در معادله بالا قرار می‌دهید تا مقدار رنگ که بین 0 تا 255 است به دست آید. اگر مطلبی تازه باشد (x=0) آنگاه مقدار y هم صفر می‌شود و لذا R=255 و G=B=0 می‌شود و این یعنی قرمز خالص. اگر هم یک ماه گذشته باشد (720 ساعت) آنگاه این اختلاف عدد 255 را برای Green و Blue به دست می‌دهد که در نتیجه به رنگ سفید منجر می‌شود.
یک مثال ساده برای توضیح فوق:

//    تاریخ درج مطلب در لیست مثلا 1234067890 به تابع ارسال شده
function calculateColor( $list_item_date )
{
    $now = time();    //    زمان فعلی مثلا 1234657890
    $hour_diff = round( ($now-$list_item_date)/3600 );
    if($hour_diff >= 720)
        return '#FFF';    //    سفید
    if($hour_diff < 0)
        return '#F00';    //    قرمز کامل
    return '#FF'.str_repeat(str_pad(base_convert(round($hour_diff*255/720), 10, 16), 2, '0', STR_PAD_LEFT), 2);
}

---

یادداشت‌های مرتبط

1. رنگ ها و طراحی وب
2. تولید کپچای ضد گلوله!