Color Picker — HEX RGB HSL Free Online Tool

Pick any color and get HEX, RGB, HSL, and HSV values instantly. Visual color wheel, 9-shade palette, and CSS variable output. No signup needed.

Pick a Color

#4F46E5

HEX

RGB

HSL

HSV

CSS Variable

Color Shades (click to copy)

All processing in browser — nothing sent to server.

How to Use the Color Picker

Pick or type a colorClick the color wheel or type a HEX code directly into the input field

Copy any formatClick HEX, RGB, HSL, or CSS Var buttons to copy that format to clipboard

Use the shadesClick any shade swatch to copy it — 9 shades from lightest to darkest

Color Picker — Every Format, One Tool

Web development requires color values in multiple formats depending on context. CSS accepts HEX for static colors, RGB when you need opacity, HSL when you want to programmatically adjust lightness or saturation, and custom properties when building design systems. Switching between formats manually is slow and error-prone. This picker converts instantly as you select a color.

Designing with Shades

Every design system uses color shades rather than a single flat color. Tailwind generates 10 shades per color. Material Design generates 14. Buttons use the primary color. Hover states use a slightly darker shade. Backgrounds use the lightest shade. The 9 shades generated here follow the same principle — adjusting HSL Lightness in equal steps from very light to very dark while keeping the hue constant.

CSS Custom Properties

The CSS variable output is ready to paste into your :root block. Define --color-primary once and reference it as var(--color-primary) everywhere in your stylesheet. When the brand color changes, update one line.

Frequently Asked Questions

HEX is a 6-character code like #4f46e5 representing Red, Green, Blue values in base-16. RGB shows the same values as three numbers: rgb(79, 70, 229). Both describe the same color. HEX is compact and common in CSS. RGB is more readable when adjusting individual channels.

HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0-360), Saturation is intensity (0-100%), Lightness is brightness (0-100%). HSL is easier to adjust programmatically. To make a color lighter, just increase the L value. CSS supports hsl() natively.

On Windows, use the built-in Snipping Tool color picker or the PowerToys Color Picker (Win+Shift+C). On Mac, use the Digital Color Meter app. Chrome DevTools has a color picker in the CSS panel. Once you have the HEX value, paste it into this tool for all format conversions.

Shades are lighter and darker variations of the same hue. This tool generates 9 shades by adjusting the HSL Lightness value from +48 (lightest) to -48 (darkest). Design systems like Tailwind CSS generate 10 shades per color using this approach.

CSS custom properties (variables) let you define a color once and reference it everywhere. The output --color-primary: #4f46e5; can be placed in :root in your CSS file. Change the value there and it updates across your entire stylesheet.