کد رنگ RGB و Hex در CSS

اگر تابحال تجربه طراحی وب ویا بطور کلی طراحی گرافیک را داشته باشید (طراحی وب برگرفته از طراحی گرافیک هست و از قوانین آن پیروی می‌کند) با رنگهای RGB هم سرو کار داشته‌اید. رنگهای RGB به طور عمده در نمایشگرهای دیجیتال و طراحی وب بکار می‌رود.

RGB چیست و چه معنی دارد؟

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

رنگهای RGB از نور ساخته می‌شوند که می‌توانند در طیف گسترده‌ای (بنا به شدت و ضعف نور) ساخته شوند. این رنگها در مانیتور شما بر اساس ترکیبی از ۳ رنگ قرمز – سبز و آبی ساخته می‌شوند. رنگی که در نهایت شدت خود ساخته شود (حداکثر روشنایی) سفید است و در مقابل آن در حداقل روشنایی نیز سیاه خواهد بود.

چطور از رنگ‌ های RGB استفاده کنیم؟

رنگ های RGB بیشترین استفاده را در صنعت طراحی وب و دستگاههای دیجیتال دارد. این نوع رنگ ۳ کانال (قرمز-سبز-آبی) دارد که دسته بندی گسترده ای از رنگها را شامل می‌شود. هر یک از این ۳ کانال یک مقدار را از 0 تا 255 و مستقل از یکدیگر می‌پذیرد. اگر هر ۳ کانال مقدار 0 داشته باشند، رنگ سیاه کامل خواهید داشت و همانطور که حدس می‌زنید اگر هر 3 کانال مقدار 255 را بپذیرند رنگ، سفید مطلق خواهد بود. با تعیین مقدار در هر یک از این کانال‌ها شما رنگین‌کمانی از رنگها را در اختیار خواهید داشت. برای درک بهتر می توانید در فتوشاپ یا توسط ویژگیهای مربوط به رنگ در CSS مقادیر RGB(0,0,0) را تغییر دهید تا گستره فراوان رنگهایی که می‌توانید در اختیار داشته باشید را ببینید.

رنگ Hex چیست ؟

رنگ های Hex روشی برای نمایش و ارائه رنگ ها توسط مقادیر ۶ عددی (Hexadecimal) است. رنگ Hexadecimal از فرمت RRGGBB# پیروی می‌کند که در آن RR رنگ قرمز، GG رنگ سبز و ‌‌BB رنگ آبی است. مقادیر عددی آن در بازه 00 تا FF قرار دارد تا شدت رنگ را مشخص کند.

برای مثال در رنگی با کد FF0000 # ما قرمز خالص را خواهیم داشت. چون قسمت RR یا قرمز در حداکثر شدت خود قرار دارد و دو قسمت دیگر یعنی GG (سبز) و BB (آبی)  در کمترین میزان شدت خود یعنی 00 قرار دارد.

چرا از رنگ های Hex استفاده می‌کنیم؟

رنگ های Hex راهی آسان و در عین حال کاملا دقیق برای دستیابی به هر رنگی است که در نظر داشته باشید. زمانی که نحوه عملکرد آن را درک کردید، به سادگی می‌توانید با تغییر مقادیر بخش‌های قرمز – سبز و آبی رنگ‌های دلخواه خود را بسازید. می‌شود گفت که این روش راحتترین راه برای دستیابی به طیف وسیعی از رنگ هاست که در عین حال دقت بالایی هم دارد.

جدول رنگ های RGB و Hex

در جدول زیر طیفی از رنگ های شناخته شده RGB و Hex در صنعت طراحی آورده شده است:

