[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-tailwind-css-color-generator-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":53,"alternatives-tailwind-css-color-generator-en-US":112,"related-resources-tailwind-css-color-generator-en-US":144},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":24,"cons":30,"best_for":35,"cover":36,"icon":9,"pricing":37,"platform":38,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":40,"views_count":43,"featured_rank":9,"categories":44,"tags":49,"files":9},856,"Tailwind CSS Color Generator","tailwind-css-color-generator","https:\u002F\u002Fwww.tints.dev\u002F",null,"Tailwind CSS 11-color palette generator and API","Tailwind CSS Color Generator (tints.dev) is a specialized tool for generating 11-color Tailwind CSS palettes from a single hex value. It provides fine-grained control over hue, saturation, lightness, and hue shift to create balanced color scales. Includes a REST API for programmatic palette generation and supports Tailwind CSS v3 and v4 output formats.",{"title":13,"meta_description":14},"Tailwind CSS Color Generator — Tailwind CSS 11-color palette generator and API","Tailwind CSS Color Generator (tints.dev) is a specialized tool for generating 11color Tailwind CSS palettes from a single hex value. It provides finegrained ...",[16,17,18,19,20,21,22,23],"11-color palette generation","Single hex input creates full scale","Hue and saturation fine-tuning","Lightness distribution control","Hue shift for saturated colors","API for programmatic access","Tailwind v3 and v4 output","OKLCH and hex color modes",[25,26,27,28,29],"Purpose-built for Tailwind","API access included","Fine color control","Free to use","Multiple output formats",[31,32,33,34],"Tailwind-specific only","No color theory guidance","Single palette at a time","Basic UI","Best for Tailwind CSS developers and designers needing quick, balanced color palette generation","bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","free",[39],"Web",{"pro":41,"free":3,"note":42},false,"Free web tool with API access",0,[45],{"name":46,"slug":47,"sub_categories":48},"Colors & Palettes","colors-palettes",[],[50],{"name":51,"slug":52},"Colors","colors",[54,85,95,99],{"id":55,"url":56,"icon":9,"name":57,"slug":58,"tags":59,"cover":82,"tagline":83,"is_featured":41,"date_created":84,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[60,63,65,68,70,72,74,76,78,80],{"seo":9,"name":61,"slug":62},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":64},"ai",{"seo":9,"name":66,"slug":67},"Freemium","freemium",{"seo":9,"name":9,"slug":69},"free-trial",{"seo":9,"name":9,"slug":71},"image-editing",{"seo":9,"name":9,"slug":73},"video",{"seo":9,"name":9,"slug":75},"animation",{"seo":9,"name":9,"slug":77},"prototyping",{"seo":9,"name":9,"slug":79},"no-code",{"seo":9,"name":9,"slug":81},"productivity","fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7","2026-06-28T03:12:01.911314+00:00",{"id":86,"url":87,"icon":9,"name":88,"slug":89,"tags":90,"cover":92,"tagline":93,"is_featured":41,"date_created":94,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[91],{"seo":9,"name":9,"slug":52},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":5,"url":8,"icon":9,"name":6,"slug":7,"tags":96,"cover":36,"tagline":10,"is_featured":41,"date_created":98,"date_updated":9},[97],{"seo":9,"name":9,"slug":52},"2026-06-24T04:30:57.92162+00:00",{"id":100,"url":101,"icon":9,"name":102,"slug":103,"tags":104,"cover":109,"tagline":110,"is_featured":41,"date_created":111,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[105,107],{"seo":9,"name":106,"slug":37},"Free",{"seo":9,"name":9,"slug":108},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[113,119,120,126,132,138],{"url":114,"name":115,"slug":116,"cover":117,"tagline":118},"https:\u002F\u002Fcolourcontrast.cc\u002F","Colour Contrast Checker","colour-contrast-checker","cd62a457-6e63-4e31-b000-531d3eb836ab.webp","Simple WCAG color contrast checker for accessible design",{"url":87,"name":88,"slug":89,"cover":92,"tagline":93},{"url":121,"name":122,"slug":123,"cover":124,"tagline":125},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fnordhealth.design\u002Fcolor-generator","Nord Color Generator","nord-color-generator","a9afbd72-8a27-453f-820c-c6e171ea0908.webp","UI color palette generator based on Nord design system",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fcsshero.org\u002Fmesher","CSS Hero Mesher","css-hero-mesher","c8e938c6-095b-4b0f-b2b4-e24a18bec17d.webp","Create beautiful mesh gradient backgrounds with CSS",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"https:\u002F\u002Folivia-tsui.github.io\u002Fct","Color Scale Tool","color-scale-tool","961aa9d6-73c4-4634-9060-b26dd258a61b.webp","Generate light and dark color scales interactively",[145,157,160],{"url":146,"icon":9,"name":147,"slug":148,"tags":149,"cover":154,"tagline":155,"is_featured":3,"date_created":156,"date_updated":9},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[150,151,152],{"seo":9,"name":9,"slug":52},{"seo":9,"name":106,"slug":37},{"seo":9,"name":9,"slug":153},"gradient","e4a2e456-fabc-4bbf-8729-ecaf1cbfcbb6.webp","A curated collection of beautiful color palettes for designers and artists","2026-06-16T07:14:22.345664+00:00",{"url":87,"icon":9,"name":88,"slug":89,"tags":158,"cover":92,"tagline":93,"is_featured":41,"date_created":94,"date_updated":9},[159],{"seo":9,"name":9,"slug":52},{"url":114,"icon":9,"name":115,"slug":116,"tags":161,"cover":117,"tagline":118,"is_featured":41,"date_created":168,"date_updated":9},[162,163,165,166],{"seo":9,"name":9,"slug":52},{"seo":9,"name":9,"slug":164},"accessibility",{"seo":9,"name":106,"slug":37},{"seo":9,"name":9,"slug":167},"dark-mode","2026-06-23T12:05:36.63187+00:00"]