← Moe's Tools

Color Tools

Pick, extract, and check colors — entirely in your browser.

Color Picker
Palette Generator
Contrast Checker

Color Picker

Drop an image, then click anywhere on it to sample that exact color.

HEX:
RGB:
HSL:

Palette Generator

Drop an image — pull out its 5 most dominant colors automatically.

Contrast Checker

Check if two colors meet WCAG accessibility contrast requirements.

The quick brown fox jumps over the lazy dog
—
contrast ratio
How to use this tool

Color Picker

  1. Click the "Color Picker" tab (selected by default).
  2. Click the box (or drag an image onto it) to load a photo or screenshot.
  3. Click anywhere on the image — the exact pixel color appears below as HEX, RGB, and HSL.
  4. Click "Copy" next to any value to copy it to your clipboard.

Palette Generator

  1. Click the "Palette Generator" tab.
  2. Add an image — its 5 most common colors are extracted automatically.
  3. Click any swatch to copy its hex code.

Contrast Checker

  1. Click the "Contrast Checker" tab.
  2. Pick a text color and a background color (or type a hex code directly).
  3. The contrast ratio updates instantly, with pass/fail badges for WCAG AA and AAA at both normal and large text sizes.
What you can do with Color Tools
FAQ

What format are the color codes in?Colors are shown as HEX, RGB, and HSL — the standard formats used in web design and most design tools.

What contrast ratio do I need for accessibility?WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA (stricter) requires 7:1 and 4.5:1 respectively.

Can I pick a color from any image?Yes — any JPG, PNG, or WebP image you drop in can be sampled pixel by pixel.

How is the palette generated?It analyses the image and extracts its 5 most common colors automatically — no manual picking needed.