tints-and-shades

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

tints-and-shades

★ 22 Open GitHub ↗

🎨Easily generate tints and shades from input colors!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<h1 align="center">🎨 Tints and Shades Generator 💚</h1>

<p align="center">
  <strong>A web tool to easily and intuitively generate tints and shades of colors</strong>
</p>

<p align="center">
  <a href="https://tintsshades.web-toolbox.dev/">🔗 Open App</a> •
  <a href="#-features">Features</a> •
  <a href="#-how-to-use">How to Use</a> •
  <a href="#-technology-stack">Technology Stack</a> •
  <a href="#-installation">Installation</a> •
  <a href="#-license">License</a>
</p>

## 📝 Overview

Tints and Shades Generator is a web tool designed to create perceptually uniform color variations from a single base color.

Unlike traditional RGB or HSL mixing, this tool leverages the OKLCH color space to ensure smooth, consistent gradients. By aligning with human visual perception, it prevents colors from becoming "muddy" or washed out as they shift. This allows you to instantly generate professional UI palettes—where tints stay vibrant and shades maintain their depth—without the need for manual correction.

## ✨ 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](https://nuxt.com/)
- [NuxtUI](https://ui.nuxt.com/)
- [TailwindCSS](https://tailwindcss.com/)
- [culori](https://culorijs.org/) (oklch color space)

## 🔧 Installation

```bash
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/](https://tintsshades.web-toolbox.dev/)

## 📄 License

## 👨‍💻 Developer

👤 **K**

- Twitter: [@k_urtica](https://twitter.com/k_urtica)
- GitHub: [@k-urtica](https://github.com/k-urtica)

tints-and-shades

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README