Free Color Picker Online
Pick any color and instantly get its HEX, RGB, and HSL codes. Generate tints and shades, inspect component values, and copy any format in one click — no signup, works entirely in your browser.
HEX
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
Color Components
Tints & Shades
What This Tool Does
Everything you need to pick a color, understand it, and use it in your project.
HEX, RGB & HSL
Every color you pick is instantly converted to all three formats. Copy any one in a single click.
Tints & Shades
Generates 7 steps from darker shades to lighter tints. Click any swatch to select that variant.
One-Click Copy
Copy the exact format you need — HEX, rgb(), or hsl() — directly to your clipboard.
Component Breakdown
Visual sliders for each RGB and HSL channel so you can see exactly how the color is built.
HEX vs RGB vs HSL — When to Use Each
All three formats represent the same color. Which one you use depends on your context.
HEX
#6366F1
Static CSS values, design files, brand color references. Most design tools export HEX by default.
✓ Compact and universally supported.
− Not intuitive to read or modify manually.
RGB
rgb(99, 102, 241)
When you need transparency via rgba(). Also useful in JavaScript for dynamic color calculations.
✓ Easy to add opacity with rgba().
− Harder to visualise the actual color from the numbers.
HSL
hsl(239, 84%, 67%)
Design systems, CSS custom properties, generating color scales programmatically. Rotate hue to get complementary colors.
✓ Most human-readable. Easy to adjust brightness or saturation.
− Less commonly used in legacy codebases.
Common Use Cases
Where this tool fits into real design and development workflows.
Building a Design System
Pick your base brand color, then use the tints and shades scale to generate your full color palette — backgrounds, borders, hover states, and text variants.
Converting Between Formats
Got a HEX code from a client's brand guide but your codebase uses HSL tokens? Paste the hex, copy the HSL. Done in two clicks.
Matching a Color from a Design File
Use the hex input to enter a color directly from Figma or Sketch and instantly see all its values and variants without leaving your browser.
CSS Custom Properties
HSL is ideal for CSS variables because you can derive tints and shades with calc(). Use this tool to find your base HSL values, then build your token scale.
Frequently Asked Questions
Common questions about color formats, formats, and browser support.
What is a HEX color code?
A HEX code is a six-character string prefixed with # representing a color's red, green, and blue channels as hexadecimal values. #FF0000 is pure red, #000000 is black, #FFFFFF is white.
What is the difference between RGB and HSL?
RGB defines a color by its red, green, and blue channel values (0–255 each). HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is more intuitive — you can adjust brightness or saturation without changing the underlying color.
What are tints and shades?
A tint mixes your color with white (lighter). A shade mixes it with black (darker). Design systems use tint/shade scales to build accessible palettes for backgrounds, borders, hover states, and text.
Which color format should I use in CSS?
All three work in CSS. HEX is most common for static values. Use rgba() when you need transparency. Use HSL when building design tokens or generating scales — it's the easiest to reason about and modify.
Does this color picker work on mobile?
Yes. Tapping the swatch opens your device's native color picker. All formats update instantly and copy buttons work across mobile browsers.