Solasuكل الأدوات

استوديو إمكانية الوصول وتوليد لوحات الألوان

أنشئ لوحات ألوان يمكن الوصول إليها من نقطة الصفر أو الصور، وتحقق من تباين WCAG 2.2، وحاكي عمى الألوان، وقم بالتصدير إلى CSS وTailwind وJSON.

  • فحص دقيق للسطوع النسبي ونسبة التباين وفق معايير WCAG 2.2 (AA وAAA والعناصر غير النصية)
  • تصحيح تلقائي للألوان في فضاء OKLCH مع تقليل التغيير للحفاظ على التدرج الأصلي
  • استخراج لوحة الألوان محلياً داخل المتصفح بخوارزمية Median Cut دون رفع الصور للسيرفر
  • محاكاة أنواع عمى الألوان ومعاينة واقعية لمكونات واجهة المستخدم
  • تصدير الشيفرات بعدة صيغ: متغيرات CSS وSCSS وTailwind CSS وJSON وSVG وPNG

Start From

Color Inspector

أدخل اللون الأساسي (HEX, RGB, HSL, OKLCH)

HEX

#4F46E5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

HSV

hsv(243, 69%, 90%)

OKLCH

oklch(0.5106 0.2301 277)

عينات لوحة الألوان

8 colors
#4F46E5

Primary Indigo

#0EA5E9

Sky Blue

#F59E0B

Amber Accent

#111827

Text Gray 900

#6B7280

Muted Gray 500

#FFFFFF
BG

White Background

#F3F4F6

Surface Gray 100

#E5E7EB

Border Gray 200

التحقق من التباين وفق WCAG 2.2

WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)

المقدمة (النص)
17.85: 1

Passes WCAG AA for normal & large text

الخلفية
AA نص عادي (4.5:1)
ناجح (PASS)(4.5:1)
AA نص كبير (3.0:1)
ناجح (PASS)(3.0:1)
AAA نص عادي (7.0:1)
ناجح (PASS)(7.0:1)
AAA نص كبير (4.5:1)
ناجح (PASS)(4.5:1)
عناصر التحكم والواجهة (3.0:1)
ناجح (PASS)(3.0:1)

Large Headline (18pt Bold / 24px)

This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.

Form Input Outline

اقتراحات الألوان الميسرة (أقل تعديل في OKLCH)

Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)

Current contrast (17.85:1) already meets or exceeds the target (4.5:1).
Adjust both foreground and background simultaneouslyMinimal Change (ΔE < 0.05)

Preview Text

Contrast: 18.63:1

PASS
FG:
#0B1225
BG:
#FFFFFF
مقدار التغيير (ΔE):0.0105

Palette Contrast Matrix

Cross-audit all foreground and background combinations across your palette. Click any cell to test.

Pass AA (≥4.5)
Large (≥3.0)
Fail
FG ↓ \ BG →
4F46E5
0EA5E9
F59E0B
111827
6B7280
FFFFFF
F3F4F6
E5E7EB
#4F46E5
—2.272.932.821.36.295.715.08
#0EA5E9
2.27—1.296.41.742.772.522.24
#F59E0B
2.931.29—8.262.252.151.951.73
#111827
2.826.48.26—3.6717.7416.1214.33
#6B7280
1.31.742.253.67—4.834.393.9
#FFFFFF
6.292.772.1517.744.83—1.11.24
#F3F4F6
5.712.521.9516.124.391.1—1.13
#E5E7EB
5.082.241.7314.333.91.241.13—

معاينة المكونات الواقعية

Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance

* معيار WCAG 2.2 رقم 1.4.1: لا تعتمد على اللون فقط لنقل المعلومات؛ استخدم الأيقونات أو النصوص.

Analytics Overview

Updated 5 minutes ago

Total Users

24,592

▲ +14.2%vs last week

Conversion Rate

3.48%

▲ +0.8%target 3.0%

Error Incidents

2

⚠️ 2 warnings
Goal Completion78%

