كيف أحوّل HEX إلى RGB؟

الصق كود HEX في المحول وانسخ قيمة RGB. ويدويًا، قسّم الكود إلى ثلاثة أزواج وحوّل كلًّا منها من الأساس 16 إلى العشري: يصبح #2a9d8f هكذا 42 و157 و143.

كيف أحوّل RGB إلى HEX؟

اكتب قيمة RGB، مثل rgb(42, 157, 143) أو 42, 157, 143 فقط، وانسخ HEX. تصبح كل قناة خانتين ست عشريتين: 42 تصبح 2a، و157 تصبح 9d، و143 تصبح 8f.

ما الفرق بين HSL وHSV؟

كلاهما يستخدم زاوية لدرجة اللون، لكن إضاءة HSL تمتد من الأسود مرورًا باللون النقي إلى الأبيض، بينما تمتد قيمة HSV من الأسود إلى اللون النقي فقط. تفهم CSS صيغة HSL؛ أما HSV (وتُسمى أيضًا HSB) فتُستخدم في منتقيات الألوان بتطبيقات التصميم.

ما هو OKLCH ولماذا أستخدمه؟

يصف OKLCH اللون بالإضاءة المُدرَكة والصفاء ودرجة اللون. وعلى عكس HSL، تبدو الإضاءة نفسها متساوية لكل درجة لون، فتبقى السلالم والتباين قابلة للتوقع عند تغيير درجة اللون. كل المتصفحات الحالية تدعم oklch() في CSS.

هل يمكنني تحويل الألوان مع الشفافية؟

نعم. أدخل HEX من ثماني خانات، أو rgb() مع شفافية بعد شرطة مائلة، أو rgba() أو hsla()، أو استخدم منزلق الشفافية. عندها تتضمن كل صيغ CSS قيمة الشفافية.

هل قيمة CMYK دقيقة للطباعة؟

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

كم عدد أسماء الألوان في CSS؟

تعرّف CSS ‏148 لونًا مسمى، منها rebeccapurple والتهجئتان grey وgray. يقبلها المحول كلها ويعرض أقرب اسم لأي لون تُدخله.

محول الألوان: HEX وRGB وHSL وCMYK وOKLCH

Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH. كل شيء يعمل محليًا — لا يُرفع أي شيء.

الإدخال: HEX · RGB · HSL · HSV · CMYK · OKLCH · CSS names
الإخراج: HEX · RGB · HSL · HSV · CMYK · OKLCH

الصيغ

#2a9d8f

أقرب اسم CSS:

العتامة 100%

الشفافية100%

HEX#2a9d8f
HEX8#2a9d8fff
RGBrgb(42 157 143)
RGB(A)rgb(42, 157, 143)
HSLhsl(172.7 57.8% 39%)
HSV / HSBhsv(172.7, 73.2%, 61.6%)
HWBhwb(172.7 16.5% 38.4%)
CMYKcmyk(73.2%, 0%, 8.9%, 38.4%)
OKLCHoklch(63.04% 0.1013 183.03)
OKLaboklab(63.04% -0.1012 -0.0054)

يستخدم CMYK المعادلة القياسية للأجهزة. يعتمد اللون المطبوع على الورق وملف الطابعة.

التنويعات

انقر للاستخدام

درجات فاتحة (نحو الأبيض)

درجات داكنة (نحو الأسود)

درجات مطفأة (نحو الرمادي)

مكمل

#2a9d8f

#9d2a38

متجاور

#2a9d56

#2a9d8f

#2a729d

ثلاثي

#2a9d8f

#8f2a9d

#9d8f2a

مكمل منقسم

#2a9d8f

#9d2a72

#9d552a

رباعي

#2a9d8f

#552a9d

#9d2a38

#729d2a

حوّل أي لون إلى كل الصيغ

الصق لونًا بأي صيغة فيعرضه محول الألوان هذا بكل الصيغ الأخرى دفعة واحدة: HEX وRGB وHSL وHSV/HSB وHWB وCMYK وOKLCH وOKLab وأقرب اسم لون في CSS. تُحفظ الشفافية في كل الصيغ، وتحت القيم تجد الدرجات الفاتحة والداكنة والمطفأة للون، إضافةً إلى التناسقات المكملة والمتجاورة والثلاثية، وكل منها على بُعد نقرة من أن يصبح المدخل الجديد. يُحسب كل شيء في متصفحك أثناء الكتابة.

كيف تحوّل HEX إلى RGB (أو أي صيغة أخرى)

