يقوم محول تنسيقات الألوان بتحويل أي لون بين HEX و RGB و HSL و HSV و OKLCH. اختر لوناً باستخدام أداة الاختيار، أو اكتب قيمة hex، أو الصق أي سلسلة ألوان CSS، أو اضبط أشرطة تمرير RGB - يتم تحديث كل تنسيق مباشرة ولكل منها زر نسخ خاص به.
توفر لك لغة CSS الحديثة عشرات الطرق لكتابة نفس اللون: #7C3AED، و rgb(124, 58, 237)، و hsl(262, 83%, 58%)، و oklch(55% 0.24 293)، بالإضافة إلى متغيرات الشفافية (alpha) لكل منها. غالباً ما تحتاج إلى التحويل بينها - فقد يعطيك تصميم Figma قيمة OKLCH، بينما يستخدم الكود الخاص بك HEX، وتفضل متغيرات السمة استخدام HSL لتعديلات التحويم (hover). يقوم محول تنسيقات الألوان بجميع التحويلات في لوحة واحدة. اختر لوناً من أداة اختيار الألوان، أو الصق لوناً موجوداً بأي صيغة، أو اسحب أشرطة تمرير RGB لضبط اللون. يتم عرض كل التنسيقات الشائعة في وقت واحد: HEX (مع الشفافية)، و rgb()/rgba()، و hsl()/hsla()، و hsv()، و oklch() - بالإضافة إلى قصاصة برمجية لمتغيرات CSS وقيمة النصوع المحسوبة لحسابات التباين السريعة. يتم دعم قناة الشفافية بشكل كامل. لكل تنسيق زر نسخ خاص به للاستخدام بضغطة واحدة، ويقبل المحلل أسماء الألوان الأصلية وكل ما تدعمه لغة CSS.
يعرض HEX و RGB/RGBA و HSL/HSLA و HSV و OKLCH في وقت واحد - اختر التنسيق الذي يتوقعه الكود الخاص بك دون الحاجة لإعادة التحويل في كل مرة.
يقبل HEX (#abc أو #aabbcc أو #aabbccff)، و rgb()/rgba()، و hsl()/hsla()، و oklch()، وأسماء الألوان الأصلية. الصق أي شيء تدعمه لغة CSS.
يتعامل مع تنسيق OKLCH الجديد المستخدم في CSS الحديثة - وهو فضاء لوني موحد إدراكياً أصبح المعيار الجديد لأنظمة التصميم.
لكل مخرج زر نسخ خاص به. اضغط للحصول على التنسيق الذي تحتاجه لكودك بدقة، دون الحاجة للتحديد اليدوي.
اضبط أشرطة تمرير الأحمر/الأخضر/الأزرق/الشفافية للضبط الدقيق. يتم تحديث كل تنسيق في الوقت الفعلي أثناء السحب.
يتم التعامل مع الشفافية عبر كل التنسيقات: #RRGGBBAA، و rgba(...)، و hsla(...). اضبطها مرة واحدة، وسيتم تحويلها في كل مكان.
يعطيك Figma قيمة OKLCH أو HSL - الصقها، وانسخ ما يعادلها بصيغة HEX لتكوين Tailwind الخاص بك أو متغيرات CSS دون مغادرة المتصفح.
اسحب أشرطة التمرير لاستكشاف الدرجات، مع ملاحظة قيم OKLCH للوحة نظام تصميم منظمة.
حول لون العلامة التجارية إلى صيغة HSL لتتمكن من استخدام hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) لحالات التحويم (hover).
يعطيك حقل النصوع القيمة الخام المستخدمة في حسابات تباين WCAG - مفيد لحسابات الوصول الميسر.
الصق oklch(...) من ملف CSS تقرأه وشاهد فوراً اللون الذي ينتجه بالفعل.
اضغط على أيقونة تنسيقات الألوان في لوحة DevSuite Pro. تفتح لوحة بها أداة اختيار الألوان، وإدخال hex، وأشرطة تمرير RGB.
استخدم أداة اختيار الألوان، أو اكتب hex، أو الصق أي سلسلة ألوان CSS (rgb(...)، oklch(...)، إلخ). ستظهر معاينة اللون فوراً.
يتم عرض كل التنسيقات أدناه: HEX، و RGB، و HSL، و HSV، و OKLCH، ومتغير CSS، والنصوع. تظل جميعها متزامنة أثناء الضبط.
اسحب أشرطة تمرير R/G/B/A للضبط الدقيق. رائع للوصول إلى درجة لون محددة تطابق مواصفات التصميم.
اضغط على 'نسخ' في صف التنسيق الذي تريده - ستوضع القيمة في حافظتك بالصيغة الصحيحة.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 64 أداة للمطورين لمتصفحك.
