Frequently asked questions

Tinta is a free color library and toolkit for designers and developers, offering curated color palettes, CSS gradients, mesh gradients, and a color palette generator. Everything is free and browsing needs no account.

Yes. Every palette, gradient and mesh gradient on Tinta is free to use in personal and commercial projects, with no attribution required. There is no paid tier.

No. Browsing, copying colors, exporting code and using the Color Studio all work without an account. An account lets you save palettes, keep drafts, upload your own fonts, and submit work to the public library.

Press Cmd+K (Ctrl+K on Windows) or "/" on any page, or use the search button in the sidebar. You can search by name or tag, by color words in any order ("dark blue", "pastel pink", "navy"), or by a hex code or color name to find items with that color or one close to it. The same search also jumps to pages and tools, and offers to build a full palette in the Studio from any hex code.

Besides the palette, gradient and mesh gradient library, Tinta has a color palette generator (the Color Studio), a WCAG contrast checker, a color blindness simulator, a CSS gradient generator, a mesh gradient generator, a Tailwind palette generator that turns any color into a 50–950 shade scale, and a palette visualizer that paints a palette onto illustrations, your own SVG or a photo. All of them are free, work without an account, and keep your colors in the page address so you can share a link. There are also short guides on choosing palettes, contrast, color blindness, gradients and Tailwind color scales.

Yes. Tinta has a free, public MCP server at https://tinta.haikalakif.com/mcp (no account or API key). Claude, Cursor, VS Code and other MCP clients can use it to name and convert colors (including Tailwind and Material shades), build palettes, pull a palette from an image, mix colors, check WCAG contrast and color blindness, generate light/dark themes, write gradient CSS, export code, audit CSS, and search the Tinta library. In Claude it also shows an interactive Tinta panel in the chat. Setup steps for Claude, Claude Code, Cursor and VS Code are on the MCP server page (https://tinta.haikalakif.com/mcp-server).

Tinta means "ink" in Spanish, Portuguese, Italian, Malay and Indonesian. Tinta the website is a color palette and gradient tool for interface design; it is not affiliated with the Tinta wine grapes or with Tinta district in Peru.

A color palette is a small set of colors chosen to work together. In interface design a palette usually has a dominant background color, a secondary color, and one or two accents, often applied in roughly a 60-30-10 ratio.

Hover any stripe on a palette card to see its hex code and click it to copy. On a touch screen, tap the palette to open it. On a palette page, click any swatch; each one also shows the name of its color. Every copy is confirmed with a message, and if your browser blocks the clipboard the code is shown so you can copy it by hand.

Every palette, gradient and mesh gradient can be copied as CSS custom properties, a Tailwind CSS v4 @theme block, a Tailwind v3 config object, SCSS variables, JSON with color names and RGB and HSL values, or plain hex codes. You can also download the swatches as SVG or as a 2x PNG, or copy them as SVG to paste into Figma. The social share card is a separate Share image download.

Use the color chips at the top of any gallery, or open Browse by color. Every palette, gradient and mesh is grouped automatically by hue (red, blue, teal and so on) and by tone (pastel, dark, vibrant, muted, warm, cool, neutral) from its hex codes.

Yes. Every palette page shows a contrast matrix with the WCAG 2.1 ratio for each text and background combination, including white and near-black text, and suggests the nearest passing shade for any pair that fails. A color blindness check simulates protanopia, deuteranopia, tritanopia and monochromacy and warns when two swatches become hard to tell apart. Both are also standalone tools: the Contrast checker and the Color blindness simulator.

Palettes are curated by the Tinta team and submitted by the community. Every community submission is reviewed before it is published, and community items are credited by name, with a link to the creator's public profile listing their published work.

A CSS gradient is a smooth transition between colors drawn by the browser, with no image file. A linear gradient blends colors along a straight line at an angle, written as background: linear-gradient(135deg, #8B5CF6, #EC4899).

Yes. On any gradient page, drag the angle slider or pick a preset, switch between linear, radial and conic, or reverse the colors; the preview, the CSS export and the PNG download follow what is on screen.

A mesh gradient is a soft, multi-point blend of colors. On Tinta it is pure CSS: several radial-gradient layers stacked in one background-image, so it scales to any size and costs no image download.

Open the mesh gradient, choose the CSS tab in Export, and copy the background-image line onto the element you want to fill, such as a hero section or a card.

Open the Color Studio, pick a base color, and choose a harmony rule. The rest of the palette is derived from your base color and updates as you edit it. Press the space bar to roll a new palette, lock any swatch you want to keep (or press 1–5), and undo with Cmd+Z.

Harmony rules are relationships on the color wheel. Tinta supports analogous (neighboring hues), complementary (opposite hues), split-complementary (a hue plus the two neighbors of its opposite), triadic (three evenly spaced hues), tetradic (two complementary pairs) and monochromatic (one hue at several lightness levels).

Yes. The Studio applies your palette to a landing page, an e-commerce grid, a dashboard, a brand board, a poster and a mobile app, at desktop or phone size, with your choice of heading, body and accent fonts.

Yes. The Studio keeps your colors in the page address, so copying the link shares exactly what you see. Signed-in users can also save the palette as a draft or submit it for review.

Signed-in users can upload .otf or .ttf files up to 5 MB in the Studio. Uploaded fonts are private to your account and appear in every font selector.

Sign in and tap the bookmark on any palette card or palette page. Saved palettes appear under Saved in My library. Cards show how many people saved an item, as a number only; who saved what is never shown.

Sign in, open Create in the sidebar, choose palette, gradient or mesh, add a name and colors, then submit for review. You can also save from the Color Studio. Drafts stay private until you submit them.

Usually a day or two. My library shows the status of everything you have made: draft, in review, published, or needs changes with the reviewer's note.

Yes. Edit anything from My library. Editing an item that is in review or published sends it back to review, so published content always reflects what was approved. You can also withdraw a submission back to drafts.

Deleting your account removes your profile, your drafts and anything still in review or rejected, your uploaded fonts and your saved items. Palettes, gradients and mesh gradients that were already published stay in the library, no longer linked to any account.