HEX / RGB / HSLPalette GeneratorEyeDropper API

How It Works

1

Pick a Color

Click the spectrum canvas or use the hue slider. Or pick from your screen with EyeDropper.

2

Convert Formats

See HEX, RGB, and HSL values update in real time. Edit any value to change the color.

3

Generate Palettes

Create Complementary, Analogous, Triadic, or Split-Complementary palettes. Click to copy.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?
HEX is a 6-character code (#FF5733) commonly used in web design. RGB defines colors by Red, Green, and Blue intensity (0-255). HSL uses Hue (0-360), Saturation (0-100%), and Lightness (0-100%), which is more intuitive for adjusting colors.
What are complementary colors?
Complementary colors sit opposite each other on the color wheel (180 degrees apart). They create high contrast and visual tension. Examples include red/cyan, blue/orange, and yellow/purple.
How do I create a harmonious color palette?
Use the palette generator to create Complementary (2 colors), Analogous (3 adjacent colors), Triadic (3 evenly spaced colors), or Split-Complementary (3 colors with softer contrast than complementary) palettes.
Does the EyeDropper work in all browsers?
The EyeDropper API is supported in Chrome, Edge, and Opera. Firefox and Safari do not yet support it. The button only appears when your browser supports the feature.
What is color theory?
Color theory is a framework for combining and using colors effectively. It includes the color wheel, color harmony rules (complementary, analogous, triadic), and concepts like warm/cool colors, contrast, and saturation to create visually appealing designs.
Share:

About Color Picker

What this tool does

Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.

Why use this tool

Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.

How it works

Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.

Pro tip

Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.

Deep Dive: Related Research

Color Theory for Digital Design 2026: Models, Accessibility, and Psychology

10,500 words · 22 min read

The Complete UI/UX Design Systems Guide 2026: Tokens, Typography, Color, Components & Accessibility

30,000 words · 65 min read

The Complete Guide to CSS in 2026

30,000 words · 65 min read

Explore More

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools