How to Use the Colour Picker
Pick a colour with the swatch control or type a HEX value directly into the input. The tool immediately shows the equivalent RGB and HSL values plus a ready-to-paste CSS variable, and each format has its own copy button so you can drop the value straight into a stylesheet or design file.
Below the values you get generated shades and tints of your colour, useful for building hover states, borders and disabled styles from a single brand colour. The palette suggestions show complementary, triadic and analogous partners based on colour-wheel relationships, which is a quick way to build a coherent scheme when you only have one colour to start from.