UtilitySansar
التصميم

Color Converter

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

ملخص الأداة

تستقبل هذه الأداة مدخلات منظمة وتُرجع مخرجات حتمية في المتصفح، دون رفع إلى الخادم.

اسم الأداة
Color Converter
غرض المدخلات
قدّم المحتوى المصدري لتحويله أو التحقق منه أو تحليله.
غرض المخرجات
احصل على مخرجات موحدة جاهزة للنسخ أو إعادة الاستخدام أو التصحيح.
مدخل مثال
#3b82f6
مخرج مثال
rgb(59, 130, 246) · hsl(217, 91%, 60%)
#3b82f6
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Contrast on white: 3.68:1 · on black: 5.71:1

Palette

مقدمة الأداة

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

نظرة عامة على الأداة

HEX is compact, RGB is intuitive for mixing, and HSL is best for describing tints, shades, and hue shifts. This converter keeps all three in sync as you edit any one. The palette row shows five lightness-shifted variants of your base color, handy for picking hover, focus, or background tints. All computation is pure client-side — nothing is uploaded.

حالات الاستخدام

  • Use Color Converter when you need fast convert hex, rgb, and hsl color formats instantly with a visual picker, palette suggestions, and copyable outputs.
  • Handle design workflows directly in the browser with no install required.
  • Support SEO long-tail intent by covering quick checks, troubleshooting, and one-off conversions.

أمثلة المدخلات/المخرجات

غرض المدخلات
#3b82f6
غرض المخرجات
rgb(59, 130, 246) · hsl(217, 91%, 60%)
غرض المدخلات
#fff
غرض المخرجات
#ffffff · rgb(255, 255, 255) · hsl(0, 0%, 100%)

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

Why is my 3-digit HEX auto-expanded?+
3-digit HEX is shorthand for the 6-digit version (#abc → #aabbcc). The tool normalizes to 6 digits so the value matches what CSS actually parses.
What does the contrast ratio mean?+
It is the WCAG luminance contrast ratio between your color and pure white or black. 4.5:1 is the AA threshold for normal text; 7:1 is AAA.
How is the palette generated?+
It takes the base color's HSL value and shifts lightness in ±20% and ±40% steps, keeping hue and saturation constant.

استكشف أدوات أخرى

اكتشف أدوات ذات صلة في الفئة التصميم أدناه.

استعرض كل التصميم

أدوات ذات صلة

أدوات منتقاة قد تجدها مفيدة