أكواد الألوان

تنسيقات الألوان

هذا القسم يعرض تنسيقات الألوان الشائعة في تصميم المواقع بناءً على اللون الأساسي. كل فئة تركز على لون مسيطر، يتم دمجه مع ألوان مكملة أو مشابهة، مرتبة من الفاتح إلى الداكن.

Red
  • #FFFFCC
  • #CCFFFF
  • #FFCCCC
  • #99CCCC
  • #FFCC99
  • #FFCCCC
  • #FF9999
  • #996699
  • #FFCCCC
  • #CC9999
  • #FFFFCC
  • #CCCC99
  • #FFCCCC
  • #FFFF99
  • #CCCCFF
  • #0099CC
  • #CCCCCC
  • #FF6666
  • #FF9966
  • #FF6666
  • #FFCCCC
  • #CC9966
  • #666666
  • #CC9999
  • #FF6666
  • #FFFF66
  • #99CC66
  • #CC3333
  • #CCCCCC
  • #003366
  • #993333
  • #CCCC00
  • #663366
  • #CCCC99
  • #666666
  • #CC9999
  • #FF6666
  • #FFFF00
  • #0066CC
  • #CC0033
  • #333333
  • #CCCC00
  • #336633
  • #990033
  • #FFCC99
  • #993333
  • #CC9966
  • #003300
  • #FF0033
  • #333399
  • #CCCC00
  • #CC0033
  • #000000
  • #003399
  • #000000
  • #99CC00
  • #CC0033
  • #999933
  • #993333
  • #333300
orange color
  • #FFCC99
  • #FFFF99
  • #99CC99
  • #FFCC99
  • #CCFF99
  • #CCCCCC
  • #FFCC99
  • #FFFFCC
  • #99CCFF
  • #FF9966
  • #FFFFCC
  • #99CC99
  • #FF9900
  • #FFFFCC
  • #336699
  • #CCCC33
  • #FFFF99
  • #CC9933
  • #996600
  • #FFCC33
  • #FFFFCC
  • #FFFFCC
  • #CC9933
  • #336666
  • #FF9900
  • #FFFF00
  • #0099CC
  • #99CC33
  • #FF9900
  • #FFCC00
  • #FF9933
  • #99CC33
  • #CC6699
  • #FF9933
  • #FFFF00
  • #3366CC
  • #FF9933
  • #FFFFCC
  • #009966
  • #FF6600
  • #FFFF66
  • #009966
  • #990033
  • #CCFF66
  • #FF9900
  • #FF9966
  • #996600
  • #CCCC00
  • #CC6600
  • #999999
  • #CCCC33
  • #CC6600
  • #CCCC33
  • #336699
  • #000000
  • #FF9933
  • #999966
  • #663300
  • #FF9933
  • #FFFF66
yellow
  • #FFFFCC
  • #CCFFFF
  • #FFCCCC
  • #FFFF00
  • #FFFFFF
  • #CCCC00
  • #99CCFF
  • #FFCC33
  • #FFFFCC
  • #FFFF33
  • #99CCFF
  • #CCCCCC
  • #FFFF00
  • #FFFFFF
  • #9933FF
  • #99CCFF
  • #FFCC33
  • #FFFF33
  • #FFCC00
  • #66CC00
  • #FFFF99
  • #FF9900
  • #FFFF00
  • #0099CC
  • #FFCC00
  • #0000CC
  • #FFFF99
  • #CC9999
  • #FFFFCC
  • #6666CC
  • #999933
  • #FFFFCC
  • #CC99CC
  • #CCCC00
  • #666600
  • #FFFF66
  • #FF9966
  • #FFFFCC
  • #99CC99
  • #FFCC33
  • #FFFFCC
  • #999966
  • #FFCC99
  • #FF6666
  • #FFFF66
  • #FFCC99
  • #999966
  • #FFFF00
  • #FFFF99
  • #99CC99
  • #666600
  • #999966
  • #FFFF99
  • #333333
  • #006633
  • #333300
  • #CCCC99
  • #006633
  • #663300
  • #CCCC66
