Color Picker
Pick any color and read off its HEX, RGB and HSL values, then build a quick palette from shades, tints and harmonies.
Harmonies - click to adopt
Shades - darker, click to copy
Tints - lighter, click to copy
Reading a color three ways
Every color on screen is a mix of red, green and blue light. This picker takes whatever you choose and translates it into the three notations you actually paste into code: HEX for CSS and design apps, RGB for the raw channel values, and HSL when you want to reason about the color by its hue and lightness. Change any of them by moving the native picker or typing a HEX code, and the rest update instantly.
Building a palette from one color
A single brand color rarely does the job on its own. You need a darker shade for a button's pressed state, a light tint for a subtle background, and a contrasting accent for links. The shades row mixes your color toward black in five steps; the tints row mixes toward white. The harmonies row gives you the complementary color (opposite on the wheel) and two analogous colors 30 degrees to each side - a reliable starting point for a two or three color scheme.
Where each format shines
- HEX - shortest to type, the default in Figma and most CSS.
- RGB - needed when you set opacity with rgba() or manipulate channels in JavaScript.
- HSL - the easiest to tweak by hand; drop the lightness a few percent for a darker variant without touching the hue.
Need to check a pair of colors will be readable together? Run them through the contrast checker. Want a full design-system scale rather than five steps? The shade generator produces a 50-900 ramp. And if you are moving values between formats, the HEX to RGB converter handles shorthand and alpha, while the gradient generator blends several stops into a background.