A colour picker is easy to use and easy to misuse. The difference is understanding what the numbers mean, because picking by eye in the wrong colour space is why so many first designs look muddy or fail accessibility checks.
Hex — #ff5f1f is three pairs of hexadecimal digits for red, green and blue, each 00 to ff (0-255). A fourth pair adds alpha. It is compact and unreadable: you cannot tell by looking whether #3a7bd5 is lighter than #4a90a4.
RGB — rgb(255 95 31) is the same thing in decimal. Useful when you need to compute a value.
HSL — hsl(20 100% 56%) splits colour into hue (0-360 around the colour wheel), saturation and lightness. This is the first notation you can reason about: keep the hue, drop the lightness, get a darker version of the same colour.
OKLCH — oklch(0.68 0.19 40) is lightness, chroma and hue in a perceptually uniform space. Its advantage is concrete: two colours with the same L look equally bright to the eye, which is not true in HSL. An HSL yellow at 50% lightness looks far brighter than an HSL blue at 50%.
Start with one hue you like. Build a scale by holding the hue fixed and stepping lightness — five to nine steps from near-white to near-black. Add a second hue for accents, either the direct opposite on the wheel (complementary, high contrast, easy to overdo) or 30-60 degrees away (analogous, calmer). Then add neutrals: greys with a tiny amount of your brand hue mixed in look intentional, while pure #808080 greys look like a default.
Text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG AA. Large text — 24px regular or 18.66px bold and above — needs 3:1, and so do the boundaries of interactive components and focus indicators. Any browser's DevTools shows the ratio in the colour picker when you inspect a text element, and it will tell you when a value fails. Check the pairs you will actually use, including muted text on tinted panels, which is where most designs fail.
color-mix(in oklch, var(--brand) 60%, white) generates a tint without any external tool.Pure black text on pure white is harsher than it needs to be; a very dark grey reads more comfortably. Fully saturated colours over large areas look aggressive — save 100% saturation for small accents. Using colour alone to convey state fails for colour-blind users, so pair every red error with an icon or a word. And never adjust brand colours by "making them a bit darker" in hex; change the lightness channel in HSL or OKLCH and the hue stays intact.