العنوان: "؛ محول الألوان: تحويل HEX وRGB وHSL وHWB وCMYK بالطريقة الصحيحة وحاصل الاقتباس؛ slug: أداة دليل محول الألوان: فئة محول الألوان: نوع اللون: المجموعة
محول الألوان: قم بتحويل HEX وRGB وHSL وHWB وCMYK بالطريقة الصحيحة
المرة الأولى التي عضني فيها لون كانت في عملية طباعة. لقد قمت بإنشاء صفحة مقصودة لأحد منتجات WordPress الخاصة بي، وقمت بتسجيل الدخول على العلامة التجارية الزرقاء في المتصفح، ثم أرسلت نفس العلامة التجارية "؛ أزرق واقتباس؛ إلى مطبعة للحصول على مجموعة من الملصقات. ما عاد كان لونًا بحريًا مسطحًا رماديًا قليلاً لا يشبه الشاشة. لم يقم أحد بتحويل لون شاشة RGB إلى CMYK، لذلك خمنت الطابعة، وكان التخمين خاطئًا. كان ذلك هو اليوم الذي توقفت فيه عن التعامل مع اللون كسلسلة واحدة وبدأت في التعامل معه كقيمة واحدة يجب التحدث بها بعدة لغات في وقت واحد.
هذا هو بالضبط الغرض من محول الألوان. أنت تعطيه لونًا في بناء جملة واحد ويعيدك إلى كل بناء جملة آخر، وبالتالي فإن اللون الأزرق في CSS الخاص بك، والأزرق في ملف التصميم الخاص بك، والأزرق الذي تتلقاه الطابعة الخاصة بك كلها نفس اللون. لقد بنيت محول الألوان على Toolz.dev لأنني سئمت من لصق الرموز السداسية في ثلاثة مواقع مختلفة للحصول على RGB وHSL وCMYK بشكل منفصل.
ليرة تركية؛DR: يأخذ محول الألوان لونًا واحدًا ويعيد التعبير عنه بـ HEX وRGB وHSL وHWB وCMYK مرة واحدة، بالإضافة إلى أقرب اسم لون CSS. استخدم RGB وHEX للشاشات، وHSL أو HWB عندما تريد دفع اللون يدويًا، وCMYK للطباعة. يعمل محول Toolz.dev بالكامل في متصفحك، ويحافظ على قناة ألفا سليمة، ولا يقوم أبدًا بتحميل ما تلصقه.
ما هو محول الألوان؟
يقوم محول الألوان بتوزيع لون مكتوب في أي بناء جملة CSS شائع ويحسب ما يعادله في الآخرين. يتم تعريف بناء الجملة الموجود، وكيفية تحويل كل منها بالضبط وحدة الألوان CSS المستوى 4. الرياضيات ليست معقدة، ولكن القيام بها باليد أمر ممل وعرضة للخطأ. تحويل #4466EE يعني RGB تقسيم الأرقام السداسية الستة إلى ثلاثة أزواج وقراءة كل زوج كرقم أساسي 16 44 هو 68، 66 هو 102، و EE هو 238، العطاء rgb(68, 102, 238). الذهاب في الاتجاه الآخر يعني تقسيم كل قناة إلى سلسلة سداسية مكونة من رقمين والانضمام إليها. الوصول إلى HSL يعني تطبيع القنوات، وإيجاد الحد الأدنى والحد الأقصى، وحساب اللون والتشبع والخفة منها. أنت لا تريد أن تفعل ذلك في رأسك الساعة 2 صباحًا.
قيمة المحول لا تقتصر على حفظ العمليات الحسابية فحسب. إنه يضمن الاتساق. عندما تنتج إحدى الأدوات جميع التنسيقات من لون واحد تم تحليله، فليس هناك احتمال أن يصف RGB الذي قمت بنسخه وHSL الذي قمت بنسخه ألوانًا مختلفة قليلاً لأنك قمت بالتقريب بشكل مختلف بين الخطوات. مصدر واحد، حقيقة واحدة، كل تنسيق.
لماذا توجد تنسيقات الألوان؟
يبقى كل تنسيق لون لأنه جيد حقًا في وظيفة واحدة.
RGB هي كيفية عمل الشاشات. تبعث الشاشة الضوء الأحمر والأخضر والأزرق، ومزج هذه الثلاثة بكثافة مختلفة ينتج كل لون تراه. وهذا يجعل RGB اللغة الأم للمتصفح: أيًا كان بناء الجملة الذي تكتبه في CSS، فإن محرك العرض يحله إلى RGB قبل أن يضيء بكسلًا.
HEX هو RGB باختصار. #4466EE هو نفسه rgb(68, 102, 238)، فقط معبأة في سلسلة مدمجة يسهل لصقها في ورقة أنماط أو أداة تصميم. إنه شائع لأنه قصير ولا لبس فيه، وليس لأنه أكثر قدرة.
يصف HSL اللون حسب اللون والتشبع والخفة. إنه التنسيق الذي أصل إليه عندما أقوم بضبط واجهة المستخدم يدويًا. لجعل الزر أغمق عند التمرير، أسقط الخفة بضع نقاط وأترك اللون والتشبع وحدهما. إن محاولة القيام بذلك في RGB الخام تعني تغيير القنوات الثلاث بكميات غير متساوية وآمل ألا ينحرف اللون.
HWB، المحدد في مواصفات وحدة الألوان CSS المستوى 4 (https://www.w3.org/TR/css-color-4/)، يصف نفس اللون بمقدار اللون الأبيض وكمية اللون الأسود الممزوج. إنه يرسم بشكل نظيف كيف يفكر الناس فعليًا في الصبغات والظلال: أضف اللون الأبيض لتفتيحه، وأضف اللون الأسود لتغميقه. إنه أحدث، لذلك أستخدمه في الغالب عندما تكون إمكانية قراءة التعليمات البرمجية أكثر أهمية من وصول المتصفح.
CMYK هو نموذج الطباعة. تضع الطابعات حبرًا سماويًا وأرجوانيًا وأصفرًا وأسودًا على ورق أبيض، ويقوم كل حبر بطرح الضوء بدلاً من إضافته. ولهذا السبب يمكن أن يبدو لون الشاشة الزاهي باهتًا على الورق: نطاقات الألوان التي يمكن أن ينتجها النموذجان، والتي تسمى التدرجات، مختلفة. يمنحك المحول تقريب CMYK، لكنه لا يستطيع اختراع حبر غير موجود.
كيف يمكنني تحويل HEX إلى RGB والعودة؟
التحويل الأكثر شيوعًا، بهامش واسع، هو HEX إلى RGB وRGB إلى HEX. إليك الطريقة اليدوية حتى تتمكن من التحقق من صحة أي أداة، بما في ذلك أداتي.
لتحويل HEX إلى RGB، قم بتقسيم الأرقام الستة إلى ثلاثة أزواج واقرأ كل منها كرقم سداسي عشري من 0 إلى 255. مثل الاختزال المكون من ثلاثة أرقام #46E يتوسع عن طريق مضاعفة كل رقم إلى #4466EE أولاً. لتحويل RGB إلى HEX، خذ كل قيمة قناة، وقم بتحويلها إلى سلسلة سداسية مكونة من رقمين مع صفر بادئ إذا لزم الأمر، وانضم إليهم خلف التجزئة.
بدلاً من القيام بذلك بشكل متكرر، قم بلصق القيمة في محول الألوان وقراءة كل تنسيق في وقت واحد. إذا كنت بحاجة أيضًا إلى اختيار لون بصريًا ومشاهدته يتم تحديثه مباشرة، فإن منتقي الألوان هي نقطة البداية الأفضل، وتشترك الأداتان في نفس نواة التحويل لذا تتفق أرقامهما.
متى يجب أن أستخدم CMYK بدلاً من RGB؟
استخدم CMYK فقط عندما يكون الإخراج حبرًا على الورق. تتوقع بطاقات العمل والملصقات والتغليف وأي مهمة طباعة تجارية قيم CMYK، وإرسال RGB إلى الطابعة يعني أن الطابعة أو برامجها تتحول نيابةً عنك، وغالبًا ما لا تسجل النتائج. كان هذا خطأ الملصق الخاص بي في الجملة.
استخدم RGB واختصاره HEX لأي شيء سيتم عرضه على الشاشة: مواقع الويب والتطبيقات والرسومات الاجتماعية والفيديو. إذا كان المشروع يمتد إلى كلا العالمين، فاحتفظ بـ RGB أو HEX كمصدر للحقيقة وقم بإنشاء تقريب CMYK باستخدام محول في اللحظة التي تقوم فيها بتسليم الطباعة، حتى تتمكن من مراقبة قيم CMYK ووضع علامة على أي لون سيتغير بشكل سيئ قبل أن يكلفك ذلك عملية الطباعة.
كيف تتم مقارنة تنسيقات الألوان؟
| تنسيق | الأفضل ل | دعم ألفا | مثال |
|---|---|---|---|
| عرافة | Css مدمج، تسليم التصميم | نموذج مكون من 8 أرقام فقط | #4466EE |
| آر جي بي / آر جي بي إيه | شاشات، لون برمجي | نعم (RGBA) | rgb(68, 102, 238) |
| HSL / HSLA | ضبط درجة اللون والخفة يدويًا | نعم (هسلا) | hsl(228, 83%, 60%) |
| HWB | الصبغات والظلال المقروءة | نعم (مع شرطة مائلة ألفا) | hwb(228 27% 7%) |
| كميك | طباعة، حبر على ورق | لا | cmyk(71%, 57%, 0%, 7%) |
يستحق الجدول أن يؤخذ في الاعتبار لأنه يعين بدقة سير العمل: التصميم بتنسيق HEX أو الاختيار بصريًا، والضبط في HSL أو HWB، والشحن إلى الشاشات بتنسيق RGB أو HEX، والتحويل إلى CMYK فقط عند حدود الطباعة.
كيف تنتقل الشفافية بين التنسيقات؟
ألفا هو المكان الذي تسوء فيه الكثير من التحويلات بهدوء. تتحكم قناة ألفا في العتامة، من 0 (شفاف تمامًا) إلى 1 (معتم تمامًا). يحملها RGBA وHSLA كقيمة رابعة، ويحملها HEX المكون من 8 أرقام كزوج رابع #4466EECC هل هذا اللون الأزرق بنسبة عتامة تبلغ 80 بالمائة تقريبًا، لأنه CC هو 204 من 255. سداسي عشري عادي و cmyk() ليس لديك قناة ألفا على الإطلاق.
يحافظ محول Toolz.dev على ألفا من خلال كل تنسيق يدعمه. إذا قمت باللصق rgba(0, 0, 0, 0.5) تحصل #00000080 في صف HEXA و hsla(0, 0%, 0%, 0.5) في صف HSLA، تصف جميعها نفس اللون الأسود نصف الشفاف. عندما تقوم بنسخ صف HEX العادي أو صف CMYK بدلاً من ذلك، فإنك تقوم بنسخ اللون المعتم بالكامل، وهو اختيار متعمد، وليس خطأ: لا يمكن لهذه التنسيقات التعبير عن العتامة، لذا فهي تظهر اللون كما لو كان صلبًا. عندما تكون الشفافية مهمة، انسخ من صف مدرك لألفا.
هل يمكنني تحويل اسم لون CSS؟
نعم، ويعمل في كلا الاتجاهين. اكتب كلمة رئيسية مثل tomato، rebeccapurple، أو slategray ويقوم المحول بتحليلها إلى HEX وRGB وHSL وHWB وCMYK. تأتي المجموعة الكاملة المكونة من 148 لونًا مسمىًا من مواصفات CSS Color Module Level 4، وبالتالي فإن القيم تتطابق تمامًا مع ما يحله المتصفح.
والذهاب في الاتجاه الآخر هو حيث يصبح مفيدًا حقًا. الصق لونًا رقميًا وسيقوم المحول بالإبلاغ عن اسم CSS الدقيق إذا كان واحدًا متطابقًا، ويظهر دائمًا أقرب لون مسمى بمسافة RGB عندما لا يكون كذلك. أقرب تطابق مفيد لتسمية المتغيرات وكتابة مستندات التصميم القابلة للقراءة: #663399 يعود كما rebeccapurple، وشيء قريب منه يعود كـ "؛ الأقرب: rebeccapurple"؛ حتى تعرف في أي حي أنت.
كيف يتناسب هذا مع سير عمل التصميم الحقيقي؟
إليك كيفية استخدام الألوان فعليًا عبر المشروع، والمكان المناسب لكل أداة.
أبدأ باختيار اللون الأساسي، عادةً بصريًا باستخدام منتقي الألوان. بمجرد أن أحصل على علامتي التجارية باللون الأزرق، أقوم بتشغيلها عبر محول الألوان لتأمين قيم HEX وRGB وHSL وCMYK في مكان واحد، وألصقها في مستند نظام التصميم بحيث يعمل كل زميل في الفريق وكل بائع من نفس الأرقام.
ثم أقوم ببناء اللوحة. تأتي الظلال الداعمة من الخفة الدافعة في HSL، وأقوم بالتحقق من كل زوج نصي في الخلفية باستخدام مدقق تباين الألوان لذلك يمكن الوصول إلى اللوحة قبل شحنها، وليس بعد الشكوى. عندما أحتاج إلى ازدهار الخلفية، أقوم بتغذية اثنين من هذه الألوان في مولد التدرج.
أخيرًا، من أجل التباعد والطباعة سريعة الاستجابة حول كل هذا اللون، أقوم بإقران اللوحة مع مولد المشبك CSS لذلك يتم قياس الأحجام بسلاسة مثل اتساق الألوان. اللون والتخطيط عبارة عن نصفين من نفس الطلاء.
إذا كنت تهتم بالمكان الذي تذهب إليه بياناتك أثناء العمل، فمن المفيد قراءة كيفية تعامل هذه الأدوات معها. كل شيء في محول الألوان يعمل من جانب العميل، وهو خيار التصميم الذي كتبت عنه في دليل خصوصية البيانات في الأدوات عبر الإنترنت، وهي تجلس بجانب بقية مجموعتي اليومية في مجموعة أدوات مطور الويب.
هل هي دقيقة بما فيه الكفاية للإنتاج؟
للعمل على الشاشة، نعم، دون مؤهل. HEX وRGB وHSL وHWB كلها تمثيلات دقيقة لنفس لون sRGB، لذا قم بالتحويل بينها ذهابًا وإيابًا بشكل نظيف: قم بتحويل اللون إلى HSL ثم عد وهبطت على نفس ثلاثي RGB، أعط أو خذ وحدة واحدة من التقريب على قناة. هذا التقريب متأصل في تمثيل لون مستمر في القنوات الصحيحة، وليس عيبًا في أي أداة واحدة.
بالنسبة لـ CMYK، تعامل مع الإخراج باعتباره تقريبيًا قياسيًا قويًا بدلاً من إثبات مُدار بالألوان. يعتمد لون الطباعة الحقيقي على الورق والأحبار وملف تعريف ICC المحدد الذي تستخدمه الطابعة، والذي لا يمكن لأي أداة تعتمد على المتصفح معرفته. يستخدم المحول صيغة CMYK القياسية الساذجة، وهو بالضبط ما تظهره معظم أدوات التصميم افتراضيًا وهو نقطة بداية موثوقة. عندما تكون المهمة حرجة للألوان، احصل على دليل مادي من الطابعة قبل التشغيل الكامل. هذا هو الدرس الذي علمته لي ملصقات اللون الرمادي الداكن، ومن الأرخص التعلم من هذه الفقرة بدلاً من التعلم من صندوق من الملصقات الخاطئة.
ماذا عن مساحات الألوان الأحدث مثل LAB وOKLCH؟
إذا كنت تتابع CSS عن كثب فقد رأيت lab()، lch()، oklab()، و oklch() تظهر في أوراق الأنماط وأدوات التصميم. تأتي هذه من مواصفات CSS Color Module Level 4 وهي تحل مشكلة حقيقية: ترتبط جميع RGB وHSL وHWB بنموذج شاشة sRGB، لذا يمكن أن يكون اللونان اللذان يبدوان مختلفين تمامًا عن العين مختلفين تمامًا المسافات الرقمية متباعدة، ويمكن لشاشة عرض واسعة النطاق أن تعرض الألوان التي لا يستطيع sRGB وصفها ببساطة. مساحات الألوان OK موحدة إدراكيًا، مما يجعلها ممتازة لإنشاء لوحات متدرجة بشكل متساوٍ ولإكمال التدرجات التي لا تكون موحلة في المنتصف.
لقد أبقيت هذا المحول يركز عمدًا على التنسيقات التي تلصقها في الإنتاج اليومي CSS وتسليمها إلى الطابعات: HEX وRGB وHSL وHWB وCMYK. هذه هي المجموعة التي تغطي الغالبية العظمى من المهام الحقيقية، وكل واحدة منها يتم تعيينها بشكل نظيف لنفس لون sRGB، لذا فإن التحويلات بينها دقيقة وقابلة للعكس. تتضمن مساحات النطاق الأوسع قرارات تعيين النطاق التي يسهل الحصول عليها بشكل خاطئ بمهارة، ومزجها في محول بسيط من شأنه أن يستبدل الوضوح بالتغطية التي لا يحتاجها معظم الناس.
القاعدة العملية التي أتبعها: الوصول إلى OKLCH عندما تقوم بإنشاء لوحة ألوان أو تدرج خوارزميًا وتريد خطوات متساوية إدراكيًا، والبقاء مع HEX وRGB وHSL للعمل اليومي لكتابة المكونات. عندما تقوم بالتصميم في OKLCH، قم بتحويل ألوان التثبيت الناتجة إلى HEX أو RGB باستخدام أداة التصميم الخاصة بك قبل التسليم، وبالتالي فإن القيم الموجودة في ورقة الأنماط الخاصة بك هي نفسها التي يمكن لهذا المحول وزملائك في الفريق قراءتها.
الأسئلة المتداولة
كيف يمكنني تحويل HEX إلى RGB؟
قم بتقسيم رمز HEX المكون من ستة أرقام إلى ثلاثة أزواج واقرأ كل منها كرقم سداسي عشري من 0 إلى 255. #4466EE، 44 هو 68 (أحمر)، 66 هو 102 (أخضر)، و EE هو 238 (الأزرق)، العطاء rgb(68, 102, 238). الصق رمز HEX في المحول وستظهر قيمة RGB مباشرة بجانب كل تنسيق آخر.
كيف يمكنني تحويل RGB إلى HEX؟
قم بتحويل كل من القيم الحمراء والخضراء والزرقاء (0 إلى 255) إلى رقم سداسي عشري مكون من رقمين وانضم إليها بعد التجزئة. rgb(68, 102, 238) يصبح #4466EE. يقوم المحول بذلك على الفور ويعطيك أيضًا نموذج HEXA المكون من 8 أرقام عند وجود قيمة ألفا.
ما الفرق بين HSL وHWB؟
يصف HSL اللون حسب اللون والتشبع والخفة، بينما يصف HWB نفس اللون بمقدار اللون الأبيض وكمية اللون الأسود الممزوج به. غالبًا ما يكون HWB أكثر سهولة بالنسبة للصبغات والظلال: زيادة البياض تفتيح اللون وزيادة السواد يؤدي إلى تغميقه. كلاهما يعينان نفس قيمة RGB بالضبط، حتى تتمكن من التبديل بينهما بحرية.
متى يجب أن أستخدم CMYK بدلاً من RGB؟
استخدم CMYK للطباعة وRGB للشاشات. CMYK هو نموذج طرحي يعتمد على الأحبار السماوية والأرجوانية والصفراء والسوداء، وهذا ما تتوقعه الطابعات التجارية. RGB مادة مضافة وتصف الضوء المنبعث من شاشات العرض. يحتوي لون الشاشة على تقريب CMYK، لكن النطاقين يختلفان، لذلك يمكن أن تبدو ألوان الشاشة الزاهية باهتة في الطباعة.
هل يدعم المحول الشفافية؟
نعم. توفير قيمة ألفا من خلال rgba()، hsla()، أو HEX مكون من 8 أرقام ويتم الحفاظ على العتامة في كل مخرج مدرك لألفا. التنسيقات التي لا تحتوي على قناة ألفا، مثل HEX العادي و cmyk()، أظهر اللون المعتم بالكامل، لذا تحقق من مخرجات RGBA أو HEXA عندما تكون الشفافية مهمة.
هل يمكنني تحويل اسم لون CSS؟
نعم. اكتب كلمة رئيسية CSS مثل tomato، rebeccapurple، أو slategray ويقوم المحول بتحليله إلى HEX وRGB وHSL وHWB وCMYK. كما أنه يعمل بشكل عكسي: لصق لون رقمي ويبلغ عن اسم CSS الدقيق في حالة تطابقه، بالإضافة إلى أقرب لون مسمى كمرجع.
هل محول الألوان مجاني وخاص؟
نعم. المحول مجاني تمامًا بدون تسجيل ولا حدود ولا علامات مائية. يتم تشغيل كافة عمليات التحليل والتحويل في متصفحك باستخدام JavaScript من جانب العميل، وبالتالي فإن الألوان التي تدخلها لا تترك جهازك أبدًا وتستمر الأداة في العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.
