Google PlayGoogle Play
Temp Mail Logo

Temp Mail safeguards your privacy while keeping your inbox free from spam.

🎨 HEX · RGB · HSL · Palettes · Contrast · CSS Colors

Color Picker

Free color picker and converter. Pick any color and instantly get HEX, RGB, and HSL values. Generate tint and shade palettes, check contrast, and copy any format with one click.

✓ HEX/RGB/HSL✓ Visual picker✓ Tint & shade palette✓ Contrast detection✓ No signup
#2563EB
HEX
#2563EB
RGB
rgb(37, 99, 235)
HSL
hsl(224, 85%, 53%)
RGB Sliders
R37
G99
B235
HSL Sliders
H224
S85%
L53%
Presets
Tint & Shade Palette (click to select)
What this tool does

Free color picker: convert HEX, RGB, and HSL colors with palette generation and contrast detection

How color formats work and how to use this tool for web design

This color picker lets you select any color using the native browser color picker or by typing a HEX code directly. It instantly converts between all three CSS color formats, HEX (#2563eb), RGB (rgb(37,99,235)), and HSL (hsl(224,85%,53%)), with copy buttons for each. RGB and HSL sliders let you fine-tune individual channels. The tool automatically detects whether black or white text has better contrast against your chosen color, which is useful for designing accessible UI components.

The tint and shade palette generates 7 variations of your color from near-white to near-black by varying the lightness in HSL space while keeping the hue and saturation constant. This is the same technique used by Tailwind CSS and other design systems to create their color scales. Click any palette swatch to select that shade as your active color.

FAQ

Frequently asked questions about color formats, HEX, RGB, and HSL

What is the difference between HEX, RGB, and HSL?
HEX (hexadecimal) is a 6-character code like #2563eb used in CSS and HTML. It represents each color channel (red, green, blue) as a 2-digit hex number from 00 to FF. RGB (red, green, blue) expresses the same three channels as decimal numbers from 0 to 255. Rgb(37, 99, 235). HSL (hue, saturation, lightness) uses a different model: hue is the color angle (0-360°), saturation is the intensity (0-100%), and lightness is the brightness (0-100%). HSL is more intuitive for designers because adjusting just the lightness gives you tints and shades.
How do I pick accessible color combinations?
Accessibility guidelines (WCAG 2.1) require a contrast ratio of at least 4.5:1 between text and its background for normal text, and 3:1 for large text (18pt+ or 14pt bold). Black text on a white background has a 21:1 ratio. Maximum contrast. This tool shows whether black or white text would be more readable on your chosen color. For precise contrast ratio calculations, use a dedicated contrast checker tool alongside this color picker.
What is HSL and why is it useful for design?
HSL stands for Hue, Saturation, Lightness. The hue component (0-360°) selects the base color on the color wheel, 0° is red, 120° is green, 240° is blue. Saturation (0-100%) controls how vivid the color is, 0% is grey, 100% is fully saturated. Lightness (0-100%) controls brightness, 0% is black, 100% is white, 50% is the pure color. HSL is useful in design systems because you can create a full tint/shade scale for any color simply by varying the lightness value while keeping hue and saturation constant.
What is a color tint and shade palette?
A tint is a color mixed with white (higher lightness), and a shade is a color mixed with black (lower lightness). A palette typically includes 7-11 steps from near-white to near-black for a single hue. Design systems like Tailwind CSS, Material Design, and Ant Design all use this pattern. For example, Tailwind's blue-100 through blue-900. This tool generates a 7-step tint/shade scale for any color, which you can use as a starting point for your design system's color tokens.
Related Design Tools
Lorem Ipsum GeneratorMarkdown EditorPassword GeneratorAll Tools

Need a disposable email address?Get a free instant throwaway email. No signup, no trace.

Get Free Temp Mail →