Picking a color
Every color on a screen can be described with three numbers. The big square and the strip next to it let you change all three by eye.
The little round buttons next to the numbers decide what the strip does. Pick H (hue) and the strip becomes a rainbow: choose a color family there, then find the exact shade in the square, which runs from grey to vivid left to right and from dark to light bottom to top. That's the layout most design apps use.
Prefer to type? Every number can be typed, nudged with the arrow keys (hold Shift to jump by 10), or dragged: press on a letter such as H: and slide left or right.
Lab mode works the way your eyes judge colors, so it can describe colors your screen simply can't show. Tick Gamut warning to grey those out. Only web colors limits you to the 216 classic web-safe colors.
Channels
Shows all the numbers of one color model at once, each with its own slider, like the Color panel in a design app.
The color in each slider is a preview: it shows what you would get if you moved only that slider. So you can see where you are heading before you drag.
CMYK is for print. The numbers come from a real printing profile (you can change it on the Convert page), so they're close to what a print shop would use.
Hue, Saturation and Lightness
The Adjust panel works like Hue/Saturation and Color Balance in Photoshop. Nothing changes until you say so: the left swatch keeps your original color, the right one shows the result, and Apply makes the result your new color.
Hue turns the color around the color wheel: red slides towards orange and yellow one way, towards purple and blue the other. How strong and how light it is stays the same.
White, black and greys have no hue, so there's nothing to turn and the Hue slider does nothing. To tint them, tick Colorize.
Lightness mixes in white or black, like adding white or black paint. Go all the way up and you get white; all the way down, black.
Lightness, from −100 to +100
Saturation and Vibrance
Saturation is how strong a color is. Turn it down and the color fades to grey; turn it up and it gets more intense, as far as your screen allows.
Saturation, from −100 to +100
Vibrance is the gentle version. It boosts dull colors a lot and leaves colors that are already strong almost alone, so nothing turns loud or garish. Try both sliders on a muted color, then on a bright one, and you'll see the difference.
Vibrance, from −100 to +100
Colorize
Colorize replaces the color's hue with one you choose and keeps only how light or dark it is. Think of tinting an old black-and-white photo sepia or blue.
When you tick it, it starts from your color's own hue with a soft tint, so nothing jumps. Then Hue picks the tint (0 to 360 around the wheel) and Saturation how strong it is.
Pure white and pure black can't take a tint, because there's no room left to add color. Move Lightness a little first.
Colorize all the way around the wheel
Color Balance
Color Balance nudges a color towards one side of three pairs: Cyan or Red, Magenta or Green, Yellow or Blue. Each pair are opposites, so less red means more cyan. It's the classic way to warm a color up (towards red and yellow) or cool it down (towards cyan and blue).
Shadows, Midtones, Highlights choose whether you're mainly changing dark, middle or light colors. Each one changes your color a little, and the one that matches it changes it the most. The hint under the sliders tells you which one that is.
Preserve luminosity keeps the color just as bright while you shift it, so you only change its tint.
Lightness or Contrast?
Both make a color lighter or darker, but they're meant for different jobs.
Lightness is for making tints and shades. Up always means lighter, and the color gets paler on the way, like paint with white mixed in.
Lightness, from −50 to +50
Contrast is for readability. It moves your color away from your background color, so text stands out more, and keeps the color just as rich. Up means "stand out more": darker on a light background, lighter on a dark one.
Contrast with your background, from −50 to +50
Need text that passes accessibility rules? Press AA or AAA and huebic moves Contrast just far enough to reach that level (4.5 : 1 or 7 : 1).
The numbers under the swatches
ΔE says how different your adjusted color is from the original. Under 1, nobody can see the difference; around 2, you can just spot it side by side; above 5, it's clearly another color.
The ratio next to it is the contrast with your background, and whether that's enough for text: AA is fine for most text, AAA is better, "large text" only works for big headings.
Apply keeps your result and makes it the new starting point. Reset puts every slider back to zero. Picking a new color anywhere starts fresh.
Tip: the ▲ under each strip marks your own color, with the slider at zero. Click any color in the strips to start from it.