محاكاة قصور رؤية الألوان

Test how color vision deficiency affects your palette and chart readability

Deuteranopia (Green-blind)

Medium-wavelength (M) cone absence; difficulties distinguishing red and green.

* محاكاة تقريبية رياضية. قد يختلف الإدراك البصري الفعلي من شخص لآخر.

Palette Simulation

#4C4CC6

orig: #4F46E5

#6A60D8

orig: #0EA5E9

#DAE05B

orig: #F59E0B

#141323

orig: #111827

#6E6D7C

orig: #6B7280

#FFFFFF

orig: #FFFFFF

#F3F3F5

orig: #F3F4F6

#E6E6EA

orig: #E5E7EB

Accessible Multi-Series Chart Preview

WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers

WCAG Compliant
JanFebMarAprMay
Series A (Solid + Circle)
Series B (Dashed + Square)
▲Series C (Dotted + Triangle)
◆Series D (Dash-dot + Diamond)

تحليل مخاطر تباين التدرج

Multi-point contrast risk analysis across gradient color stops

Overlay Text:
الزاوية135°

Gradient Hero Headline

Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.

Badge on Gradient
Contrast Along Gradient (0% → 100%)Range: 2.77:1 — 6.29:1
6.290%
5.910%
5.5220%
5.130%
4.7240%
4.3250%
3.9860%
3.6170%
3.3280%
3.0290%
2.77100%
Accessibility Warning: Localized contrast falls to 2.77:1 around 100% position (below 4.5:1 requirement). Consider adding a scrim or background container.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);

وضوح النص فوق الصور

Calibrate scrim overlay opacity to guarantee readable text over varied images

Text:
شفافية الطبقة المعتمة50%
Scrim Tone
Overlay Scrim

Scenic Horizon Photography

Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.

Contrast: 5.10:1
Readability Pass: Worst-case contrast is 5.10:1 (satisfies WCAG AA 4.5:1).
5.10:1
background-color: rgba(0, 0, 0, 0.50);

تصدير الشيفرات والملفات

Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive

:root {
  /* Palette Tokens */
  --color-primary-indigo: #4F46E5;
  --color-sky-blue: #0EA5E9;
  --color-amber-accent: #F59E0B;
  --color-text-gray-900: #111827;
  --color-muted-gray-500: #6B7280;
  --color-white-background: #FFFFFF;
  --color-surface-gray-100: #F3F4F6;
  --color-border-gray-200: #E5E7EB;

  /* Semantic Roles (Light Theme) */
  --color-primary: #4F46E5;
  --color-secondary: #0EA5E9;
  --color-accent: #F59E0B;
  --color-background: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-text: #0F172A;
  --color-mutedText: #64748B;
  --color-border: #E2E8F0;
  --color-focus: #4F46E5;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #0284C7;

  /* Interactive States */
  --color-primary-hover: #4433D3;
  --color-primary-active: #3A1DC2;
  --color-primary-focus: #4F46E5;
  --color-primary-disabled: #A8ACC4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #7579FF;
    --color-secondary: #0EA5E9;
    --color-accent: #F59E0B;
    --color-background: #0F172A;
    --color-surface: #1E293B;
    --color-text: #F8FAFC;
    --color-mutedText: #94A3B8;
    --color-border: #334155;
    --color-focus: #818CF8;
    --color-success: #4ADE80;
    --color-warning: #FBBF24;
    --color-danger: #F87171;
    --color-info: #38BDF8;
    --color-primary-hover: #8389FF;
    --color-primary-active: #9299FF;
    --color-primary-focus: #7579FF;
    --color-primary-disabled: #37394A;
  }
}

حول استوديو إمكانية الوصول وتوليد لوحات الألوان

استوديو إمكانية الوصول وتوليد لوحات الألوان من Solasu هو بيئة تصميم متكاملة تتجاوز مجرد منتقي ألوان تقليدي.

