Color Picker

Pick colors with HEX, RGB, HSL. Color harmony, WCAG contrast checker, gradient builder, Material/Tailwind palettes & eyedropper support.

Ctrl/⌘ + , to toggle options
Saved
Color Input
HEX#4f46e5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)
CMYKcmyk(66, 69, 0, 10)
Color Harmony
RGB Sliders
R79
G70
B229

◆ What it does

A comprehensive color tool with picker, harmony generator, WCAG contrast checker, gradient builder, and curated palette presets. Supports eyedropper API and localStorage history.

▸ How to use

  • Use the color picker to select a color and see HEX, RGB, HSL values
  • Generate harmonious colors: complementary, triadic, analogous, split-complementary
  • Check contrast ratio between two colors for WCAG AA/AAA compliance
  • Build CSS gradients with multiple color stops and angle control
  • Browse Material, Tailwind, and Pastel palette presets

▸ Why use this

  • All-in-one color tool for designers and developers
  • WCAG contrast checker ensures accessible color combinations
  • Generate harmonious color schemes instantly
  • Build and export CSS gradients with live preview
  • Eyedropper support for picking colors from your screen

Related Tools

CSS Gradient Box Shadow Favicon Gen