Yellow Green
  • #33CC33
  • #6666CC
  • #FFFFFF
  • #CCCC33
  • #FFFFFF
  • #CCFFCC
  • #FFCC99
  • #CCFF99
  • #CCCCCC
  • #CCCC00
  • #999966
  • #FFFFCC
  • #CCCC33
  • #FFFFFF
  • #336699
  • #CCCC33
  • #999999
  • #CCFFFF
  • #00CC00
  • #0066CC
  • #99CCCC
  • #99CC33
  • #FF9900
  • #FFCC00
  • #99CC33
  • #CCCCFF
  • #663300
  • #CCCC33
  • #993399
  • #000000
  • #CC6600
  • #999999
  • #CCCC33
  • #CC9933
  • #FFFF99
  • #99CC99
  • #669933
  • #CCCC33
  • #663300
  • #99CC33
  • #CCCCCC
  • #000000
  • #CC6600
  • #CCCC33
  • #336699
  • #666600
  • #CCCC66
  • #CCFFCC
  • #333366
  • #99CC33
  • #336699
  • #666666
  • #99CC33
  • #003366
  • #003333
  • #99CC33
  • #999999
  • #996633
  • #FFFF99
  • #99CC66
Green
#009966
#FFFFFF
#FFFF00
#339933
#FFFFFF
#9933CC
#339933
#FFFFFF
#000000
#339933
#99CC00
#FFFFCC
#FFFFCC
#CCCC66
#336666
#99CC33
#FFFF66
#336600
#339933
#CC9900
#666666
#339966
#CCCCCC
#003366
#669933
#CCCCCC
#000000
#339933
#CCCCCC
#6699CC
#006633
#CCCC33
#CC9933
#339933
#666633
#CCCC66
#339933
#FFCC33
#336699
#006633
#669933
#99CC99
#336666
#996633
#CCCC33
#003300
#669933
#CCCC99
#006633
#990033
#FF9900
#006633
#333300
#CCCC99
#006633
#663300
#CCCC66
#993333
#CC9966
#003300
Turquoise
#CCFF99
#FFFFFF
#66CCCC
#339999
#FFFFFF
#99CCFF
#66CC99
#FFFFFF
#666699
#009999
#66CCCC
#CCFFFF
#66CCCC
#CCFF66
#FF99CC
#339999
#FFFF00
#336699
#CC9933
#339999
#FFCC33
#FFCC00
#009999
#CC3333
#669999
#CCCCCC
#CC99CC
#339999
#CCCCCC
#000000
#339999
#666699
#CCCCCC
#003333
#99CC99
#FFFFCC
#669999
#CCFFCC
#996699
#996699
#CCCC99
#669999
#999966
#CCCC99
#339999
#336666
#669999
#CCCC99
#999999
#003366
#669999
#663333
#339999
#CCCC66
#333333
#339999
#CCFFCC
#336666
#3399CC
#666666
blue
#FFFFCC
#CCFFFF
#FFCCCC
#99CCCC
#FFFFFF
#3399CC
#CCFFCC
#99CCCC
#FFFFCC
#CCCCFF
#FFFFFF
#99CCFF
#FFCC99
#FFFFCC
#99CCFF
#336699
#FFFFFF
#99CCCC
#99CCCC
#FFFFFF
#CCFF99
#CCCCFF
#FFFFCC
#CCFFFF
#99CCCC
#FFFFFF
#336699
#99CCFF
#CCFFFF
#6699CC
#99CC33
#FFFFFF
#3399CC
#0099CC
#FFFFCC
#666699
#CCCCCC
#003366
#99CCFF
#0099CC
#FFFFFF
#666666
#CCCCCC
#6699CC
#666666
#336699
#CCCC99
#003366
#3399CC
#003366
#CCCCCC
#6699CC
#006699
#000000
#003366
#CCCCCC
#006699
#999933
#336699
#333333
Blue Purple
#CCFFFF
#FFFFFF
#CCCCFF
#CCCCCC
#FFFFFF
#666699
#99CCFF
#FFFFFF
#333399
#6666CC
#FFFFFF
#FF9999
#9999FF
#FFCC33
#FFFFCC
#0099CC
#FFFFCC
#666699
#0000FF
#6699FF
#CCFFFF
#6666FF
#66CCFF
#CCFF66
#669999
#FFFFCC
#6666CC
#9999CC
#FF9999
#666699
#003399
#FFCCCC
#6699CC
#CC6666
#333399
#CCCC00
#000066
#6666FF
#CCCCCC
#003399
#CCFF99
#333333
#333366
#CC0033
#CCCCCC
#336699
#CCCC66
#333300
#003399
#FFFF99
#000000
#990066
#CCCC33
#003399
#CC3333
#000000
#003399
#333366
#999966
#333333
Purple
  • #FFFFCC
  • #FFFF99
  • #CCCCFF
  • #9999CC
  • #99CC99
  • #FFFFFF
  • #FFCCCC
  • #CCCCFF
  • #CCCC99
  • #9999CC
  • #FFFFCC
  • #FFCCCC
  • #FFCCCC
  • #FF99CC
  • #CCCCFF
  • #660066
  • #FFFFFF
  • #663333
  • #CCCC99
  • #333333
  • #9966CC
  • #CCCC00
  • #FF9966
  • #663399
  • #996699
  • #FFCCCC
  • #CC99CC
  • #996666
  • #CC99CC
  • #FFCCCC
  • #FFCC99
  • #FF9933
  • #663366
  • #333399
  • #CCCCFF
  • #CC99CC
  • #663366
  • #CCCCCC
  • #CC99CC
  • #996699
  • #9999CC
  • #CCCCFF
  • #CC9966
  • #999999
  • #663366
  • #330033
  • #666666
  • #669999
  • #CCCCCC
  • #999999
  • #663366
  • #FF33CC
  • #CCCC99
  • #663366
  • #663366
  • #999999
  • #CCCCFF
  • #999966
  • #993333
  • #330033