R,G,B (Decimal code)	#RRGGBB (Hex Code)	نام	رنگ
(128,0,0)	#800000	maroon
(139,0,0)	#8B0000	dark red
(165,42,42)	#A52A2A	brown
(178,34,34)	#B22222	firebrick
(220,20,60)	#DC143C	crimson
(255,0,0)	#FF0000	red
(255,99,71)	#FF6347	tomato
(255,127,80)	#FF7F50	coral
(205,92,92)	#CD5C5C	indian red
(240,128,128)	#F08080	light coral
(233,150,122)	#E9967A	dark salmon
(250,128,114)	#FA8072	salmon
(255,160,122)	#FFA07A	light salmon
(255,69,0)	#FF4500	orange red
(255,140,0)	#FF8C00	dark orange
(255,165,0)	#3FFA500	orange
(255,215,0)	#FFD700	gold
(184,134,11)	#B8860B	dark golden rod
(218,165,32)	#DAA520	golden rod
(238,232,170)	#EEE8AA	pale golden rod
(189,183,107)	#BDB76B	dark khaki
(240,230,140)	#F0E68C	khaki
(128,128,0)	#808000	olive
(255,255,0)	#FFFF00	yellow
(154,205,50)	#9ACD32	yellow green
(85,107,47)	#556B2F	dark olive green
(107,142,35)	#6B8E23	olive drab
(124,252,0)	#7CFC00	lawn green
(127,255,0)	#7FFF00	chart reuse
(173,255,47)	#ADFF2F	green yellow
(0,100,0)	#006400	dark green
(0,128,0)	#008000	green
(34,139,34)	#228B22	forest green
(0,255,0)	#00FF00	lime
(50,205,50)	#32CD32	lime green
(144,238,144)	#90EE90	light green
(152,251,152)	#98FB98	pale green
(143,188,143)	#8FBC8F	dark sea green
(0,250,154)	#00FA9A	medium spring green
(0,255,127)	#00FF7F	spring green
(46,139,87)	#2E8B57	sea green
(102,205,170)	#66CDAA	medium aqua marine
(60,179,113)	#3CB371	medium sea green
(32,178,170)	#20B2AA	light sea green
(47,79,79)	#2F4F4F	dark slate gray
(0,128,128)	#008080	teal
(0,139,139)	#008B8B	dark cyan
(0,255,255)	#00FFFF	aqua
(0,255,255)	#00FFFF	cyan
(224,255,255)	#E0FFFF	light cyan
(0,206,209)	#00CED1	dark turquoise
(64,224,208)	#40E0D0	turquoise
(72,209,204)	#48D1CC	medium turquoise
(175,238,238)	#AFEEEE	pale turquoise
(127,255,212)	#7FFFD4	aqua marine
(176,224,230)	#B0E0E6	powder blue
(95,158,160)	#5F9EA0	cadet blue
(70,130,180)	#4682B4	steel blue
(100,149,237)	#6495ED	corn flower blue
(0,191,255)	#00BFFF	deep sky blue
(30,144,255)	#1E90FF	dodger blue
(173,216,230)	#ADD8E6	light blue
(135,206,235)	#87CEEB	sky blue
(135,206,250)	#87CEFA	light sky blue
(25,25,112)	#191970	midnight blue
(0,0,128)	#000080	navy
(0,0,139)	#00008B	dark blue
(0,0,205)	#0000CD	medium blue
(0,0,255)	#0000FF	blue
(65,105,225)	#4169E1	royal blue
(138,43,226)	#8A2BE2	blue violet
(75,0,130)	#4B0082	indigo
(72,61,139)	#483D8B	dark slate blue
(106,90,205)	#6A5ACD	slate blue
(123,104,238)	#7B68EE	medium slate blue
(147,112,219)	#9370DB	medium purple
(139,0,139)	#8B008B	dark magenta
(148,0,211)	#9400D3	dark violet
(153,50,204)	#9932CC	dark orchid
(186,85,211)	#BA55D3	medium orchid
(128,0,128)	#800080	purple
(216,191,216)	#D8BFD8	thistle
(221,160,221)	#DDA0DD	plum
(238,130,238)	#EE82EE	violet
(255,0,255)	#FF00FF	magenta / fuchsia
(218,112,214)	#DA70D6	orchid
(199,21,133)	#C71585	medium violet red
(219,112,147)	#DB7093	pale violet red
(255,20,147)	#FF1493	deep pink
(255,105,180)	#FF69B4	hot pink
(255,182,193)	#FFB6C1	light pink
(255,192,203)	#FFC0CB	pink
(250,235,215)	#FAEBD7	antique white
(245,245,220)	#F5F5DC	beige
(255,228,196)	#FFE4C4	bisque
(255,235,205)	#FFEBCD	blanched almond
(245,222,179)	#F5DEB3	wheat
(255,248,220)	#FFF8DC	corn silk
(255,250,205)	#FFFACD	lemon chiffon
(250,250,210)	#FAFAD2	light golden rod yellow
(255,255,224)	#FFFFE0	light yellow
(139,69,19)	#8B4513	saddle brown
(160,82,45)	#A0522D	sienna
(210,105,30)	#D2691E	chocolate
(205,133,63)	#CD853F	peru
(244,164,96)	#F4A460	sandy brown
(222,184,135)	#DEB887	burly wood
(210,180,140)	#D2B48C	tan
(188,143,143)	#BC8F8F	rosy brown
(255,228,181)	#FFE4B5	moccasin
(255,222,173)	#FFDEAD	navajo white
(255,218,185)	#FFDAB9	peach puff
(255,228,225)	#FFE4E1	misty rose
(255,240,245)	#FFF0F5	lavender blush
(250,240,230)	#FAF0E6	linen
(253,245,230)	#FDF5E6	old lace
(255,239,213)	#FFEFD5	papaya whip
(255,245,238)	#FFF5EE	sea shell
slate gray	#F5FFFA	mint cream
(112,128,144)	#708090	slate gray
(119,136,153)	#778899	light slate gray
(176,196,222)	#B0C4DE	light steel blue
(230,230,250)	#E6E6FA	lavender
(255,250,240)	#FFFAF0	floral white
(240,248,255)	#F0F8FF	alice blue
(248,248,255)	#F8F8FF	ghost white
(240,255,240)	#F0FFF0	honeydew
(255,255,240)	#FFFFF0	ivory
(240,255,255)	#F0FFFF	azure
(255,250,250)	#FFFAFA	snow
(0,0,0)	#000000	black
(105,105,105)	#696969	dim gray / dim grey
(128,128,128)	#808080	gray / grey
(169,169,169)	#A9A9A9	dark gray / dark grey
(192,192,192)	#C0C0C0	silver
(211,211,211)	#D3D3D3	light gray / light grey
(220,220,220)	#DCDCDC	gainsboro
(245,245,245)	#F5F5F5	white smoke
(255,255,255)	#FFFFFF	white