🎨 Tints and Shades Generator 💚

A web tool to easily and intuitively generate tints and shades of colors

🔗 Open App • Features • How to Use • Technology Stack • Installation • License

📝 Overview

Tints and Shades Generator is a web tool that creates color variations that look truly natural to the human eye, all from a single base color.

Unlike simple color mixing, this tool uses the latest oklch color space technology to generate perceptually smooth and beautiful gradients. Oklch lets you adjust "lightness," "hue," and "chroma" in a way that's much closer to how people actually see color. So, no matter what color you start with, you get gradients that just feel right—no more muddy or awkward transitions.

For example, when you lighten blue towards white, you get a clean, beautiful light blue (not a dull, washed-out color). When you darken a color towards black, you keep the richness and depth, not just a muddy gray. This means designers and developers can instantly create unified, beautiful palettes without tedious manual tweaking.

✨ Features

• 💪 Perceptually-correct color generation using oklch color space
• 🎨 Beautiful, natural gradients for any base color
• ⚡ Fast and intuitive user experience
• 🎨 TailwindCSS compatible color palette generation
• 🎚 Adjust color weights with 0.1% precision
• 🖌 Visual color selection with a color picker
• 📊 Preview and listing of generated colors
• 😍 Customizable display options
• 📋 One-click copy of color codes (hex / rgb / hsl)
• 🔄 Switch between hex, rgb, and hsl formats for display and copy
• 📱 Responsive design for mobile compatibility

🚀 How to Use

1. Enter or select a base color from the color picker
2. Adjust the weights as needed
3. Check the generated color palette
4. Switch the color format (hex / rgb / hsl) as needed
5. Click on your preferred color code to copy it
6. Customize display options as needed

💻 Technology Stack

• Nuxt 3
• NuxtUI 3
• TailwindCSS
• culori (oklch color space)

🔧 Installation

git clone https://github.com/k-urtica/tints-and-shades.git

cd tints-and-shades

pnpm install

pnpm run dev

🔗 URL

https://tintsshades.web-toolbox.dev/

📄 License

This project is licensed under the MIT License. Copyright © 2025 K.

👨‍💻 Developer

👤 K

• Twitter: @k_urtica
• GitHub: @k-urtica