لوحات علامات تجارية قائمة على OKLCH. اختر لوناً أساسياً واحصل على كل تناغم لوني كلاسيكي إضافةً إلى تدرّج لوني من 50 إلى 950. اقفل، أعد التوزيع، وصدّر بصيغة CSS / Tailwind v4 / SCSS / JSON.
لوحات علامات تجارية قائمة على OKLCH. اختر لوناً أساسياً واحصل على كل تناغم لوني كلاسيكي إضافةً إلى تدرّج لوني من 50 إلى 950. اقفل، أعد التوزيع، وصدّر بصيغة CSS / Tailwind v4 / SCSS / JSON.
منتقي الألوان والمحوّل لدينا مخصص للون واحد في كل مرة — اختيار / تحويل / نسخ. أما هذه الأداة فهي لـاللوحات: ضع لوناً أساسياً واحصل على نظام كامل جاهز للعلامة التجارية (تناغمات + تدرّج لوني) دفعة واحدة. الفرق كالفرق بين شراء قميص واحد والحصول على خزانة ملابس متكاملة.
يوزّع HSL درجات الألوان بشكل غير متساوٍ (يبدو الأصفر عند 60° أكثر سطوعاً من الأزرق عند 240° حتى عند نفس قيمة السطوع). تكون اللوحة الثلاثية في HSL بإحدى عيّناتها أكثر سطوعاً أو خفوتاً بشكل ملحوظ من البقية. أما OKLCH فهو موحَّد إدراكياً — ثلاث عيّنات بنفس سطوع OKLCH تبدو بنفس السطوع. لذلك يتجه كل نظام تصميم حديث (Apple HI، Tailwind v4، IBM Carbon) إلى OKLCH للتناغمات والتدرّجات.
ألوان علامتك التجارية لا تغادر جهازك أبداً. افتح DevTools ← Network وسترى صفر طلبات صادرة خلال أي عملية.
نصيحة: اضغط مفتاح المسافة لإعادة توزيع العيّنات غير المقفلة.
تناغمات OKLCH، وتدرّجات لونية، والقفل وإعادة التوزيع، وتصدير رموز التصميم — مع لمسات صغيرة تجعل استخدامها ممتعاً فعلاً.
تكميلي، ومتجانس، وثلاثي، ورباعي، وتكميلي مقسوم، وأحادي اللون — كلها محسوبة في OKLCH ليبقى التناغم الثلاثي من ثلاثة ألوان مشبعة وزاهية متساوياً في السطوع. بلا ضبابية HSL.
ضع لون علامتك التجارية واحصل على تدرّج لوني بشكل Tailwind 50, 100, 200, … 900, 950 مولَّد عبر تحريك السطوع على منحنى OKLCH. ينضغط الـChroma عند الأطراف لتبقى الألوان ضمن نطاق sRGB.
ثبّت أي عيّنة (أيقونة القفل) واضغط على إعادة التوزيع (أو فقط مفتاح المسافة) لتنويع البقية ضمن التناغم المختار. كرّر بسرعة، واحتفظ بما يعجبك.
خصائص CSS مخصصة (--brand-500)، كتلة Tailwind v4 @theme، خريطة SCSS، ورموز تصميم JSON جاهزة لـ Style Dictionary / Figma Tokens. إضافةً إلى شريط عيّنات PNG بحجم 1200×200.
تعرض كل عيّنة نسبة تباين WCAG الخاصة بها مقابل الأفضل بين الأبيض والأسود، مع شارة AA / AAA / فشل. اكتشف مشكلات الوصول قبل الإطلاق.
كل بايت يبقى على جهازك. حسابات OKLCH، وتوليد التناغمات، واشتقاق التدرّج، وتصدير PNG تعمل جميعها كـ JavaScript محلياً. افتح DevTools ← Network وتحقق من عدم وجود أي طلبات صادرة.
أربع خطوات من لون أساسي واحد إلى لوحة كاملة جاهزة برموز التصميم.
انقر على صندوق اللون، أو الصق رمز HEX، أو اضغط على أساس عشوائي للإلهام. تركّز الأداة اللوحة بأكملها على هذا اللون — سواء عيّنات التناغم أو التدرّج اللوني المكوّن من 11 خطوة.
الخيار الافتراضي هو متجانس — ثلاثة ألوان ضمن 30° من اللون الأساسي، مثالي للوحات العلامات التجارية الهادئة. تكميلي للأكسسوارات المتباينة. ثلاثي / رباعي للعلامات التحريرية / المرحة. أحادي اللون لأنظمة الدرجات بلون واحد. كلها محسوبة في OKLCH لتبقى متساوية السطوع.
انقر على أيقونة القفل في أي عيّنة تريد الاحتفاظ بها، ثم اضغط على المسافة (أو على إعادة التوزيع) لتنويع البقية ضمن التناغم. كرّر بسرعة. عدّل أي عيّنة مباشرةً بالنقر على حقل HEX الخاص بها إذا أردت تثبيت قيمة محددة بدقة.
انسخ مخرجات CSS (الخصائص المخصصة)، أو Tailwind v4 (كتلة @theme)، أو خريطة SCSS، أو رموز تصميم JSON. أو اضغط على تنزيل PNG لشريط عيّنات بحجم 1200×200 جاهز للإدراج في موجز التصميم.
أربعة سيناريوهات شائعة تتفوق فيها أداة لوحات OKLCH ذات الخصوصية أولاً على ضبط رموز HEX يدوياً في Figma.
لديك لون علامة تجارية وتحتاج إلى نظام يحيط به. ضع رمز HEX، اختر متجانس، أعد التوزيع حتى يتناغم لونان مساندان، ثم اقفل الثلاثة. انتقل إلى عرض التدرّج اللوني، وانسخ كتلة @theme الخاصة بـ Tailwind، والصقها في ملف app.css للمشروع الجديد. الوقت الإجمالي: 5 دقائق.
إن لون indigo الافتراضي في Tailwind ليس لون علامتك. لون علامتك هو #5B3FCD. ضعه واحصل على تدرّج من 11 خطوة يحاكي تماماً تباعد Tailwind. انسخ كتلة @theme — وستعمل كل من bg-brand-500 / text-brand-700 ببساطة.
تعرض كل عيّنة نسبة تباين WCAG + شارة AA/AAA. تحقق من أن brand-500 يحقق AA مقابل الأبيض، وأن brand-100 يبقى مقروءاً كخلفية بلون ملوّن مع نص brand-900. عالج العيّنات المشكلة بإعادة توزيعها فردياً.
تحافظ الوكالات / الشركات متعددة العلامات على N من أنظمة التصميم المتوازية، كلٌّ منها بنفس الشكل ولكن بدرجة لون مختلفة. استخدم نفس سير عمل التناغم + التدرّج اللوني لكل علامة، وصدّر كل واحدة كرموز JSON، ثم أدخلها في Style Dictionary. شكل متّسق وهوية متميزة.
ألوان علامتك التجارية لا تغادر جهازك أبداً. افتح DevTools ← Network وسترى صفر طلبات صادرة خلال أي عملية.
canvas محلياً؛ تُولَّد صورة العيّنة بالكامل في ذاكرة المتصفح وتُنزَّل كـ Blob — لا شيء يعبر الشبكة.
قراءات منتقاة بعناية حول لوحات OKLCH وأنظمة ألوان العلامات التجارية ورموز التصميم.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
منتقي الألوان والمحوّل لدينا مخصص للون واحد في كل مرة — اختيار / تحويل / نسخ. أما هذه الأداة فهي لـاللوحات: ضع لوناً أساسياً واحصل على نظام كامل جاهز للعلامة التجارية (تناغمات + تدرّج لوني) دفعة واحدة. الفرق كالفرق بين شراء قميص واحد والحصول على خزانة ملابس متكاملة.
يوزّع HSL درجات الألوان بشكل غير متساوٍ (يبدو الأصفر عند 60° أكثر سطوعاً من الأزرق عند 240° حتى عند نفس قيمة السطوع). تكون اللوحة الثلاثية في HSL بإحدى عيّناتها أكثر سطوعاً أو خفوتاً بشكل ملحوظ من البقية. أما OKLCH فهو موحَّد إدراكياً — ثلاث عيّنات بنفس سطوع OKLCH تبدو بنفس السطوع. لذلك يتجه كل نظام تصميم حديث (Apple HI، Tailwind v4، IBM Carbon) إلى OKLCH للتناغمات والتدرّجات.
هو تدرّج ألوان العلامة التجارية بأسلوب Tailwind: indigo-50 (الأفتح)، indigo-100، indigo-200، … indigo-900، indigo-950 (الأغمق). ضع لون علامتك التجارية وستولّد الأداة جميع الـ 11 خطوة تلقائياً عبر تحريك سطوع OKLCH على منحنى ثابت. والنتيجة بديل جاهز للاستخدام لأي رمز لوحة Tailwind، بدرجة لون علامتك التجارية.
انقر على أيقونة القفل في أعلى يسار أي عيّنة — ستبقى ثابتة. ثم اضغط على إعادة التوزيع أو على المسافة لتنويع كل عيّنة غير مقفلة ضمن التناغم المختار. هكذا تجد لوحة رائعة: ثبّت لون العلامة التجارية الذي اعتمدته بالفعل، ثم استكشف التنويعات حوله.
لا. حسابات OKLCH، وتوليد التناغمات، واشتقاق التدرّج اللوني، وحساب نسبة التباين، وتصدير PNG، وكل عملية نسخ إلى الحافظة — جميعها تعمل بـ JavaScript على جهازك. افتح DevTools ← Network وسترى صفر طلبات صادرة. الصق ألوان علامتك التجارية، ورموز التصميم الداخلية، واللوحات المحمية باتفاقية عدم إفصاح — لن يغادر أي شيء جهازك.