顏色工具

Check WCAG contrast ratios between text and background colors for accessibility compliance.

Generate linear, radial, and conic CSS gradients with repeating options and copy-ready background, Tailwind, and inline styles.

Preview how colors and images appear under protanopia, deuteranopia, tritanopia, and other color vision deficiencies.

Upload a logo or brand image to extract dominant colors with HEX, RGB, and CSS variable exports.

Extract a color palette from any image with sortable swatches and copy-ready HEX, JSON, CSS gradient, and SVG exports.

Generate random HEX colors and palettes in random, pastel, vibrant, dark, light, or muted styles.

Blend two or more HEX colors with adjustable weights using RGB or HSL mixing and copy the mixed result.

Create layered CSS text shadows with live typography preview and copy-ready CSS, inline styles, and Tailwind classes.

Design CSS border-radius values per corner with live preview and copy-ready CSS, inline styles, and Tailwind classes.

Create frosted glass UI styles with backdrop blur, translucent backgrounds, and copy-ready CSS and Tailwind classes.

Design CSS clip-path shapes with live preview and copy-ready CSS, inline styles, and Tailwind classes.

Visually build CSS gradients with a stop rail, color harmony, mesh layers, and copy-ready CSS variables.