Purple
#FFCCCC
#FFFFFF
#99CC00
#FF99CC
#FFFFFF
#993366
#66CC99
#FFFFFF
#CC6699
#CC9999
#FFCCCC
#CC99CC
#FFCCCC
#FFFF99
#CCCCFF
#FFFF99
#993399
#FF99CC
#66CCCC
#CCFF66
#FF99CC
#FF99CC
#003399
#CCCC00
#FFCCCC
#FF99CC
#CCCCFF
#FF9999
#FFCCCC
#FF99CC
#669966
#CC6699
#FFCCFF
#CCCCCC
#CC99CC
#CC3399
#CC3399
#FFCC99
#FF6666
#FF3399
#CCCC99
#663366
#663366
#FFFFCC
#FFCCCC
#663366
#CCCCCC
#CC99CC
#990066
#FFCC00
#CC0033
#990066
#CCCCCC
#006699
#999900
#990033
#000000
#990066
#000000
#009966
تنسيقات الألوان حسب الانطباع
قد تبدو تنسيقات الألوان معقدة، لكنها ليست غامضة. كل لون يحتل موقعًا معينًا في مساحة الانطباع البصري، وبالتالي يمكن تقدير التأثير العام لأي مجموعة ألوان تقريبًا باستخدام مفاهيم الجمع والطرح. فعند استخدام ألوان ذات سطوع عالٍ معًا، ينتج إحساس ناعم ومضيء؛ بينما تُنتج الألوان المشبعة تأثيرًا جريئًا وقويًا. ومع ذلك، في التصميم العملي، يجب أن يأخذ المصمم في الحسبان أيضًا مفاهيم الضرب والقسمة – إذ يمكن أن تؤدي الألوان ذات السطوع والتباين المتشابه إلى انطباعات مختلفة كليًا حسب موقعها على عجلة الألوان. لهذا السبب، بالإضافة إلى التصنيفات حسب اللون، تم تصنيف هذه التنسيقات أيضًا بناءً على الانطباع العام لسهولة الرجوع إليها.
ناعمة، زاهية، لطيفة تؤدي الألوان ذات السطوع العالي عند دمجها معًا إلى إحساس ناعم، زاهي، ولطيف. ولتجنب التأثير الحاد الزائد، غالبًا ما يستخدم المصممون ألوانًا أمامية ذات سطوع منخفض للتوازن. كما يساعد ضبط المسافة بين الألوان على عجلة الألوان في تجنّب الشعور بالرتابة أو الملل البصري.
#FFFFCC
#CCFFFF
#FFCCCC
#FFCCCC
#FFFF99
#CCCCFF
#FF9966
#FF6666
#FFCCCC
#FFCC99
#CCFF99
#CCCCCC
#FFCCCC
#CCCCFF
#CCFFCC
#CCFFFF
#CCCCCC
#CCFF99
#FFCCCC
#FFFFFF
#99CC99
#99CCCC
#FFCC99
#FFCCCC
#CCCCFF
#FFCCCC
#CCFFFF
#FFCC99
#FFFFCC
#99CCCC
ناعمة، نظيفة، ومنعشة للحصول على انطباع ناعم، نظيف، ومنعش، تُعتبر الألوان المتجاورة بين الأزرق والأخضر على عجلة الألوان هي الأنسب، مع الأفضلية للألوان ذات السطوع العالي. من الجدير بالذكر أن معظم هذه التركيبات تتضمن اللون الأبيض. وفي التصميم العملي، يمكن استخدام ألوان تكميلية ذات سطوع عالٍ بدلاً من الأبيض لتحقيق نفس التأثير.
#CCFF99
#FFFFFF
#99CCFF
#99CCCC
#FFFFFF
#CCFF99
#CCFFCC
#FFFFFF
#66CCCC
#CCCCFF
#FFFFFF
#99CCCC
#CCFFCC
#99CCCC
#FFFFCC
#CCFFFF
#FFFFFF
#CCCCFF
#CCFFFF
#FFFFFF
#99CCFF
#66CCFF
#FFFFFF
#CCFFFF
#6699CC
#FFFFFF
#99CCFF
#CCCCFF
#FFFFFF
#99CCFF
لطيف، مرح، ممتع يتّسم نظام الألوان الذي يمنح انطباعًا لطيفًا، مرحًا، وممتعًا بتوزيع متوازن للدرجات اللونية، وتوازن بين الألوان الدافئة والباردة، وتشبع لوني عالٍ، بالإضافة إلى تباين لوني قوي بين العناصر.
#66CCCC
#CCFF66
#FF99CC
#FF9999
#FFFFFF
#FFCC99
#FF6666
#FFFF66
#99CC66
#666699
#FFFFFF
#FF9999
#99CC33
#FF9900
#FFCC00
#FF0033
#FFFFFF
#FF9966
#FF9900
#CCFF00
#CC3399
#99CC33
#FFFFFF
#FF6600
#993366
#CCCC33
#666633
#66CCCC
#FFFFFF
#666699
مرِح، مفعم بالفرح، ممتع مقارنةً بالثيم السابق، يتيح هذا النمط مساحة أوسع لاستخدام الألوان المتنوعة. أبرز تعديل في هذا السياق هو استبدال اللون الأبيض النقي بألوان منخفضة التشبع أو درجات رمادية خفيفة، وذلك لإضفاء مظهر أكثر نعومة وتفاعلية.
  • #CC9999
  • #FFFF99
  • #666699
  • #FF9900
  • #FFFF00
  • #0099CC
  • #CCCC99
  • #CC3399
  • #99CC00
  • #FF6666
  • #FFFF00
  • #3399CC
  • #CC6600
  • #999999
  • #CCCC33
  • #FF9933
  • #FFFFCC
  • #009933
  • #0099CC
  • #CCCCCC
  • #FF6666
  • #FF6600
  • #FFFF66
  • #009966
  • #CC6633
  • #FFCC99
  • #CC6600
  • #CC0066
  • #009999
  • #FFCC33
