هنگام طراحی صفحات وب مواقع بسیاری پیش می آید که بخواهید رنگ متن یا پس زمینه ی بخشی از صفحه را تغییر دهید و سرو کارتان با اعداد و ارقام خواهد بود.
در اینجا با استفاده از جاوا اسکریپت مبدلی برای تبدیل فرمت رنگی RGB به معادل هگزادسیمال آن و برعکس خواهین ساخت.
در این فرمت مقدار هر رنگ بین ۰ تا ۲۵۵ می باشد پس هر رنگ را می توان با ۲ رقم در مبنای ۱۶ نمایش داد، برای تبدیل اعداد به مبنای ۱۶ از تابع toString استفاده می کنیم و مقدار ورودی تابع را ۱۶ قرار می دهیم یعنی همان مبنای مورد نظر ما.


number.toString(16);

پس براحتی می توانیم تابع خود را به این صورت بنویسیم:


function rgbtohex(r, g, b){
	 red = r.toString(16);
	 green = g.toString(16);
	 blue = b.toString(16);
	 return '#'+red+green+blue;
}

کار تمام است ولی اگر بخواهیم رنگ 9, 255, 255 را بکمک این تابع به معادل هگز تبدیل کنیم مقدار 9ffff# را خواهیم داشت که مقداری صحیح نیست، زیرا همانگونه که گفتیم هر رنگ را می بایست با دو رقم در مبنای ۱۶ نمایش دهیم ولی در مثال حاضر عدد ۹ را با یک رقم ۹ نمایش می دهد، پس برای جلوگیری از این خطا باید مقادیر را بررسی کنیم و درصورتی که تک رقمی باشند به ابتدای آنها یک صفر بیافزاییم. بصور زیر:


function rgbtohex(r, g, b){
	 red = r.toString(16);
	 green = g.toString(16);
	 blue = b.toString(16);
	 if(red.length == 1)  red = '0'+red;
	 if(green.length == 1)  green = '0'+green;
	 if(blue.length == 1)  blue = '0'+blue;
	 return '#'+red+green+blue;
}

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


function hextorgb(hex){
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        red: parseInt(result[1], 16),
        green: parseInt(result[2], 16),
        blue: parseInt(result[3], 16)
    } : null;	
}

سطر اول تابع همان عبارت منظمی است که از آن حرف زدیم، ^/ نشان دهنده آغاز رشته می باشد و همچنین /$ نشان دهنده پایان رشته می باشد، یعنی هر رشته ای با ^/ آغاز و با /$ خاتمه می یابد. پس از آغاز رشته علامت # همان علامت ابتدای کد هگرمی باشد که در تابع اول دیدیم و پس از آن سه پرانتر مشاهده می کنید که هرسه به فرم ([a-f\d]{2}) می باشند، در اینجا چند چی مهم نهفته است:

۱- در عبارات منظم محتوای درون پرانتز ها بعنوان مقادیر درخواستی ما محسوب می شوند، پس ما در اینجا سه مقدار بازگشتی می خواهیم.

۲- بوسیله براکت گذاری می توانیم کاراکتر های مجاز را مشخص کنیم، مثلا در مثال حاضر a-f بیانگر این است که کاراکتر های a تا f مجازند و همچنین d\ بیانگر این است که اعداد نیز قایل قبول هستند.

۳- می توان تعداد تکرار کاراکتر ها را نیز مشخص کرد و این همان شماره است که پس از براکت ها مشاهده می کنید. {2}

پس درکل رشته ما از یک # و سه بخش دو کاراکتری تشکیل شده است، بخش اول رنگ قرمز، بخش دوم رنگ سبز و رنگ سوم آبی.
در انتها نیز این عبارت منظم را بروی مقدار هگز ورودی اعمال می کنیم تا مقادیر مورد نظرمان را بدست بیاوریم.
در سطر های بعدی نیز مقادیر باگشتی از عبارت منظم را با استفاده از تابع parseInt به مقدار عددی تبدیل کرده و بر میگردانیم.
لینک زیر نیز مثالی از استفاده از این توابع می باشد.
ابزار های رنگ آمیزی در وب

برای کسب اطلاعات بیشتر درمورد عبارات منظم در جاوااسکریپت هم سری به لینک زیر بزنید:
W3Schools