Skip to main content

أدوات الألوان

حوّل الألوان واخترها واعمل بها.

A designer's and developer's color toolkit and CSS generators, free and browser-based. Convert between HEX, RGB, HSL, and CMYK, check WCAG contrast ratios for accessibility, extract palettes from images, mix colors, and simulate color blindness. The CSS generators build copy-ready code for gradients, box and text shadows, border-radius, filters, glassmorphism, and neumorphism with a live preview. Whether you are building a brand palette or fine-tuning a UI, these tools give you accurate values and production-ready CSS.

Popular أدوات الألوان

أدوات الألوان
CSS Gradient Builder
Visually build CSS gradients with a stop rail, color harmony, mesh layers, and copy-ready CSS variables.
Open Tool
أدوات الألوان
CSS Button Generator
Design CSS buttons with colors, borders, shadows, and hover states. Copy ready-to-use CSS, HTML, and Tailwind classes.
Open Tool
أدوات الألوان
RGB to HEX
Convert RGB and RGBA channel values into HEX color codes with a live preview.
Open Tool
أدوات الألوان
Color to Tailwind Class
Free color to Tailwind class converter — match any HEX or RGB color to the closest Tailwind CSS color utility.
Open Tool
أدوات الألوان
CMYK to RGB
Convert CMYK print color values to on-screen RGB and HEX for web and digital design.
Open Tool
أدوات الألوان
Neumorphism Generator
Create soft neumorphic UI shadows for raised, pressed, and flat surfaces with copy-ready CSS and Tailwind classes.
Open Tool
أدوات الألوان
Tailwind Color Generator
Generate a full Tailwind CSS shade scale (50–950) from a base color with copy-ready v3 config and v4 @theme exports.
Open Tool
أدوات الألوان
Brand Color Extractor
Upload a logo or brand image to extract dominant colors with HEX, RGB, and CSS variable exports.
Open Tool
أدوات الألوان
CSS Filter Generator
Tune CSS filter effects like blur, brightness, contrast, and hue-rotate with live preview and copy-ready CSS.
Open Tool
أدوات الألوان
Clip Path Generator
Design CSS clip-path shapes with live preview and copy-ready CSS, inline styles, and Tailwind classes.
Open Tool
أدوات الألوان
Border Radius Generator
Design CSS border-radius values per corner with live preview and copy-ready CSS, inline styles, and Tailwind classes.
Open Tool
أدوات الألوان
Color Mixer
Blend two or more HEX colors with adjustable weights using RGB or HSL mixing and copy the mixed result.
Open Tool