Frontend & Design
Color picker, WCAG contrast, gradient/shadow builder, code-to-image.
Color Picker & Converter
Hex to RGB converter and color format transformer. Convert colors between HEX (#FF5733), RGB (255,87,51), HSL, HWB, and OKLch instantly. Visual color picker with live preview. Essential for frontend developers and designers working with CSS.
Open →WCAG Contrast Checker
WCAG contrast checker — calculate color contrast ratios for WCAG 2.1 AA and AAA accessibility compliance. Instantly shows pass/fail for normal text, large text, and UI components. Required by ADA, EN 301 549, and Section 508.
Open →CSS Gradient Builder
CSS gradient generator — build linear, radial, and conic gradients with live preview. Add color stops, adjust angles and positions, and copy the CSS background property. Also generates gradient text CSS using -webkit-background-clip. Works in all modern browsers.
Open →CSS Box-Shadow Builder
CSS box-shadow generator — build drop shadows with an interactive visual editor. Control horizontal/vertical offset, blur radius, spread, color, opacity, and inset. Stack multiple shadow layers. Copy the CSS property with one click.
Open →Color Palette Generator
Color palette generator — create complementary, analogous, triadic, split-complementary, and monochromatic color palettes from any base color. Outputs HEX, RGB, and HSL values. Copy as CSS variables. Great for web design and brand identity work.
Open →SVG Optimizer
SVG optimizer online — minify and optimize SVG files. Removes comments, metadata, hidden elements, editor namespaces (Inkscape, Adobe, Sketch), and unnecessary attributes. Shows exact size reduction. Essential for web performance and icon systems.
Open →CSS Clip-path Builder
CSS clip-path generator — visually build polygon, circle, ellipse, and inset clip-path shapes with drag-and-drop point editing. Live preview on a sample element. Copy the CSS clip-path property instantly. Create custom shapes, diagonal sections, and image masks.
Open →