Free Online Color Tools

Color Picker Pick any color and instantly get HEX, RGB, HSL, HSV, and CMYK codes plus the nearest color name. Image Color Picker Upload an image and click anywhere to get the exact HEX and RGB color of that pixel. Color Wheel Tool See where your color sits on the color wheel along with its complement and triadic partners. Color Mixer Mix two colors by any ratio and get the blended color, a blend scale, and CSS color-mix(). Random Color Generator Generate random colors with HEX, RGB, and HSL codes for instant inspiration. Glassmorphism CSS Generator Generate frosted glass UI effects with transparency, backdrop blur, and copy-ready CSS. Button Color Generator Generate hover, active, focus, and disabled button colors with accessible text. Image to Palette Extractor Upload an image to extract its dominant color palette, processed privately in your browser. Color Name Finder Find the closest CSS color name for any HEX or RGB code, with the top 5 matches. Color Inverter Invert any color to its negative and compare it with the true complementary color.

Color Code Converter Paste a HEX, RGB, HSL, or CSS color name and convert it to every other color format. HEX to RGB Converter Convert HEX color codes to RGB and RGBA values with a step-by-step breakdown of the math. RGB to HEX Converter Turn red, green, and blue values into a HEX color code, including 3-digit shorthand. HEX Opacity Calculator Add transparency to any color and get 8-digit HEX, RGBA, and HSLA values instantly. CSS Box Shadow Generator Design CSS box shadows visually with offset, blur, spread, color, and inset controls. Tailwind CSS Color Generator Turn any color into a Tailwind 50–950 shade scale for tailwind.config.js or @theme. Light & Dark Theme Previewer Preview an accent color in light and dark themes side by side and copy the theme CSS. HTML Color Names Browse and search all 148 HTML and CSS named colors with HEX and RGB values.

Color Palette Generator Generate a 5-color UI palette with primary, secondary, accent, and neutral roles from one base color. Color Shades Generator Generate a 10-step scale of lighter and darker shades of any color for design systems. Tint, Tone and Shade Generator See the tints, tones, and shades of any color side by side with copy-ready values. Complementary Color Finder Find the complementary and split-complementary colors of any color for strong contrast. Color Harmony Generator Generate analogous, triadic, tetradic, split-complementary, and monochromatic color schemes. Random Color Palette Generator Generate random yet harmonious 5-color palettes for fast creative exploration. Pastel Color Generator Generate soft pastel color palettes for gentle, elegant, and friendly designs. Neon Color Generator Generate bright neon colors and copy glowing text and button CSS effects.

Color Contrast Checker Check the contrast ratio of text and background colors against WCAG AA and AAA. Typography Contrast Tool Test text color readability at real font sizes and weights against WCAG rules. Color Blindness Simulator Simulate how two colors look with protanopia, deuteranopia, tritanopia, and achromatopsia.

Gradient Generator Create smooth two-color linear gradients and copy the CSS in one click. Multi-Color Gradient Generator Build three-stop linear gradients with a middle color and copy-ready CSS. CSS Gradient Code Generator Generate linear, radial, and conic gradient CSS code with a solid-color fallback. Animated Gradient Generator Create animated CSS gradient backgrounds with keyframes and reduced-motion support. Gradient Border Generator Create CSS gradient borders that work with rounded corners and copy the code.