Developer Tools

Color Picker & Palette Generator

Pick a color and instantly see it in HEX, RGB, and HSL, along with a matching palette. Great for design systems, brand explorations, and quickly copying values into CSS.

Last updated July 19, 20263 min read
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Share:

How to use

  1. 1

    Pick a color

    Use the color picker or paste a HEX value.

  2. 2

    Read the values

    HEX, RGB, and HSL update live and can be copied with one click.

  3. 3

    Generate a palette

    Choose a color scheme to see matching swatches.

Benefits

  • Three formats side by side: HEX, RGB, HSL.
  • Five palette schemes based on color theory.
  • Click any swatch to copy its HEX.
  • Everything runs locally in the browser.

Common uses

  • Building brand palettes
  • Picking accent colors for a design system
  • Extracting values from a design mockup
  • Teaching color theory with real swatches

Frequently asked questions

Was this helpful?

Your feedback helps us improve our tools.