TintaTinta · free color palettes & gradients Every palette tells a story.
Hand-picked color palettes, CSS gradients and mesh gradients — plus a Studio that builds a palette from one color and shows it on real layouts. Free, and no account needed.
- Free
- No account needed
- CSS, Tailwind & Figma export
Fresh color palettes
Hover or tap a stripe to see its hex, click to copy.
CSS gradients
All gradients → Copy-paste linear-gradient() backgrounds, any angle.
Mesh gradients
All mesh gradients →Soft, organic backgrounds in pure CSS — no images.
Color Studio
A palette generator that shows you the result.
Pick one color. Tinta derives the rest from color theory, then paints it onto a landing page, a store, a dashboard and a phone — with your fonts — so you judge the palette in context, not as five squares.
Start generatingSix harmony rules
Analogous, Complementary, Split, Triadic, Tetradic, Mono — derived from one base color.
Live mockups
Landing page, store, dashboard, brand board, poster and mobile app.
Contrast matrix
Every text-on-background pair scored against WCAG 2.1.
Color blindness check
See each palette as people with protanopia, deuteranopia or tritanopia do.
Every export
CSS variables, Tailwind v4 and v3, SCSS, JSON, SVG and PNG — or paste into Figma.
Built for speed
Space to generate, 1–5 to lock a color, ⌘Z to undo, ⌘K to search everything.
Browse by color
Every palette, gradient and mesh is grouped by hue and tone from its hex codes.
What is Tinta?
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.
Every color comes with its hex, RGB and HSL values, a WCAG contrast check and a color blindness simulation, and exports straight to CSS, Tailwind, SCSS, JSON or Figma. Everything is free for personal and commercial work, with no attribution required.
More about Tinta →Frequently asked questions
What is Tinta?
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.
Is Tinta free to use?
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.
Do I need an account?
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.
How do I copy a hex code?
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.
Which export formats are available?
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.
What is a mesh gradient?
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.
How do I generate a color palette?
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.