توفر الأداة دورة عمل احترافية متكاملة: بناء الألوان، استخراج اللوحات من الصور، فحص توافق التباين مع معايير WCAG 2.2 (المستويات AA وAAA وعناصر الواجهة)، وتوليد اقتراحات ألوان بأقل قدر من التغيير في فضاء OKLCH، ومعاينة المكونات في النمطين الفاتح والداكن، ومحاكاة درجات عمى الألوان، وتصدير الشيفرات بصيغ CSS وTailwind وJSON وSVG وPNG وZIP.

جميع العمليات تتم محلياً 100% داخل المتصفح دون إرسال أي بيانات إلى خوادم خارجية.

حساب دقيق لنسبة التباين وفق معايير W3C / WCAG 2.2

تعتمد الأداة الصيغة الرياضية الرسمية للسطوع النسبي لـ sRGB مع إزالة تصحيح غاما (L = 0.2126*R + 0.7152*G + 0.0722*B).

تقييم مستقل للنص العادي (AA: 4.5:1, AAA: 7.0:1) والنص الكبير (AA: 3.0:1, AAA: 4.5:1) والعناصر الرسومية (3.0:1).

تصحيح الألوان بأقل قدر من التغيير في فضاء OKLCH

عند انخفاض التباين عن الحد المسموح، تبحث الخوارزمية عن أقرب لون في فضاء OKLCH المتناسق بصرياً لتحقيق نسبة التباين دون تغيير هوية اللون.

خيارات لتثبيت الخلفية أو المقدمة أو تعديل كليهما، مع قياس انحراف اللون بمقياس Delta E المعتمد.

استخراج محلي للوحة الألوان من الصور بخوارزمية Median Cut

تحليل صور JPEG وPNG وWebP لاستخراج الألوان السائدة والألوان المميزة مع استبعاد البيكسلات الشفافة (ألفا أقل من 128).

تصغير تلقائي للصور الكبيرة حتى 1000 بكسل مع حاجز أمان 64 ميغابكسل لمنع استهلاك الذاكرة.

محاكاة عمى الألوان ومعاينة واقعية للمكونات

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

تنبيه وفق معيار WCAG 2.2 رقم 1.4.1 لمنع الاعتماد على اللون بمفرده للتعبير عن الحالة.

تصدير فوري للشيفرات إلى CSS وTailwind وJSON

توليد متغيرات CSS شاملة الحالات والنمط الداكن، وإعدادات Tailwind CSS v3 وv4، ورموز Design Tokens بصيغة JSON، وعينات SVG وملفات ZIP مضغوطة.

الأسئلة الشائعة (FAQ)

هل هذه الأداة مجانية؟ هل تتطلب تسجيلاً؟

نعم، الأداة مجانية بالكامل 100% ولا تتطلب أي تسجيل أو اشتراك.

هل يتم تخزين صوري أو ألواني على خوادم خارجية؟

كلا، تتم جميع العمليات داخل متصفح جهازك ولا يتم إرسال أي طلبات شبكية.

ما هي صيغ الألوان المدعومة؟

تدعم HEX وRGB وRGBA وHSL وHSLA وHSV وصيغة OKLCH الحديثة.

كيف يتم حساب نسبة التباين في WCAG 2.2؟

بحساب السطوع النسبي عبر تحويل sRGB وتطبيق معادلة (الأفتح + 0.05) / (الأغمق + 0.05).

ما الفرق بين معايير AA وAAA؟

يتطلب AA نسبة 4.5:1 للنص العادي و3.0:1 للنص الكبير؛ بينما يتطلب AAA نسبة 7.0:1 و4.5:1.

ما المقصود بالنص الكبير في المعايير؟

هو النص الذي لا يقل عن 18pt (حوالي 24px) أو 14pt (حوالي 18.66px) عريض.

ما هو معيار التباين غير النصي؟

معيار 1.4.11 يتطلب تبايناً لا يقل عن 3.0:1 لحدود حقول الإدخال والأزرار والأيقونات.

كيف تعمل خوارزمية اقتراح الألوان؟