اكتب لونًا أو الصقه في الحقل: #2a9d8f أو rgb(42 157 143) أو hsl(173 58% 39%) أو cmyk(73%, 0%, 9%, 38%) أو oklch(62% 0.1 183) أو اسمًا مثل teal. أو اختر واحدًا بمنتقي الألوان.
تتحدث كل الصيغ فورًا. اضغط زر النسخ بجانب الصيغة التي تحتاجها.
اسحب منزلق الشفافية (Alpha) لجعل اللون نصف شفاف؛ ويتبعه HEX ذو الخانات الثماني ودوال CSS التي تدعم الشفافية.
انقر أي عينة من الدرجات الفاتحة أو الداكنة أو المطفأة أو التناسقات لتجعلها اللون الجديد وتواصل الاستكشاف.

الصيغ، ومتى تستخدم كلًّا منها

HEX: #rrggbb، أو #rrggbbaa مع الشفافية. الشكل المختصر #rgb يكرر كل خانة. الصيغة الافتراضية في أدوات التصميم وCSS.
RGB: الأحمر والأخضر والأزرق من 0 إلى 255. تكتب CSS الحديثة rgb(42 157 143 / 50%)؛ ولا تزال الصيغة الأقدم rgba(42, 157, 143, 0.5) تعمل في كل مكان.
HSL: درجة اللون بالدرجات، والتشبع والإضاءة بالنسبة المئوية. سهلة التعديل يدويًا، لكن إضاءة 50% ليست متساوية السطوع عبر درجات الألوان: يبدو الأصفر أفتح بكثير من الأزرق.
HSV / HSB: درجة اللون والتشبع والقيمة (أو السطوع). النموذج الذي تقوم عليه منتقيات الألوان في Photoshop وFigma ومعظم تطبيقات التصميم. غير صالحة في CSS.
HWB: درجة اللون مع مقدار الأبيض والأسود المخلوط معها. صالحة في CSS منذ Color Level 4، وبديهية لصنع نسخ باستيل أو هادئة.
CMYK: نسب أحبار السماوي والأرجواني والأصفر والأسود (key) للطباعة. تستخدم القيم هنا المعادلة القياسية للأجهزة؛ أما اللون المطبوع الفعلي فيعتمد على الورق وملف ألوان الطابعة.
OKLCH: الإضاءة والصفاء (chroma) ودرجة اللون في فضاء متجانس إدراكيًا. الإضاءة المتساوية تبدو متساوية عبر درجات الألوان، ما يجعلها الخيار الأفضل لبناء سلالم الألوان واللوحات سهلة الوصول. مدعومة في كل المتصفحات الحالية.
أسماء CSS: الكلمات المفتاحية الـ148 مثل tomato وrebeccapurple وslategray. يعرض المحول أقربها، ويشير إلى ذلك عندما يكون التطابق تامًا.

تحويل HEX إلى RGB يدويًا

لون HEX ثلاثة أزواج من الخانات بالأساس 16. قسّم #2a9d8f إلى 2a و9d و8f، ثم حوّل كل زوج: 2a تساوي 2 × 16 + 10 = 42، و9d تساوي 9 × 16 + 13 = 157، و8f تساوي 8 × 16 + 15 = 143، فيكون اللون rgb(42, 157, 143). وفي الاتجاه المعاكس، اقسم كل قناة على 16: الناتج هو الخانة الأولى والباقي هو الثانية. ويضيف HEX ذو الخانات الثماني زوجًا رابعًا للشفافية، حيث ff معتم تمامًا و80 نحو 50%.

التحويلات بين HEX وRGB وHSL وHSV وHWB دقيقة باستثناء التقريب. أما CMYK فتقريبي بطبيعته، وألوان OKLCH التي تقع خارج نطاق sRGB الذي تعرضه الشاشة تُعاد إليه بخفض الصفاء، مع الحفاظ على الإضاءة ودرجة اللون اللتين طلبتهما.

أي صيغة تستخدم في CSS؟

كل المتصفحات الحالية تفهم HEX وrgb() وhsl() وhwb() وoklch()، فالاختيار يتعلق بما هو أسهل للقراءة والصيانة. HEX موجز وهو ما يسلّمه المصممون، فيبقى الخيار الآمن للقيم المفردة. وHSL مريح عندما تريد تعديل لون يدويًا قليلًا، مثل حالة تمرير أفتح بقليل.

