Question 1

What is Tinta?

Accepted Answer

Tinta is a free color library for designers and developers. It offers curated color palettes, CSS gradients, and mesh gradients, plus a Color Studio tool to generate custom palettes using color harmony rules.

Question 2

Is Tinta free to use?

Accepted Answer

Yes. Tinta is completely free. You can browse, copy, and use all palettes, gradients, and mesh gradients without paying anything.

Question 3

Do I need an account to use Tinta?

Accepted Answer

No account is needed to browse and copy colors. You need an account to bookmark palettes, submit your own palettes, and access the Color Studio's save and submit features.

Question 4

How do I sign up?

Accepted Answer

Click "Create account" in the sidebar. You can sign up with Google, GitHub, or an email address.

Question 5

What is a color palette?

Accepted Answer

A color palette is a set of 2 to 4 coordinated hex color codes that work well together. Palettes are used in web design, branding, and UI development to create visual consistency.

Question 6

How do I copy hex codes from a palette?

Accepted Answer

On any palette page, click any color swatch to copy its hex code instantly. You can also use the Code section to copy all colors as CSS variables, plain hex codes, or a Tailwind config object.

Question 7

Can I export colors to Tailwind CSS or CSS variables?

Accepted Answer

Yes. Each palette detail page has a Code section with three tabs: CSS variables (for use in :root {}), HEX codes, and a Tailwind config snippet you can paste directly into tailwind.config.js.

Question 8

How do I filter palettes by color count?

Accepted Answer

On the Palettes page, use the filter tabs at the top to show only 2-color, 3-color, or 4-color palettes.

Question 9

Who creates the palettes?

Accepted Answer

Palettes come from two sources: curated content created by the Tinta team, and community submissions from registered users that have been approved through a review process.

Question 10

What is a CSS gradient?

Accepted Answer

A CSS gradient is a smooth color transition generated entirely in CSS, requiring no image files. Linear gradients transition between colors in a straight line at a specified angle.

Question 11

How do I use a linear gradient from Tinta in CSS?

Accepted Answer

On any gradient detail page, go to the Code section and select the CSS tab. Copy the line that starts with "background: linear-gradient(...);" and paste it into your stylesheet.

Question 12

What is the difference between a gradient and a mesh gradient?

Accepted Answer

A gradient transitions smoothly between 2 or more colors in one direction. A mesh gradient layers multiple radial gradients at different positions, creating a soft, multi-directional color field — similar to blurry color blobs.

Question 13

What is a mesh gradient?

Accepted Answer

A mesh gradient is a background created from overlapping radial gradients. The result looks like soft, diffused color patches that blend into each other — popular in modern UI design and wallpapers.

Question 14

How do I add a mesh gradient background to my website?

Accepted Answer

Open any mesh gradient page, go to the Code section, and copy the CSS code. Paste the background-image property into your CSS for the element you want to style.

Question 15

How do I generate a custom color palette in Color Studio?

Accepted Answer

Go to Color Studio from the sidebar. Pick a base color using the color picker or enter a hex code, then select a harmony rule (analogous, complementary, triadic, etc.). The palette updates in real time. You can further adjust individual colors and preview the result on mock UI layouts.

Question 16

What are color harmony rules?

Accepted Answer

Color harmony rules are mathematical relationships on the color wheel that produce pleasing combinations. Tinta supports: Analogous (neighboring colors), Complementary (opposite colors), Split-Complementary, Triadic (three evenly spaced colors), Tetradic (four evenly spaced), and Monochromatic (shades of one hue).

Question 17

Can I upload my own fonts in Color Studio?

Accepted Answer

Yes. Signed-in users can upload .otf or .ttf font files (up to 5 MB each) in Color Studio. Your uploaded fonts appear in the font selector and are used in all preview mockups.

Question 18

How do I submit a palette I created?

Accepted Answer

You need a Tinta account. Go to Dashboard → Create & Submit. Enter your palette colors, name, tags, and description, then click Submit for Review. The Tinta team will approve or reject it, and you'll see the status in your Dashboard.

Question 19

How long does palette review take?

Accepted Answer

Review times vary. Most submissions are reviewed within a few days. You can track the status of all your submissions in the Dashboard.

Question 20

How do I bookmark palettes?

Accepted Answer

Sign in, then click the bookmark icon on any palette card in the Palettes gallery. Your bookmarked palettes appear in your Profile page.

Question 21

What colors go well together for a website?

Accepted Answer

Colors that work well together follow harmony rules. Common combinations: blue + orange (complementary), navy + gold + cream (split-complementary), or soft pastels from an analogous range. Tinta's Color Studio generates these automatically — pick a base color and choose a harmony rule.

Question 22

How do I create a color palette for my brand?

Accepted Answer

Start with one primary color that reflects your brand personality, then use Color Studio's complementary or analogous rules to generate supporting colors. Aim for 1 primary, 1 secondary, and 1–2 accent colors. Copy the result as CSS variables for easy use across your codebase.

Question 23

Can I use Tinta palettes and gradients in commercial projects?

Accepted Answer

Yes. All palettes, gradients, and mesh gradients on Tinta are free to use in personal and commercial projects — websites, apps, print, branding, and more. No attribution required.

Question 24

What is the best free color palette tool?

Accepted Answer

Tinta offers a free color palette library with copy-paste hex codes, CSS variables, and Tailwind config, plus a Color Studio generator with harmony rules and live UI previews. It requires no sign-up to browse.

Question 25

How do I make a mesh gradient in CSS?

Accepted Answer

A CSS mesh gradient stacks radial-gradient() layers at different positions. Example: background: radial-gradient(at 20% 30%, #ff6b6b 0px, transparent 50%), radial-gradient(at 80% 70%, #4d96ff 0px, transparent 50%); — Tinta generates and exports this code for you automatically.

Frequently Asked Questions

Using Tinta

Color Palettes

Gradients

Mesh Gradients

Color Studio

Account & Submissions