تعدل درجة السطوع في فضاء OKLCH عبر البحث الثنائي لإيجاد أقرب لون يحقق التباين.

ماذا يعني «أقل تغيير» رياضياً؟

يعني تقليل مسافة Delta E في فضاء Oklab للحفاظ على نبرة وهوية اللون قدر الإمكان.

كيف يتم استخراج الألوان من الصور؟

عبر تشغيل خوارزمية القطع المتوسط (Median Cut) على بيكسلات الصورة داخل المتصفح.

كيف يتم التعامل مع البيكسلات الشفافة في PNG؟

يتم استبعاد أي بيكسل تقل شفافيته عن 128 تلقائياً لتجنب تزييف الألوان.

هل يمكنني رفع صور فائقة الدقة؟

نعم، يتم تقليص أبعاد الصورة تلقائياً لسرعة الأداء وحماية ذاكرة المتصفح.

هل محاكاة عمى الألوان دقيقة تماماً؟

هي محاكاة تقريبية رياضية معتمدة، علماً بأن إدراك الألوان يختلف بين الأفراد.

ما هي أنواع عمى الألوان المتاحة؟

عمى الأحمر (Protanopia)، والأخضر (Deuteranopia)، والأزرق (Tritanopia)، والعمى التام (Achromatopsia).

لماذا لا يجوز الاعتماد على اللون فقط في الرسوم البيانية؟

لتمكين المصابين بعمى الألوان من التمييز عبر الأنماط المنقطة والرموز والعناوين النصية.

كيف يتم ضبط لوحة الألوان للنمط الداكن؟

تُعدَّل السطوع للألوان الأساسية على خلفيات داكنة (#0F172A) مع إعادة فحص التباين.

كيف يُفحص التباين على التدرجات اللونية؟

بأخذ 11 عينة عبر التدرج ومقارنة كل منها مع النص للتنبيه بنقاط الضعف الموضعية.

ما هي التوصيات لوضع نص فوق صورة فوتوغرافية؟

تحلل الأداة متوسط السطوع وتقترح لون النص وتحدد شفافية الغطاء المعتم لضمان وضوحه.

هل تدعم الأداة تصدير Tailwind CSS؟

نعم، تدعم إعدادات Tailwind v3 وتنسيقات `@theme` لـ Tailwind v4.

ما هي محتويات ملف ZIP القابل للتنزيل؟

يشمل palette.css وpalette.scss وtailwind.config.js وtokens.json وpalette.svg وpalette.png.

هل تعمل الأداة على الهواتف الذكية؟

نعم، تدعم الواجهة التجاوب الكامل على أجهزة الجوال والأجهزة اللوحية.

هل يعني اجتياز فحص التباين توافق الموقع بالكامل مع إمكانية الوصول؟

كلا، التباين ركن أساسي ولكنه جزء من منظومة تشمل التنقل بلوحة المفاتيح وقارئات الشاشة وغيرها.

المزيد من الأحجام والأدوات

استوديو لوحة ألوان الصورة

استخرج لوحات ألوان جاهزة للتصميم من الصور. انسخ HEX وأنشئ تدرجات ومتغيرات CSS وصدّر PNG/SVG/JSON داخل المتصفح.

فتح استوديو اللوحة →
مقارنة النصوص وفرق الاختلاف

قارن بين نصين أو مستندين أو كود أو JSON على مستوى السطر أو الكلمة أو الحرف، مع دعم الفروق الدلالية لـ JSON.

مقارنة النصوص →
مخطط اجتماعات المناطق الزمنية

قارن التوقيت حول العالم وابحث عن أوقات مناسبة للاجتماعات عبر مناطق زمنية متعددة مع مراعاة التوقيت الصيفي وفرق التاريخ.

تخطيط وقت الاجتماع →
تشفير الملفات والنصوص

قم بتشفير الملفات والنصوص مباشرة في متصفحك باستخدام AES-256-GCM. لا يتم إرسال كلمات المرور أو البيانات إلى أي خادم.

تشفير الملفات والنصوص →