أما لنظام التصميم فإن OKLCH يزداد كونه الخيار الأفضل. ولأن إضاءته إدراكية، فإن مجموعة ألوان العلامة التي تشترك في قيمة L نفسها تبدو فعلًا متساوية الإضاءة، ويمكنك اشتقاق سلّم كامل بتغيير رقم واحد فقط. كما يستطيع وصف الألوان الأكثر حيوية في شاشات P3 واسعة النطاق، وهو ما لا يستطيعه HEX وrgb(). وتذكّر أن HSV وHSB وCMYK ليست صالحة في CSS: إنها هنا لنقل القيم بين أدوات التصميم والطباعة.

الدرجات الفاتحة والداكنة والمطفأة والتناسقات

الدرجة الفاتحة تمزج اللون بالأبيض، والداكنة بالأسود، والمطفأة بالرمادي. تتدرج الصفوف الثلاثة من اللون الأصلي بخطوات 10%، فتعطيك حالات تمرير وحدودًا وخلفيات تنتمي بوضوح إلى بعضها.

تدير التناسقات درجة اللون حول عجلة الألوان: المكمل هو الدرجة المقابلة، والمتجاور جاراه على بُعد 30° من كل جانب، والثلاثي ثلاث درجات بينها 120°، والمكمل المنقسم الدرجتان المحيطتان بالمكمل، والرباعي أربع درجات بينها 90°. إنها نقطة بداية للألوان المميزة لا قاعدة: تحقق دائمًا من ألوان النص باستخدام مدقق التباين. ولبناء لوحة من صورة بدلًا من ذلك، استخدم مولد لوحة الألوان.

الأسئلة الشائعة

كيف أحوّل HEX إلى RGB؟: الصق كود HEX في المحول وانسخ قيمة RGB. ويدويًا، قسّم الكود إلى ثلاثة أزواج وحوّل كلًّا منها من الأساس 16 إلى العشري: يصبح #2a9d8f هكذا 42 و157 و143.
كيف أحوّل RGB إلى HEX؟: اكتب قيمة RGB، مثل rgb(42, 157, 143) أو 42, 157, 143 فقط، وانسخ HEX. تصبح كل قناة خانتين ست عشريتين: 42 تصبح 2a، و157 تصبح 9d، و143 تصبح 8f.
ما الفرق بين HSL وHSV؟: كلاهما يستخدم زاوية لدرجة اللون، لكن إضاءة HSL تمتد من الأسود مرورًا باللون النقي إلى الأبيض، بينما تمتد قيمة HSV من الأسود إلى اللون النقي فقط. تفهم CSS صيغة HSL؛ أما HSV (وتُسمى أيضًا HSB) فتُستخدم في منتقيات الألوان بتطبيقات التصميم.
ما هو OKLCH ولماذا أستخدمه؟: يصف OKLCH اللون بالإضاءة المُدرَكة والصفاء ودرجة اللون. وعلى عكس HSL، تبدو الإضاءة نفسها متساوية لكل درجة لون، فتبقى السلالم والتباين قابلة للتوقع عند تغيير درجة اللون. كل المتصفحات الحالية تدعم oklch() في CSS.
هل يمكنني تحويل الألوان مع الشفافية؟: نعم. أدخل HEX من ثماني خانات، أو rgb() مع شفافية بعد شرطة مائلة، أو rgba() أو hsla()، أو استخدم منزلق الشفافية. عندها تتضمن كل صيغ CSS قيمة الشفافية.
هل قيمة CMYK دقيقة للطباعة؟: إنها التحويل الرياضي القياسي الذي تستخدمه أدوات الويب. يعتمد الناتج المطبوع الفعلي على الورق والأحبار وملف الألوان، لذا في أعمال الطباعة الحساسة للعلامة التجارية، أكّد القيم مع المطبعة أو في تطبيق يدعم ملفات الألوان.
كم عدد أسماء الألوان في CSS؟: تعرّف CSS ‏148 لونًا مسمى، منها rebeccapurple والتهجئتان grey وgray. يقبلها المحول كلها ويعرض أقرب اسم لأي لون تُدخله.

أدوات ذات صلة

عرض كل الأدوات

WCAG Contrast CheckerCheck text and background colours against WCAG AA and AAA.Color Palette GeneratorPull the dominant colours out of any photo as HEX, RGB and HSL.Favicon GeneratorEvery favicon size, a real multi-size .ico and a web manifest from one image.محول الصورأعد ترميز الصور وغيّر حجمها وحوّلها إلى متجهات مع مقارنة حية قبل وبعد.Data Studioانقل النصوص المهيكلة بين JSON وYAML وTOML وCSV وMarkdown.الضغط والأرشفةقلّص أي ملف باستخدام gzip أو Brotli، أو اجمع مجلدًا كاملًا في ملف ZIP.