اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › مقالات › کد رنگ RGB و Hex در CSS

کد رنگ RGB و Hex در CSS

راهنمای رنگ های rgb و hex

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

آنچه در ادامه می‌خوانید:
1. RGB چیست و چه معنی دارد؟
2. چطور از رنگ‌ های RGB استفاده کنیم؟
3. رنگ Hex چیست ؟
4. چرا از رنگ های Hex استفاده می‌کنیم؟
5. جدول رنگ های RGB و Hex

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

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

تفاوت rgb و cmyk

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

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

rgb چیست

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

رنگ Hex چیست ؟

رنگ 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)#800000maroon
(139,0,0)#8B0000dark red
(165,42,42)#A52A2Abrown
(178,34,34)#B22222firebrick
(220,20,60)#DC143Ccrimson
(255,0,0)#FF0000red
(255,99,71)#FF6347tomato
(255,127,80)#FF7F50coral
(205,92,92)#CD5C5Cindian red
(240,128,128)#F08080light coral
(233,150,122)#E9967Adark salmon
(250,128,114)#FA8072salmon
(255,160,122)#FFA07Alight salmon
(255,69,0)#FF4500orange red
(255,140,0)#FF8C00dark orange
(255,165,0)#3FFA500orange
(255,215,0)#FFD700gold
(184,134,11)#B8860Bdark golden rod
(218,165,32)#DAA520golden rod
(238,232,170)#EEE8AApale golden rod
(189,183,107)#BDB76Bdark khaki
(240,230,140)#F0E68Ckhaki
(128,128,0)#808000olive
(255,255,0)#FFFF00yellow
(154,205,50)#9ACD32yellow green
(85,107,47)#556B2Fdark olive green
(107,142,35)#6B8E23olive drab
(124,252,0)#7CFC00lawn green
(127,255,0)#7FFF00chart reuse
(173,255,47)#ADFF2Fgreen yellow
(0,100,0)#006400dark green
(0,128,0)#008000green
(34,139,34)#228B22forest green
(0,255,0)#00FF00lime
(50,205,50)#32CD32lime green
(144,238,144)#90EE90light green
(152,251,152)#98FB98pale green
(143,188,143)#8FBC8Fdark sea green
(0,250,154)#00FA9Amedium spring green
(0,255,127)#00FF7Fspring green
(46,139,87)#2E8B57sea green
(102,205,170)#66CDAAmedium aqua marine
(60,179,113)#3CB371medium sea green
(32,178,170)#20B2AAlight sea green
(47,79,79)#2F4F4Fdark slate gray
(0,128,128)#008080teal
(0,139,139)#008B8Bdark cyan
(0,255,255)#00FFFFaqua
(0,255,255)#00FFFFcyan
(224,255,255)#E0FFFFlight cyan
(0,206,209)#00CED1dark turquoise
(64,224,208)#40E0D0turquoise
(72,209,204)#48D1CCmedium turquoise
(175,238,238)#AFEEEEpale turquoise
(127,255,212)#7FFFD4aqua marine
(176,224,230)#B0E0E6powder blue
(95,158,160)#5F9EA0cadet blue
(70,130,180)#4682B4steel blue
(100,149,237)#6495EDcorn flower blue
(0,191,255)#00BFFFdeep sky blue
(30,144,255)#1E90FFdodger blue
(173,216,230)#ADD8E6light blue
(135,206,235)#87CEEBsky blue
(135,206,250)#87CEFAlight sky blue
(25,25,112)#191970midnight blue
(0,0,128)#000080navy
(0,0,139)#00008Bdark blue
(0,0,205)#0000CDmedium blue
(0,0,255)#0000FFblue
(65,105,225)#4169E1royal blue
(138,43,226)#8A2BE2blue violet
(75,0,130)#4B0082indigo
(72,61,139)#483D8Bdark slate blue
(106,90,205)#6A5ACDslate blue
(123,104,238)#7B68EEmedium slate blue
(147,112,219)#9370DBmedium purple
(139,0,139)#8B008Bdark magenta
(148,0,211)#9400D3dark violet
(153,50,204)#9932CCdark orchid
(186,85,211)#BA55D3medium orchid
(128,0,128)#800080purple
(216,191,216)#D8BFD8thistle
(221,160,221)#DDA0DDplum
(238,130,238)#EE82EEviolet
(255,0,255)#FF00FFmagenta / fuchsia
(218,112,214)#DA70D6orchid
(199,21,133)#C71585medium violet red
(219,112,147)#DB7093pale violet red
(255,20,147)#FF1493deep pink
(255,105,180)#FF69B4hot pink
(255,182,193)#FFB6C1light pink
(255,192,203)#FFC0CBpink
(250,235,215)#FAEBD7antique white
(245,245,220)#F5F5DCbeige
(255,228,196)#FFE4C4bisque
(255,235,205)#FFEBCDblanched almond
(245,222,179)#F5DEB3wheat
(255,248,220)#FFF8DCcorn silk
(255,250,205)#FFFACDlemon chiffon
(250,250,210)#FAFAD2light golden rod yellow
(255,255,224)#FFFFE0light yellow
(139,69,19)#8B4513saddle brown
(160,82,45)#A0522Dsienna
(210,105,30)#D2691Echocolate
(205,133,63)#CD853Fperu
(244,164,96)#F4A460sandy brown
(222,184,135)#DEB887burly wood
(210,180,140)#D2B48Ctan
(188,143,143)#BC8F8Frosy brown
(255,228,181)#FFE4B5moccasin
(255,222,173)#FFDEADnavajo white
(255,218,185)#FFDAB9peach puff
(255,228,225)#FFE4E1misty rose
(255,240,245)#FFF0F5lavender blush
(250,240,230)#FAF0E6linen
(253,245,230)#FDF5E6old lace
(255,239,213)#FFEFD5papaya whip
(255,245,238)#FFF5EEsea shell
slate gray#F5FFFAmint cream
(112,128,144)#708090slate gray
(119,136,153)#778899light slate gray
(176,196,222)#B0C4DElight steel blue
(230,230,250)#E6E6FAlavender
(255,250,240)#FFFAF0floral white
(240,248,255)#F0F8FFalice blue
(248,248,255)#F8F8FFghost white
(240,255,240)#F0FFF0honeydew
(255,255,240)#FFFFF0ivory
(240,255,255)#F0FFFFazure
(255,250,250)#FFFAFAsnow
(0,0,0)#000000black
(105,105,105)#696969dim gray / dim grey
(128,128,128)#808080gray / grey
(169,169,169)#A9A9A9dark gray / dark grey
(192,192,192)#C0C0C0silver
(211,211,211)#D3D3D3light gray / light grey
(220,220,220)#DCDCDCgainsboro
(245,245,245)#F5F5F5white smoke
(255,255,255)#FFFFFFwhite

