Color Picker & Palette Studio

Interactive HTML5 color picker, HEX/RGB/HSL/CMYK converter, WCAG contrast checker, and palette generator.

Color Picker & Palette Studio

HEX, RGB, HSL converter, WCAG accessibility contrast tester, and color palette generator.

Tints & Shades (Lighter / Darker Steps)

Random Preset Colors

Sample Headline Text

This is a sample paragraph to evaluate WCAG 2.1 legibility and contrast against the selected background color.

Contrast Ratio7.2 : 1
WCAG AA Normal Text (4.5:1)PASS
WCAG AAA Normal Text (7:1)PASS
WCAG AA Large Text (3:1)PASS

The DwellixTools Color Picker & Palette Generator is a feature-packed visual design tool for developers, web designers, UI/UX engineers, and graphic artists.

Easily pick any color from your screen using native browser eye-dropper APIs, convert values seamlessly between HEX, RGB, HSL, HSV, and CMYK formats, check accessibility WCAG 2.1 contrast compliance ratios for light/dark text, and generate monochromatic, complementary, triadic, and analogous color palettes with one-click CSS exports.

Key Features

  • Interactive Eye-Dropper & Eyedropper API: Pick exact pixel colors directly from your screen or image uploads.
  • Multi-Format Color Converter: Instant real-time conversion between HEX (#2f5fd6), RGB (rgb(47, 95, 214)), HSL (hsl(223, 67%, 51%)), and CMYK values.
  • WCAG 2.1 Accessibility Contrast Checker: Test text contrast ratios against background colors with AA and AAA pass/fail compliance ratings.
  • Harmonious Palette Generator: Automatically create Complementary, Monochromatic, Triadic, Tetradic, and Analogous color schemes.
  • Shade & Tint Generator: Generate 10-step lighter tints and darker shades for any base color.
  • One-Click CSS & Tailwind Export: Copy CSS custom properties (--color-primary: #...), Tailwind config objects, or raw hex values with a single tap.
  • 100% Client-Side Privacy: Operates entirely inside your browser with local storage history save.

How to Use the Color Picker

  1. Pick or Enter a Color: Use the visual color wheel, native eye-dropper tool, or type any HEX, RGB, or HSL value in the input box.
  2. Inspect Formats & Contrast: View instant HEX, RGB, and HSL conversions along with the WCAG 2.1 AA/AAA accessibility contrast score.
  3. Generate Palette: Click Generate Harmonies to view complementary, triadic, and monochromatic palette options.
  4. Copy Code: Click Copy HEX, Copy RGB, or Copy CSS Variables to paste directly into your stylesheet.

Frequently Asked Questions (FAQs)

What is WCAG Contrast Ratio?

Web Content Accessibility Guidelines (WCAG) dictate that text must have a minimum contrast ratio against its background (4.5:1 for normal text for Level AA, 7:1 for Level AAA) so visually impaired users can read your website easily.

What is the difference between HEX, RGB, and HSL?

  • HEX: Base-16 hexadecimal notation (#2F5FD6) commonly used in web design and CSS.
  • RGB: Red, Green, Blue intensity values (rgb(47, 95, 214)).
  • HSL: Hue, Saturation, Lightness values (hsl(223, 67%, 51%)), which make it much easier to calculate tints, shades, and harmonious color palettes programmatically.