Color Picker & Gradient Generator

Color Picker & Gradient Generator

This combined tool helps web designers, developers and digital artists work with colors efficiently. The Color Picker mode lets you choose any color and instantly get its HEX, RGB and HSL representations, plus auto-generated shades, tints and complementary colors. The Gradient Generator mode lets you build beautiful CSS gradients visually - pick two colors, choose a type (linear, radial or conic), set the angle, and copy the CSS code with one click. Everything runs in your browser; nothing is uploaded.

Color Formats Explained

Different contexts use different color formats. Here's a quick reference:

• HEX (#RRGGBB): The most common format on the web. Each pair of hex digits represents red, green and blue values from 00 to FF. Example: #3b82f6 = (59, 130, 246). Compact and widely supported.
• RGB (r, g, b): Three decimal values from 0 to 255. Used in CSS as rgb(59, 130, 246). Easier to read than HEX for many developers.
• HSL (h, s%, l%): Hue (0-360°), Saturation (0-100%), Lightness (0-100%). HSL is the most intuitive for designers because you can adjust lightness independently of color. hsl(217, 91%, 60%) is the same as #3b82f6.
• RGBA / HSLA: Same as RGB/HSL but with an alpha (opacity) channel from 0 to 1. rgba(59, 130, 246, 0.5) is 50% transparent.
• 8-digit HEX (#RRGGBBAA): Modern hex with alpha. #3b82f680 = 50% transparent blue. Supported in all modern browsers.

How to Choose Colors That Work Together

Great color palettes don't happen by accident - they follow principles of color theory:

• Monochromatic: Variations of a single hue (different shades and tints). Safe, calm, easy to design. Good for minimal sites.
• Analogous: Colors next to each other on the color wheel (e.g. blue, blue-green, green). Pleasing to the eye, found in nature.
• Complementary: Opposite colors on the wheel (e.g. blue and orange). High contrast, attention-grabbing. Use sparingly.
• Triadic: Three colors equally spaced on the wheel (e.g. red, yellow, blue). Vibrant but balanced.
• 60-30-10 rule: Use 60% of a dominant color, 30% of a secondary, 10% of an accent. This creates visual hierarchy.

Tools like Adobe Color, Coolors and Paletton can help you build palettes. Our complementary row gives you a quick starting point.

CSS Gradients: A Practical Guide

Gradients add depth and visual interest without image files. They're defined in CSS using the linear-gradient(), radial-gradient(), or conic-gradient() functions:

• Linear: Color transitions along a straight line at a specified angle. 0deg = bottom-to-top, 90deg = left-to-right, 180deg = top-to-bottom.
• Radial: Color radiates from a center point outward. Good for spotlights, vignettes, and radial emphasis.
• Conic: Color transitions rotate around a center point. Useful for pie charts and color wheels.

You can add more than two colors: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). You can also specify color stops: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%). Combine multiple gradients with commas for layered effects.

Use Cases for Gradients

• Hero section backgrounds: Subtle gradients add depth without distracting from content.
• Buttons: A subtle gradient (e.g. #3b82f6 → #2563eb) makes buttons feel more clickable.
• Text overlays: Gradients on top of images ensure text remains readable.
• Loading indicators: Animated gradients create smooth progress bars.
• Brand identities: Gradients are part of brands like Instagram, Stripe, and Firefox.
• Illustrations: Use gradients as a base for flat design illustrations.

Accessibility Considerations

When using colors, ensure sufficient contrast for users with visual impairments. The Web Content Accessibility Guidelines (WCAG) require:

• Normal text: Contrast ratio of at least 4.5:1 against the background.
• Large text (18pt+ or 14pt+ bold): Contrast ratio of at least 3:1.
• UI components and graphics: Contrast ratio of at least 3:1.

Use a tool like WebAIM's Contrast Checker to verify. Dark blue on white (like #3b82f6 on #ffffff) has a ratio of 3.7:1, which fails for normal text but passes for large text. For body text, use a darker shade like #1e40af (ratio 8.6:1).

Privacy

This color tool runs entirely in your browser. Saved gradients are stored in your browser's localStorage and never leave your device. Clearing your browser data will remove them.