Enter a color in any common format and get it back in all the others, with a live swatch. The contrast checker scores the color against white and black text to WCAG standards, and the shade generator gives you a tint and shade ramp to build a palette from.
RGB and HEX describe how much red, green and blue light to mix - exactly how a screen works, and exactly not how anyone thinks about colour. HSL splits the same information into hue, saturation and lightness, so "the same blue but lighter" is one number away instead of three. HSV is similar but uses value rather than lightness, which is what most colour pickers show.
WCAG AA asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. The ratio is computed from relative luminance, which weights green far more heavily than blue because human vision does. That is why light yellow text on white fails badly while the same lightness in blue may pass.
The tint and shade ramp below moves lightness while holding hue and saturation. It is a reasonable starting point for interface states - hover, active, disabled - though for a full design system you usually want to nudge saturation as well, since pure lightness ramps look washed out at the pale end.
RGB mixes red, green and blue light, which is how screens work but is unintuitive to adjust by hand. HSL describes hue, saturation and lightness, so making a color lighter or less saturated is a single number change. They describe the same colors.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1. The checker shows the ratio against white and black and which levels pass.
Steuervergleich Kanton Zürich — Gemeindesteuern vergleichen (Deutsch)