Design & Dev

Color Picker: HEX, RGB, HSL & Building Color Palettes

Convert between HEX, RGB and HSL, generate accessible color palettes, and check WCAG contrast ratios — free in your browser.

9 June 2026·5 min read·Open the tool →

HEX vs RGB vs HSL

  • HEX (e.g. #10b981) — standard for CSS. Compact and widely supported.
  • RGB (e.g. rgb(16, 185, 129)) — useful for opacity: rgba(16, 185, 129, 0.5).
  • HSL (e.g. hsl(162, 84%, 39%)) — most human-readable. Adjusting L makes a color lighter or darker, ideal for generating shades.

How to generate a palette

  1. Open ToolCrix Color Picker.
  2. Pick your base/brand colour.
  3. The palette generator creates tints and shades automatically.
  4. Copy values as HEX, RGB, or HSL — or export the full palette.

WCAG contrast ratio

WCAG 2.1 requires:

  • 4.5:1 for normal text (AA).
  • 3:1 for large text (18pt+).
  • 7:1 for AAA compliance.

CSS gradient builder

Pick two or more colours and get the CSS linear-gradient() code to paste directly into your stylesheet.