🎨TintGrab |Palette Generator

Generate Accessible Color Palettes

Enter a hex color code or generate a random one to create color palettes with consistent hues and APCA-optimized contrast.

#

Switch between HEX, HSL, and LCH formats to fine-tune your base color.

0°
100%

All contrast values are calculated against this background color

magenta Palette

0 colors

APCA Contrast Analysis

APCA (Advanced Perceptual Contrast Algorithm) provides more accurate contrast measurements for readability. Values above 60 are generally good for text.

Background Color: #FFFFFF

All contrast values are calculated against this background

How to Use the Palette Generator

The Palette Generator creates accessible color palettes based on a single base color. Here's how to use it:

  1. Enter a HEX color code or use the color picker to select your base color
  2. Choose between "Primary" (vibrant) or "Neutral" (desaturated) palette types
  3. Adjust the Hue Shift slider to rotate the color's hue angle
  4. Use the Chroma Scale slider to increase or decrease color saturation
  5. Set a custom background color to test contrast ratios
  6. Copy individual colors by clicking on them or the entire palette using the "Copy Palette Code" button
  7. Download the palette as JSON for use in your projects

The palette follows the Tailwind CSS shade numbering convention, with 50 being the lightest shade and 900 being the darkest. Each color displays its LCH values (Lightness, Chroma, Hue) and APCA contrast ratio against the selected background.

Acknowledgements

This palette generator is inspired by and uses algorithms based on the excellent Huetone tool by Alex Ardov. Thank you for the innovative approach to color palette generation that prioritizes perceptual uniformity and accessibility.