Pick a color and convert between HEX, RGB, HSL and HSV in your browser.
The basics
What does this tool do?
Pick any color with the saturation/brightness square and the hue slider, and the tool shows that color in four formats at once: HEX, RGB, HSL and HSV. Every field is editable — type a value into any one of them and the picker, the preview and all the other fields update to match. You also get a transparency (alpha) slider, ready-made palettes, tint and shade strips, and a WCAG contrast check.
What color formats can I paste in?
The HEX field accepts #RGB, #RRGGBB, and the alpha forms #RGBA and #RRGGBBAA (the leading # is optional). The RGB field takes rgb(r, g, b) or rgba(r, g, b, a); HSL takes hsl(h, s%, l%) or hsla(...); HSV takes hsv(h, s%, v%). Extra text and spacing are ignored, so pasting a full CSS declaration usually still works.
What's the difference between HSL and HSV?
Both start with hue (0–360° around the color wheel). HSL uses saturation and lightness, where 50% lightness is the most vivid color and 100% is always white. HSV (also called HSB) uses saturation and value/brightness, where 100% value is the most vivid color and you darken toward black. The picker square in this tool is an HSV square: left–right is saturation, top–bottom is value.
Palettes & variations
How are the palettes built?
They're classic color-wheel harmonies based on your current hue: complementary is the opposite hue (+180°), analogous is a set of neighbours (±15° and ±30°), and triadic is three hues evenly spaced 120° apart. Click any swatch to load it as the active color.
What are tints and shades?
Tints mix your color toward white, and shades mix it toward black — handy for building hover states, borders, and light/dark UI variants of one brand color. Click a swatch in either strip to make it the active color.
Can I save colors?
Yes. Press Save swatch to keep the current color; saved swatches appear in their own row and persist on this device between visits. Click a saved swatch to reload it, or right-click one to remove it.
Contrast & accessibility
What does the contrast section mean?
It shows your color's contrast ratio against pure white and pure black using the WCAG 2 formula. For normal text, AA requires at least 4.5:1 and AAA requires 7:1; large or bold text has lower thresholds (3:1 and 4.5:1). Use it to check whether a text color will be readable on a given background.
Privacy
Is anything uploaded?
No. All color math runs locally in your browser. Saved swatches live only in your own browser's storage on this device, and nothing is sent to a server.
