DittoTones screenshot

DittoTones

Author Avatar Theme by Meodai
Updated: 5 Jan 2026
113 Stars

Transform any color into a full palette by copying the perceptual DNA of Tailwind, Radix, and other design systems

Categories

Overview

dittoTones is a powerful mini-library designed for designers and developers who want to effortlessly transform any chosen color into a comprehensive color palette. By leveraging the perceptual “DNA” of established design systems like Tailwind or Radix, dittoTones ensures that your custom palettes retain the same vibrancy and accessibility that users expect from professional design frameworks. It’s a game changer for anyone looking to create harmonious design elements that don’t compromise on visual appeal or functionality.

The functionality of dittoTones is particularly noteworthy as it addresses a common issue with many color palette generators that either oversimplify or completely miss the essence of carefully crafted palettes. With its smart analytical approach, dittoTones ensures that each palette maintains appropriate contrast ratios while also considering the lightness and chroma of colors. This makes it an invaluable tool in the toolkit of modern digital designers.

Features

  • Perceptual Analysis: Analyzes the lightness and chroma curves in Oklch space for popular design systems, ensuring accurate color representation.

  • Customizable Palettes: Users can input their target hue and generate a full palette that aligns with their design objectives.

  • Efficient Color Conversion: Converts input colors into the Oklch format using sophisticated algorithms that maintain color integrity throughout the process.

  • Accessibility Focused: Ensures generated palettes maintain similar accessible contrast ratios as the reference systems, enhancing usability for all users.

  • Smart Color Matching: Utilizes Euclidean distance calculations to find the most suitable ramp colors, ensuring a cohesive palette.

  • Adaptive Lightness and Chroma Adjustments: Adjusts lightness and chroma using advanced interpolation techniques to preserve delicate pastels or prevent oversaturation in vibrant shades.

  • Lightweight and Modular: Being an ESM-only package makes dittoTones easy to integrate into modern JavaScript applications, offering seamless usage without overhead.

  • Open Source: Released under the MIT license, allowing for versatile use and further development by the community.