🎨 Free Color & Design Tools
Pick colors, generate palettes, create gradients, check contrast ratios, and convert between color formats. Essential tools for designers.
29 free tools available
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats instantly.
Color Palette Generator
Generate harmonious color palettes. Analogous, complementary, triadic, monochromatic, and random schemes.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients. Copy CSS code instantly.
Color Contrast Checker
Check foreground and background color contrast for WCAG 2.1 accessibility compliance. AA and AAA levels with fix suggestions.
Color Converter
Convert colors between HEX, RGB, HSL, and CMYK formats. Live preview with interactive sliders and one-click copy.
Color Blindness Simulator
Simulate how colors appear to people with color vision deficiency. Test designs for accessibility.
Color Name Finder
Find the closest CSS color name for any hex color. Browse all 148 named CSS colors with search and preview.
Image Color Picker
Upload any image and pick colors from it. Get HEX, RGB, and HSL values instantly. Build color palettes from your photos.
Interactive Color Wheel
Explore colors with an interactive HSL color wheel. Pick any hue, adjust saturation and lightness, and get HEX, RGB, and HSL values with automatic harmony generation.
Font Pair Generator
Discover beautiful Google Fonts pairings. Preview heading and body font combinations live, adjust sizes, and copy CSS import code instantly.
Color Mixer
Blend and mix colors together with adjustable weights. See results in HEX, RGB, and HSL with live gradient preview.
Gradient Text Generator
Create CSS gradient text effects with live preview. Choose presets, custom colors, angles, and optional animation.
Color Shade Generator
Generate tints, shades, and tones of any color. Create complete Tailwind CSS color scales. Copy individual values or full palette.
Color Temperature
Convert color temperature in Kelvin to RGB and HEX. Visualize warm to cool light from candle (1800K) to sky (15000K).
Color Gradient Picker
Create beautiful linear, radial, and conic CSS gradients with live preview. 16 presets, up to 6 color stops, save favorites.
Color Blindness Simulator
Upload images to see how they look through different types of color vision deficiency. Supports protanopia, deuteranopia, tritanopia, and achromatopsia with split-view comparison.
Color Blindness Checker
Test your color palette against 7 types of color vision deficiency. See how your chosen colors appear to people with protanopia, deuteranopia, tritanopia, and more.
Color Palette Extractor
Extract dominant colors from any image using median-cut quantization. Get a beautiful palette with hex codes for your designs.
Color Name Finder
Enter a hex code or pick a color to find its closest CSS named color. Browse and search all 148 CSS named colors with copy support.
Color Harmony Generator
Generate beautiful color harmonies from any base color. Complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes.
Color Palette from Image
Extract dominant colors from any image. Upload a photo and get a color palette with hex codes, RGB values, and usage percentages.
HTML Color Codes
Browse all 148 named HTML/CSS colors with hex codes and RGB values. Search, filter by hue, and copy any color instantly.
Tailwind CSS Color Picker
Browse all Tailwind CSS colors with shades 50-950. Click to copy class names or hex values. Search and filter by color family.
Pantone Color Finder
Enter a hex or RGB color and find the closest Pantone matches from a database of 200+ popular Pantone colors.
CSS Gradient Maker
Create beautiful CSS gradients with 2-5 color stops. Choose linear or radial direction, preview live, and copy CSS code.
Color Contrast Checker
Check WCAG contrast ratios between foreground and background colors. Verify AA/AAA compliance for accessibility.
Color Temperature Picker
Interactive Kelvin color temperature slider (1000K-12000K). Shows RGB values with common references for photography and video.
Neon Text Generator
Create neon text with CSS text-shadow glow effects. Multiple colors, animation styles (steady, pulse, flicker), and font options. Copy CSS.
Material Design Color Picker
Browse all Material Design colors with shades 50-900 and accents A100-A700. Click to copy hex. View RGB and HSL values.
Frequently Asked Questions
What color formats are supported?
Our tools support HEX, RGB, HSL, HSV, and CMYK color formats with instant conversion between all of them.
Does the contrast checker follow WCAG guidelines?
Yes, our contrast checker evaluates color combinations against WCAG 2.1 guidelines for AA and AAA compliance levels.
Can I export generated palettes?
Yes, you can copy individual color values in any format and use them directly in your CSS, design tools, or code.