Question 1

What is an opacity tint palette?

Accepted Answer

An opacity tint palette shows a base color at different opacity levels, usually from 5% to 100%. This is useful for creating consistent hover states, overlays, and background variations from a single brand color.

Question 2

What is the difference between hex and rgba tints?

Accepted Answer

Hex tints blend the color with white to simulate opacity on a white background. RGBA tints use CSS rgba() and maintain true transparency, so they look different on non-white backgrounds.

Question 3

What are Tailwind-style names (50–900)?

Accepted Answer

Tailwind CSS names color shades numerically from 50 (lightest) to 900 (darkest). Enabling this option maps opacity levels to Tailwind's naming convention for easy integration with Tailwind projects.

Question 4

How do I use these tints in my CSS?

Accepted Answer

Click any swatch to copy its rgba() value. Use it directly in CSS like: color: rgba(99, 102, 241, 0.5); or background: rgba(99, 102, 241, 0.1); for subtle backgrounds.

Question 5

Can I use this for dark mode design?

Accepted Answer

Yes! For dark mode, applying a light color at low opacity (10–30%) over a dark background creates soft, layered UI elements. This palette helps you quickly find the right opacity value.

Opacity Tint Generator

Frequently Asked Questions

Comments & Feedback