ColorScale

This tool was born from the need to generate color scales based on a key color. There are multiple tools similar to this one but none of them fit my exact needs.

Heavily inspired by:

• hihayk color scale | repo
• color x color | repo

See also:

• D3-Color
• Tailwind
• Flowbite Components
• NextJS
• React Contexts

Getting Started

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Features

• Start with a "key" color
• Set number of light and dark steps
• Adjust hue shift in both directions with easing options
• Adjust lightness shift in both directions with easing options
• Adjust saturation shift in both directions with easing options
• Click each color to copy hex code
• Toggle advanced color mode to see additional information instead
  • Display WCAG Contrast and accessibility information
  • Display and click to copy color formats hex, rgb, hsl, and lch
• Display a luminance graph
• Display a chroma graph
• Display a hue graph
• Share settings via JSON export
• Click button to copy all hex colors
• Click a button to copy an SVG of all colors to be pasted into design software
• Save palettes to the Library
• Organize palettes into Groups
• Reorder palettes within groups and in the library
• Export and import library data via JSON files

Roadmap

• Delete from all groups when deleted
• Group for ungrouped colors
• Confirmation dialog boxes for delete and edit when config hasn't been saved
• Improve error handling
• Improve data validation