رياضي، نابض بالحيوية يجب أن تعزز الألوان المستوحاة من الطابع الرياضي الإحساس بالقوة والحماس، مع إيصال مفاهيم الصحة، الفرح، والنشاط. غالبًا ما تُستخدم الألوان ذات التشبع العالي وسطوع أقل قليلاً لتحقيق هذا الانطباع الديناميكي.
نابض، فاخر، ديناميكي لإنشاء انطباع فاخر، يجب أن تمتلئ الصفحة بألوان زاهية ذات تشبع مرتفع نسبيًا. ويمكن تعزيز هذا التأثير بشكل إضافي من خلال تقليل السطوع قليلاً، مما يضفي طابعًا أكثر عمقًا وأناقة.
#990066, #FFCC00, #CC0033
#FFCC33, #333399, #FF0033
#666699, #FFFF00, #FF0033
#FF0033, #006699, #FFFF33
#FFCC00, #009999, #CC3366
#FF0033, #CCCC00, #006699
#CCCC00, #FF9933, #663399
#FF9933, #FFFF00, #336699
#CC3333, #FFCCCC, #99CC00
#003399, #FFFF00, #FF6600
جامح، نشِط، ديناميكي يتميّز الأسلوب الجامح باستخدام ألوان منخفضة السطوع، غالبًا ما تتكامل مع لمسات من اللون الأسود. أما بقية الألوان النابضة فتكون ذات تشبع عالٍ وتباين قوي لتعزيز الإحساس بالحركة والطاقة.
فاخر، زاهي، أنثوي في التصاميم ذات الطابع الأنثوي، يتصدر اللون البنفسجي والفوشي المشهد، كما تُستخدم درجات الوردي والأخضر بشكل شائع. عادةً ما يتم دمج هذه الألوان في تركيبات عالية التشبع للحصول على تأثير بصري لافت وجذاب.
#FFFF99, #993399, #FF99CC
#FF6666, #FFFFFF, #339999
#FF99CC, #003399, #CCFF00
#66CC99, #FFFFFF, #CC6699
#CC3399, #FFCC99, #FF6666
#FFCCCC, #FFFFFF, #993366
#CC6699, #FFFF00, #666699
#CC6699, #99CC66, #663366
#FF33CC, #CCCC99, #663366
#CC3399, #FFCC99, #FF6666
تأملي، أنثوي، أنيق الشعور بالأناقة يحمل طابعًا فريدًا، وغالبًا ما يتطلب خفض تشبع الألوان للحصول على التأثير المطلوب. تُستخدم عادةً الألوان الواقعة بين الأزرق والأحمر، مع ضبط مستويات السطوع والتشبع لتحقيق تناغم بصري ناعم ومتوازن.
#CCCCCC, #CC99CC, #CC3399
#FFCCCC, #FF99CC, #CCCCFF
#CC3399, #9933CC, #CC99CC
#9999CC, #FFFFCC, #FFCCCC
#663366, #CCCCCC, #CC99CC
#FF9999, #FFCCCC, #FF99CC
#996666, #CC99CC, #FFCCCC
#CC9999, #CCCCCC, #FFCCCC
#FF9999, #996699, #FFCCCC
#996699, #FFCCCC, #CC99CC
نبيل، طبيعي، مستقر يُعبّر عن الطابع النبيل عادةً باستخدام درجات الأخضر المصفر منخفضة السطوع. ومن خلال خفض السطوع مع الحفاظ على توازن الألوان، تظهر الصفحة بمظهر أكثر استقرارًا وثباتًا.
#CCCC33, #FFFF99, #CC9933
#CC9966, #CCCC66, #669999
#FF9966, #996600, #CCCC00
#CCCC66, #660033, #CC6600
#CCCC00, #666600, #CCCCFF
#CC9933, #009999, #FFCC33
#999966, #CCCC99, #339999
#99CC99, #669933, #336633
#666633, #999933, #CC9966
#660000, #CC9900, #CCCC99
هادئ، طبيعي يُعد اللون الأخضر هو اللون الأساسي لنقل إحساس الهدوء والطبيعة. ومع ذلك، عند استخدامه كلون رئيسي في الصفحة، قد يعطي أحيانًا شعورًا مفرطًا بالهدوء أو السكون. لذلك، من الضروري إيلاء اهتمام خاص بتصميم الأنماط والتوزيع البصري للعناصر.
#FFFF99, #99CC99, #666600
#996633, #FFFF99, #99CC66
#006600, #66CC66, #CCFF99
#666600, #CCCC66, #CCFFCC
#669933, #CCCC33, #663300
#666633, #999933, #CC9966
#003300, #669933, #CCCC99
#006633, #663300, #CCCC66
#666600, #FFFFCC, #999999
#006633, #333300, #CCCC99
تقليدي، أنيق، راقٍ تتطلب التصاميم التقليدية عادةً تقليل تشبع الألوان، ويُعد اللون البني خيارًا مناسبًا جدًا لهذا الغرض. بالإضافة إلى ذلك، كما ذُكر سابقًا، يُستخدم اللون البنفسجي بكثرة للتعبير عن الأناقة والرقي.
#999933, #FFFFCC, #CC99CC
#CC9966, #666666, #CC9999
#CCCC99, #333333, #9966CC
#CCCC99, #666666, #CC9999
#996699, #CCCC99, #669999
#CC9966, #999999, #666666
#339966, #CCCCCC, #996699
#663366, #999999, #CCCCFF
#996699, #9999CC, #CCCCFF
#CCCC99, #999999, #663300
تقليدي، ثابت، كلاسيكي تعكس التصاميم التقليدية والثابتة والكلاسيكية طابعًا محافظًا في الانطباع العام. وعند اختيار الألوان، يجب إعطاء الأولوية للدرجات الدافئة ذات السطوع المنخفض، حيث أن هذا المزيج يتماشى مع الذوق الناضج والرصين.
#6699CC, #663366, #CCCC99
#990033, #CCFF66, #FF9900
#666699, #660033, #99CC99
#663300, #FF9933, #FFFF66
#990033, #006633, #CCCC00
#660033, #999933, #660099
#993366, #CCCC33, #666633
#996600, #CCCC66, #666600
#009933, #CC9900, #666666
#666633, #CCCC33, #CC3366
موثوق، ثابت، راقٍ تُضفي الألوان ذات السطوع والتشبع المنخفضين إحساسًا بالثبات والولاء. ولتفادي أن تبدو لوحة الألوان محافظة أو جامدة أو مملة أكثر من اللازم، من الضروري تحقيق توازن بين الألوان الدافئة والباردة، إلى جانب دمج تباين بين الدرجات الفاتحة والداكنة.
#FFFFCC, #CC9933, #336666
#336666, #996633, #CCCC33
#336633, #990033, #FFCC99
#333366, #669999, #996600
#993333, #CC9966, #003300
#336633, #CCCC99, #333366
#663300, #999933, #333333
#663366, #666666, #333366
#999900, #990033, #CC99CC
#333366, #990033, #CCCCCC
بسيط، نظيف، تقدّمي يُعبّر عن الألوان البسيطة والنظيفة باستخدام درجات الأزرق والأخضر، مع استخدام واسع للمساحات البيضاء. ولتعزيز الإحساس بالتقدّم والحداثة، يُفضل أن يكون الأزرق هو اللون المسيطر، مدعومًا بدرجات منخفضة التشبع أو حتى باللون الرمادي.
#CCCCCC, #FFFFFF, #666699
#CCFF66, #FFFFFF, #003366
#99CCFF, #FFFFFF, #336699
#CCCC33, #FFFFFF, #336699
#0099FF, #FFFFCC, #666699
#99CC33, #CCCCCC, #000000
#CCCCCC, #003366, #99CCFF
#0099CC, #CCFF66, #666666
#3399CC, #003366, #CCCCCC
#336699, #FFFF66, #6699FF
بسيط، أنيق، عصري يُعد اللون الرمادي من أكثر الألوان توازنًا، وهو من الدرجات الأساسية المستخدمة لإضفاء ملمس معدني أنيق. وللتعبير عن الأناقة والعصرية، يمكن استخدامه بشكل معتدل أو حتى على مساحات واسعة، ولكن يجب الانتباه إلى تصميم الأنماط وتكوين النسيج البصري لتحقيق أفضل تأثير.
#99CCFF, #FFFF66, #666666
#336666, #FFFFFF, #999999
#0099CC, #FFFFFF, #666666
#999999, #CCCCCC, #336666
#CCCCCC, #999999, #663366
#666666, #CCCCCC, #6699CC
#999999, #FFFFFF, #333366
#669999, #CCCCCC, #666666
#999999, #CCCCCC, #333333
#336699, #0099CC, #666666
حديث، أنيق، رائج تمثّل الألوان التي تعبّر عن التقدّم والحداثة في الأساس بدرجات الأزرق، مدعومة بتدرجات من اللون الرمادي. يتسم التصميم بسطوع متناسق وتدرجات لونية متقاربة، ما يخلق تأثيرًا بصريًا نظيفًا وبسيطًا (Minimal).
#333366, #99CC33, #336699
#999999, #003366, #669999
#003399, #CCFF99, #333333
#999933, #336699, #333333
#666666, #99CC33, #003366
#999999, #336699, #333333
#3366CC, #CCCC66, #333300
#6699CC, #006699, #000000
#003366, #CCCCCC, #006699
#000000, #999999, #003366