How color picker works
The color picker uses your browser native color input so you can drag through the spectrum or type an exact hex value. The chosen color is converted into every code format a developer commonly needs: a 6-digit hex, the 3-digit shorthand when it exists, and the rgb(), rgba(), hsl() and hsla() CSS function strings you can paste straight into a stylesheet.
Behind the scenes the red, green and blue channels are converted to the HSL (hue, saturation, lightness) color space. Hue is an angle around the color wheel, so rotating it by fixed amounts produces harmonious neighbors: 180 degrees is the complementary color, and ±30 degrees are the analogous colors that sit next to the base on the wheel.
The coordinating palette shows your base color plus its complementary and analogous neighbors, so you can build a small, coherent scheme without a separate tool. Click any code or swatch to copy it to the clipboard.