🎨 ألوان فلات Flat Colors مع أكواد HEX جاهزة للنسخ

مجموعة مختارة من ألوان Flat المناسبة لتصميم المواقع والتطبيقات والقوالب، مع معاينة مباشرة لكل لون وزر سريع لنسخ كود HEX واستخدامه في CSS أو HTML.

اختيار الألوان المناسبة من أهم خطوات تصميم أي واجهة، سواء كنت تعمل على موقع إلكتروني، تطبيق، قالب بلوجر أو صفحة هبوط.

في هذه الصفحة ستجد مجموعة كبيرة من ألوان Flat مقسمة حسب الفئة اللونية، ويمكنك مشاهدة اللون مباشرة ثم نسخ كوده بنقرة واحدة.

🔢 ما هو كود HEX؟

كود HEX هو طريقة لتمثيل الألوان رقميًا، ويبدأ عادة بعلامة # متبوعة بستة أحرف أو أرقام تمثل مكونات اللون الأحمر والأخضر والأزرق.

🧩 كيف نقرأ كود اللون؟

لنأخذ اللون التالي كمثال:

# 34 98 DB

يتكون الكود من ثلاثة أجزاء رئيسية: الأحمر Red، الأخضر Green، والأزرق Blue. ويمكنك استخدام الكود مباشرة داخل CSS لتغيير لون النصوص أو الخلفيات أو الأزرار.

🔵 الألوان الزرقاء والسماوية

#5C97BF

#4B77BE

#1F3A93

#2574A9

#67809F

#34495E

#3A539B

#1E8BC3

#6BB9F0

#22313F

#336E7B

#19B5FE

#89C4F4

#2C3E50

#3498DB

#22A7F0

#94E0EE

#52B3D9

#59ABE3

#C5EFF7

🟢 الألوان الخضراء والتركوازية

#26A65B

#1E824C

#00B16A

#2ABB9B

#4DAF7C

#03A678

#26C281

#019875

#3FC380

#16A085

#2ECC71

#C8F7C5

#049372

#36D7B7

#66CC99

#1BA39C

#1BBC9B

#65C6BB

⚪ الألوان الرمادية والمحايدة

#BFBFBF

#ABB7B7

#DADFE1

#95A5A6

#C5DCE2

#BDC3C7

#EEEEEE

#D2D7D3

#F0E2C5

🟠 الألوان البرتقالية والصفراء

#EB9532

#E67E22

#F27935

#F9BF3B

#F7CA18

#F9690E

#F39C12

#D35400

#F4D03F

#F5AB35

#EB974E

#F2784B

#F4B350

#E87E04

🔴 الألوان الحمراء والوردية

#E74C3C

#CF000F

#C0392B

#D64541

#EF4836

#96281B

#D91E18

#E26A6A

#FF0000

#F22613

#E08283

🟣 الألوان البنفسجية

#9B59B6

#8E44AD

#BE90D4

#BF55EC

#9A12B3

#913D88

#722D6A

#740A4E

💻 مثال على استخدام اللون في CSS

بعد نسخ كود اللون يمكنك استخدامه مباشرة داخل خصائص CSS.

.my-button {
  background-color: #3498DB;
  color: #FFFFFF;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
}

في المثال السابق تم استخدام اللون #3498DB كلون لخلفية الزر، بينما تم استخدام اللون الأبيض للنص.

💡 نصائح عند اختيار ألوان التصميم

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

✅ تم نسخ كود اللون

السراي ويب