پست قبلی

آموزش ریسپانسیو کردن تصاویر در صفحات وب

دیدگاه ها 12

  1. ناصر می‌گوید:
    1 سال قبل

    عالی ممنون

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      1 سال قبل

      خواهش میکنم، موفق باشید.

      پاسخ
  2. سید حسن می‌گوید:
    12 ماه قبل

    عالی بود فقط اگه میشد دانلود کرد عالی بود

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      12 ماه قبل

      ممنونم. موفق باشید

      پاسخ
      • م . م می‌گوید:
        12 ماه قبل

        چااااکر

      • سهیل اصلی فرد می‌گوید:
        11 ماه قبل

        ممنونم. موفق باشید

    • اژدهایی با قلب شکلاتی می‌گوید:
      11 ماه قبل

      اره

      پاسخ
  3. اژدهایی با قلب شکلاتی می‌گوید:
    11 ماه قبل

    سپاسگزارم عالی بود.
    این کد ها رو در بازی squirrel simulator online 2 هم میشه استفاده کرد که به شرح زیر است:
    متن مورد نظر
    به این صورت.
    روزتون بخیر.

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      11 ماه قبل

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

      پاسخ
      • اژدهایی با قلب شکلاتی می‌گوید:
        10 ماه قبل

        سپاسگزارم.

  4. پریا مرادی می‌گوید:
    4 ماه قبل

    بسیار عالی.سپاس

    پاسخ
  5. شیرازی می‌گوید:
    4 ماه قبل

    سپاس فراوان 🙏🙏

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

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

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن