# Tinta > Tinta is a free color library and toolkit for designers and developers. It offers curated color palettes, CSS linear gradients, and CSS mesh gradients, plus a Color Studio that generates palettes from color-harmony rules and previews them on real website and design layouts. No account is required to browse and copy colors. Currently published: 135 color palettes, 47 gradients, and 60 mesh gradients (242 sets total). ## Tinta at a glance - What it is: 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. - Website: https://tinta.haikalakif.com - Made by: Haikal Akif, as an independent project (https://haikalakif.com) - Since: 2025 - Price: Free. There is no paid tier, and browsing, copying and exporting need no account. - License: Every palette, gradient and mesh gradient is free for personal and commercial use, with no attribution. - Library: Curated color palettes, CSS gradients and pure-CSS mesh gradients, plus community submissions that are reviewed before they are published. - Tools: Color palette generator, Contrast checker, Color blindness simulator, Gradient generator, Mesh gradient generator, Tailwind palette generator, Palette visualizer - Exports: CSS variables, Tailwind CSS v4 @theme, Tailwind v3 config, SCSS, JSON, hex, SVG, PNG, and SVG for Figma. - Accessibility: Every palette page has a WCAG contrast matrix and a color blindness simulation (protanopia, deuteranopia, tritanopia, monochromacy). - Platform: The website, in any modern browser with nothing to install; and inside Claude and other AI assistants through Tinta's free MCP server (https://tinta.haikalakif.com/mcp). - Name: Tinta means "ink" in Spanish, Portuguese, Italian, Malay and Indonesian. Not affiliated with the Tinta wine grapes or Tinta district in Peru. Key things Tinta does: - Browse curated color palettes with one-click copy of hex codes, CSS variables, and Tailwind config. - Browse free CSS linear gradients and mesh (radial) gradients with copy-paste CSS. - Generate custom palettes in the Color Studio using harmony rules (analogous, complementary, split-complementary, triadic, tetradic, monochromatic) applied to a base color, and preview them on landing pages, dashboards, e-commerce, brand boards, posters, and mobile app mockups. - Show hex, RGB, and HSL values plus WCAG 2.1 contrast ratios for every color on every detail page. - Group every palette, gradient, and mesh by hue and tone automatically, from its hex codes. - Open any palette, gradient, or mesh directly in the Color Studio, and copy colors into Figma as SVG swatches. - Sign in to upload custom fonts, save palettes, and submit creations to the community for review. ## Main pages - [Home](https://tinta.haikalakif.com): Overview of Tinta's color palettes, gradients, and tools. - [About](https://tinta.haikalakif.com/about): What Tinta is, who builds it, where the content comes from, and licensing. - [Color Palettes](https://tinta.haikalakif.com/palettes): Curated palettes with hex, CSS variable, and Tailwind export. - [Gradients](https://tinta.haikalakif.com/gradients): Free CSS linear gradients with copy-paste background code. - [Mesh Gradients](https://tinta.haikalakif.com/mesh-gradients): CSS mesh gradients built from layered radial gradients. - [Color Studio](https://tinta.haikalakif.com/generate): Free color palette generator with harmony rules, live UI previews, and font pairing. - [Guides](https://tinta.haikalakif.com/guides): Practical guides to color palettes, contrast, color blindness, CSS gradients and Tailwind color scales. - [Glossary](https://tinta.haikalakif.com/glossary): Plain-language definitions of HEX, RGB, HSL, OKLCH, contrast ratios, WCAG AA/AAA, color blindness types and harmony rules. - Color pages (https://tinta.haikalakif.com/color/, e.g. https://tinta.haikalakif.com/color/82aaf2): Name, RGB/HSL/OKLCH/CMYK, contrast, tints and shades, harmonies, and the Tinta items that use the color. - [Browse by Color](https://tinta.haikalakif.com/colors): Every set grouped by hue and by tone. - [Browse by Tag](https://tinta.haikalakif.com/tags): Every set grouped by mood, theme, and use case. ## Free tools - [Color palette generator](https://tinta.haikalakif.com/generate): The Color Studio: generate palettes from harmony rules, lock swatches, and preview them on real layouts. - [Contrast checker](https://tinta.haikalakif.com/contrast-checker): WCAG 2.2 AA/AAA contrast for any set of colors, with the nearest passing shade for failing pairs. - [Color blindness simulator](https://tinta.haikalakif.com/color-blindness-simulator): A palette under protanopia, deuteranopia, tritanopia and monochromacy, with the pairs that become hard to tell apart. - [Gradient generator](https://tinta.haikalakif.com/gradient-generator): Build a linear, radial or conic CSS gradient from up to five colors, set the angle, and copy the CSS or Tailwind code. - [Mesh gradient generator](https://tinta.haikalakif.com/mesh-gradient-generator): Turn three to five colors into a pure-CSS mesh gradient (layered radial gradients) and copy the code. - [Tailwind palette generator](https://tinta.haikalakif.com/tailwind-color-palette-generator): Turn any brand color into a Tailwind-style 50–950 shade scale in OKLCH, exported for Tailwind v4 @theme, v3 config or CSS variables. - [Palette visualizer](https://tinta.haikalakif.com/palette-visualizer): Paint any palette onto illustrations, your own SVG or a photo (recolored in the browser, matched by lightness) and download the result. ## Use Tinta from AI assistants (MCP) 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: https://tinta.haikalakif.com/mcp-server - color_insight: Name, family, HEX/RGB/HSL/OKLCH/CMYK, the readable text color with its contrast, a 50–950 scale, colors that go with it, the nearest Tailwind and Material shades, and Tinta palettes that use it. - suggest_palette: Palettes built around a color for six harmony rules, chosen in OKLCH so accents read on it. - palette_from_image: The main colors of an image at a public link, clustered perceptually, small vivid accents kept. The image is sampled once and not stored. - mix_colors: Blend two colors like CSS color-mix(), or get evenly spaced steps between them. - search_library: Search Tinta's human-reviewed palettes, gradients and mesh gradients by word, mood or hex. - get_item: Everything about one Tinta palette, gradient or mesh from its link, with code. - check_palette: WCAG 2.2 contrast for every pair, and which colors collapse under four kinds of color blindness. - build_theme: Light and dark theme tokens with every text pair at WCAG AA, as CSS variables and Tailwind v4. - make_gradient: Linear, radial or conic gradient CSS in sRGB or OKLCH, or a mesh gradient. - export_palette: Colors as CSS variables named after each color, SCSS, Tailwind v4 or v3, JSON, HEX or an SVG swatch sheet. - audit_colors: Paste CSS, SCSS or a Tailwind config: its contrast failures, with the nearest passing color where one exists. ## Guides - [How to choose a color palette for a website](https://tinta.haikalakif.com/guides/how-to-choose-a-color-palette-for-a-website): A practical method for website colors: start from one brand color, add neutrals, pick a harmony rule, split it 60-30-10 and check contrast. - [WCAG color contrast explained](https://tinta.haikalakif.com/guides/wcag-contrast-explained): What 4.5:1 means, how the WCAG contrast ratio is calculated, AA vs AAA, what counts as large text, non-text contrast, and where APCA fits. - [Designing for color blindness](https://tinta.haikalakif.com/guides/designing-for-color-blindness): How protanopia, deuteranopia and tritanopia change UI colors, how common they are, and the patterns that keep an interface usable for everyone. - [CSS gradients: linear, radial, conic and OKLCH](https://tinta.haikalakif.com/guides/css-gradients-guide): Every CSS gradient function with copy-paste examples: angles, color stops, hard stops, repeating patterns, banding fixes and in oklch interpolation. - [How to make a mesh gradient in pure CSS](https://tinta.haikalakif.com/guides/mesh-gradients-in-css): Build a mesh gradient with stacked radial-gradient layers: the exact technique Tinta uses, copy-paste code, fallbacks and performance tips. - [Tailwind color scales: custom 50–950 palettes](https://tinta.haikalakif.com/guides/tailwind-color-scales): How Tailwind’s 50–950 color scales work, how to add a custom brand scale with @theme in v4 or theme.extend in v3, and how to generate one. - [Tinta vs Coolors](https://tinta.haikalakif.com/guides/tinta-vs-coolors): Tinta and Coolors compared honestly: palette library, generator, exports, accessibility checks and price, with what each one does better. - [Tinta vs Adobe Color](https://tinta.haikalakif.com/guides/tinta-vs-adobe-color): Tinta and Adobe Color compared: color wheel and harmony rules, image extraction, accessibility tools, exports, and what each does better. ## Browse by color - [Red color palettes](https://tinta.haikalakif.com/colors/red): 40 sets. Red carries the most urgency of any hue, which makes it powerful for calls to action and risky for large surfaces. These palettes pair it with grounding neutrals or cooler counterweights so it reads confident rather than alarming. - [Orange color palettes](https://tinta.haikalakif.com/colors/orange): 60 sets. Orange is warmth without red's aggression — the hue of sunsets, terracotta, and citrus. It works hardest as an accent against deep neutrals, where a small amount carries a lot of energy. - [Yellow color palettes](https://tinta.haikalakif.com/colors/yellow): 49 sets. Yellow is the brightest hue at equivalent saturation, so it draws the eye before anything else on a page. It rarely passes contrast checks against white, which makes the pairings below worth borrowing. - [Green color palettes](https://tinta.haikalakif.com/colors/green): 44 sets. Green spans the widest band on the color wheel, from acid lime to deep forest, so it shifts meaning dramatically with lightness. These palettes show that range against complementary reds and warm neutrals. - [Teal color palettes](https://tinta.haikalakif.com/colors/teal): 35 sets. Teal sits on the hinge between green and blue and reads as calm and technical at once. It is a reliable primary for interfaces because it stays legible across a wide lightness range. - [Blue color palettes](https://tinta.haikalakif.com/colors/blue): 60 sets. Blue is the default of software for a reason — it recedes, it is the least likely hue to be affected by color blindness, and it holds contrast well at both ends. These palettes show how to keep it from feeling generic. - [Purple color palettes](https://tinta.haikalakif.com/colors/purple): 34 sets. Purple is the rarest hue in nature, which is exactly why it reads as deliberate and premium on screen. It pairs unusually well with warm neutrals that stop it turning cold. - [Pink color palettes](https://tinta.haikalakif.com/colors/pink): 58 sets. Pink covers everything from dusty rose to hot magenta. The lighter end works as a surface color where beige would feel flat; the saturated end is one of the strongest accents available. - [Pastel color palettes](https://tinta.haikalakif.com/colors/pastel): 16 sets. Every color here is light and gently saturated. Pastels are forgiving as backgrounds and difficult as text — expect to reach for a much darker ink than the palette itself provides. - [Dark color palettes](https://tinta.haikalakif.com/colors/dark): 23 sets. Low-lightness palettes built for dark interfaces, hero sections, and anything that needs weight. Watch the contrast pairs: dark schemes fail accessibility quietly, in the mid-tones. - [Vibrant color palettes](https://tinta.haikalakif.com/colors/vibrant): 41 sets. High-saturation combinations that hold their intensity at mid lightness. Use them where you want the color itself to be the design, and keep the surrounding surfaces quiet. - [Muted color palettes](https://tinta.haikalakif.com/colors/muted): 51 sets. Desaturated, low-contrast schemes with an editorial, understated feel. They age well and photograph well, and they tend to need one sharper accent to avoid reading as washed out. - [Warm color palettes](https://tinta.haikalakif.com/colors/warm): 103 sets. Palettes weighted toward the red-through-yellow side of the wheel. Warm schemes advance visually — they feel closer and more immediate than cool ones at the same saturation. - [Cool color palettes](https://tinta.haikalakif.com/colors/cool): 77 sets. Palettes weighted toward the teal-through-purple side of the wheel. Cool schemes recede, which makes them the safer default for dense interfaces and long-form reading. - [Neutral color palettes](https://tinta.haikalakif.com/colors/neutral): 51 sets. Near-greyscale schemes carried by lightness rather than hue. A neutral base plus a single saturated accent is the most reliable structure in interface design. ## Color pages by type - [Red color palettes](https://tinta.haikalakif.com/palettes/red): 31 items. - [Orange color palettes](https://tinta.haikalakif.com/palettes/orange): 36 items. - [Yellow color palettes](https://tinta.haikalakif.com/palettes/yellow): 26 items. - [Green color palettes](https://tinta.haikalakif.com/palettes/green): 22 items. - [Teal color palettes](https://tinta.haikalakif.com/palettes/teal): 17 items. - [Blue color palettes](https://tinta.haikalakif.com/palettes/blue): 30 items. - [Purple color palettes](https://tinta.haikalakif.com/palettes/purple): 17 items. - [Pink color palettes](https://tinta.haikalakif.com/palettes/pink): 30 items. - [Dark color palettes](https://tinta.haikalakif.com/palettes/dark): 12 items. - [Vibrant color palettes](https://tinta.haikalakif.com/palettes/vibrant): 7 items. - [Muted color palettes](https://tinta.haikalakif.com/palettes/muted): 37 items. - [Warm color palettes](https://tinta.haikalakif.com/palettes/warm): 60 items. - [Cool color palettes](https://tinta.haikalakif.com/palettes/cool): 36 items. - [Neutral color palettes](https://tinta.haikalakif.com/palettes/neutral): 38 items. - [Red gradients](https://tinta.haikalakif.com/gradients/red): 5 items. - [Orange gradients](https://tinta.haikalakif.com/gradients/orange): 10 items. - [Yellow gradients](https://tinta.haikalakif.com/gradients/yellow): 8 items. - [Green gradients](https://tinta.haikalakif.com/gradients/green): 10 items. - [Teal gradients](https://tinta.haikalakif.com/gradients/teal): 10 items. - [Blue gradients](https://tinta.haikalakif.com/gradients/blue): 11 items. - [Purple gradients](https://tinta.haikalakif.com/gradients/purple): 6 items. - [Pink gradients](https://tinta.haikalakif.com/gradients/pink): 11 items. - [Pastel gradients](https://tinta.haikalakif.com/gradients/pastel): 8 items. - [Dark gradients](https://tinta.haikalakif.com/gradients/dark): 5 items. - [Vibrant gradients](https://tinta.haikalakif.com/gradients/vibrant): 13 items. - [Muted gradients](https://tinta.haikalakif.com/gradients/muted): 7 items. - [Warm gradients](https://tinta.haikalakif.com/gradients/warm): 18 items. - [Cool gradients](https://tinta.haikalakif.com/gradients/cool): 19 items. - [Neutral gradients](https://tinta.haikalakif.com/gradients/neutral): 6 items. - [Red mesh gradients](https://tinta.haikalakif.com/mesh-gradients/red): 4 items. - [Orange mesh gradients](https://tinta.haikalakif.com/mesh-gradients/orange): 14 items. - [Yellow mesh gradients](https://tinta.haikalakif.com/mesh-gradients/yellow): 15 items. - [Green mesh gradients](https://tinta.haikalakif.com/mesh-gradients/green): 12 items. - [Teal mesh gradients](https://tinta.haikalakif.com/mesh-gradients/teal): 8 items. - [Blue mesh gradients](https://tinta.haikalakif.com/mesh-gradients/blue): 19 items. - [Purple mesh gradients](https://tinta.haikalakif.com/mesh-gradients/purple): 11 items. - [Pink mesh gradients](https://tinta.haikalakif.com/mesh-gradients/pink): 17 items. - [Pastel mesh gradients](https://tinta.haikalakif.com/mesh-gradients/pastel): 7 items. - [Dark mesh gradients](https://tinta.haikalakif.com/mesh-gradients/dark): 6 items. - [Vibrant mesh gradients](https://tinta.haikalakif.com/mesh-gradients/vibrant): 21 items. - [Muted mesh gradients](https://tinta.haikalakif.com/mesh-gradients/muted): 7 items. - [Warm mesh gradients](https://tinta.haikalakif.com/mesh-gradients/warm): 25 items. - [Cool mesh gradients](https://tinta.haikalakif.com/mesh-gradients/cool): 22 items. - [Neutral mesh gradients](https://tinta.haikalakif.com/mesh-gradients/neutral): 7 items. ## Color combinations - [Blue and orange color palettes](https://tinta.haikalakif.com/palettes/blue-and-orange): 5 palettes. - [Blue and pink color palettes](https://tinta.haikalakif.com/palettes/blue-and-pink): 3 palettes. - [Blue and purple color palettes](https://tinta.haikalakif.com/palettes/blue-and-purple): 3 palettes. - [Blue and red color palettes](https://tinta.haikalakif.com/palettes/blue-and-red): 6 palettes. - [Blue and teal color palettes](https://tinta.haikalakif.com/palettes/blue-and-teal): 5 palettes. - [Blue and yellow color palettes](https://tinta.haikalakif.com/palettes/blue-and-yellow): 6 palettes. - [Green and orange color palettes](https://tinta.haikalakif.com/palettes/green-and-orange): 5 palettes. - [Green and red color palettes](https://tinta.haikalakif.com/palettes/green-and-red): 4 palettes. - [Green and yellow color palettes](https://tinta.haikalakif.com/palettes/green-and-yellow): 3 palettes. - [Orange and pink color palettes](https://tinta.haikalakif.com/palettes/orange-and-pink): 6 palettes. - [Orange and purple color palettes](https://tinta.haikalakif.com/palettes/orange-and-purple): 3 palettes. - [Orange and red color palettes](https://tinta.haikalakif.com/palettes/orange-and-red): 14 palettes. - [Orange and teal color palettes](https://tinta.haikalakif.com/palettes/orange-and-teal): 4 palettes. - [Orange and yellow color palettes](https://tinta.haikalakif.com/palettes/orange-and-yellow): 7 palettes. - [Pink and purple color palettes](https://tinta.haikalakif.com/palettes/pink-and-purple): 6 palettes. - [Pink and red color palettes](https://tinta.haikalakif.com/palettes/pink-and-red): 11 palettes. - [Pink and yellow color palettes](https://tinta.haikalakif.com/palettes/pink-and-yellow): 6 palettes. - [Purple and teal color palettes](https://tinta.haikalakif.com/palettes/purple-and-teal): 3 palettes. - [Red and teal color palettes](https://tinta.haikalakif.com/palettes/red-and-teal): 4 palettes. - [Red and yellow color palettes](https://tinta.haikalakif.com/palettes/red-and-yellow): 8 palettes. ## Help & info - [FAQ](https://tinta.haikalakif.com/faq): Answers about palettes, gradients, mesh gradients, exporting, and the Color Studio. - [Patch Notes](https://tinta.haikalakif.com/patch): Changelog of new features and improvements. - [Contact](https://tinta.haikalakif.com/contact): Get in touch with the Tinta team. - [Privacy Policy](https://tinta.haikalakif.com/privacy): How Tinta handles data. - [Terms of Service](https://tinta.haikalakif.com/terms): Terms for using Tinta. ## Machine-readable - [Full inventory](https://tinta.haikalakif.com/llms-full.txt): Every published palette, gradient, and mesh with its hex codes. - [Sitemap](https://tinta.haikalakif.com/sitemap.xml): All indexable URLs. ## Notes - Tinta is free to use. Browsing and copying colors requires no account. - All palettes, gradients, and mesh gradients are free to use in personal and commercial projects, with no attribution required. - Built by Haikal Akif (https://haikalakif.com).