Color Picker

Generate palettes & design tokens

Color Formats

HEX

#3b82f6

RGB

59, 130, 246

HSL

217°, 91%, 60%

HSV

217°, 76%, 96%

OKLCHModern, perceptually uniform

60, 0.91, 217°

Color Picker & Palette Generator

A developer-first color picker with instant export to CSS variables, Tailwind config, Sass, JavaScript, and JSON. Unlike traditional color pickers that leave you copying hex codes one by one, our tool generates complete design systems with 50-900 shade scales, accessibility checking, and ready-to-use code.

Pick a color and instantly see it in multiple formats (HEX, RGB, HSL, HSV, OKLCH), generate harmonious palettes (complementary, analogous, triadic, monochromatic), create full shade scales for design systems, and validate WCAG contrast ratios for accessibility. Export your entire color system as CSS custom properties, Tailwind config, Sass variables, or design tokens with one click.

Features include real-time WCAG AA/AAA compliance checking, shade generation from a single color, color harmony suggestions, multiple format outputs, and a clean ad-free interface designed for speed and developer workflow.

Key Capabilities

  • 5 color formats: View your color as HEX (#3b82f6), RGB (59, 130, 246), HSL (217°, 91%, 60%), HSV (217°, 76%, 96%), and OKLCH (0.63, 0.18, 238) with instant copy buttons for each format.
  • Developer-first exports: One-click export to CSS custom properties, Tailwind config, Sass/SCSS variables, JavaScript objects, or JSON design tokens. No manual copying — get production-ready code instantly.
  • Shade generator: Generate full 50-900 shade scales from a single color. Perfect for building design systems with consistent color scales across your UI (50=lightest, 500=base, 900=darkest).
  • Color harmonies: Generate complementary, analogous, triadic, split-complementary, and monochromatic palettes based on color theory. Instant suggestions for visually pleasing color combinations.
  • WCAG contrast checker: Real-time contrast ratio calculation with AA/AAA compliance indicators for normal text, large text, and UI components. Ensures your colors meet accessibility standards.
  • Quick color input: Paste any hex code, use the visual picker, or type RGB/HSL values. Supports #RGB, #RRGGBB, and named colors. Instant conversion between all formats.
  • Copy with one click: Every color value, every shade, every format has its own copy button. No manual selection needed — just click and paste into your code.

Developer Experience

Client-side processing: All color conversions and calculations happen in your browser. No server requests, instant performance, works offline after initial load.

Zero ads, zero clutter: Unlike competitors with intrusive ads and premium upsells, our tool is completely free with a clean, focused interface designed for developer productivity.

Keyboard-first: Navigate and interact using keyboard shortcuts. Tab through inputs, arrow keys for fine-tuning, Enter to copy — optimized for developer workflow.

How to Use

  1. Pick a color using the visual picker or paste a hex code.
  2. View the color in all formats (HEX, RGB, HSL, HSV, OKLCH) with instant copy buttons.
  3. Generate full shade scales (50-900) for design systems from the Shades tab.
  4. Explore color harmonies (complementary, analogous, triadic) from the Harmony tab.
  5. Check WCAG contrast ratios against your background color for accessibility.
  6. Export your color system as CSS variables, Tailwind config, Sass, JS, or JSON.

Frequently Asked Questions