[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-color-scale-tool-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":54,"alternatives-color-scale-tool-en-US":129,"related-resources-color-scale-tool-en-US":220},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":22,"cons":26,"best_for":29,"cover":30,"icon":9,"pricing":31,"platform":32,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":34,"views_count":35,"featured_rank":9,"categories":36,"tags":45,"files":9},812,"Color Scale Tool","color-scale-tool","https:\u002F\u002Folivia-tsui.github.io\u002Fct",null,"Generate light and dark color scales interactively","Color Scale Tool is an interactive color scale generator that helps designers create harmonious color systems. Choose a color mode, set a base color, and generate both light and dark scales with saturation and brightness views. It is a practical utility for building consistent color palettes for UI design, data visualization, and branding.",{"title":13,"meta_description":14},"Color Scale Tool -- Generate light and dark color scales interactively","Color Scale Tool is an interactive color scale generator that helps designers create harmonious color systems. Choose a color mode, set a base color, and gen...",[16,17,18,19,20,21],"Light scale and dark scale generation from a base color","Multiple color mode support including HSL and RGB","Saturation and brightness visualization views","Interactive color picking and adjustment","Color code export in hex format","Free and open-source browser-based tool",[23,24,25],"Easy to generate complete color scales from one base color","Visual views help understand color relationships","No installation needed, works in browser",[27,28],"Limited to scale generation only","No palette save or project management features","UI designers, data visualization creators, and brand designers who need consistent color scales","961aa9d6-73c4-4634-9060-b26dd258a61b.webp","free",[33],"Web",{"free":3},0,[37,41],{"name":38,"slug":39,"sub_categories":40},"Design Tools","design-tools",[],{"name":42,"slug":43,"sub_categories":44},"Colors & Palettes","colors-palettes",[],[46,48,51],{"name":47,"slug":31},"Free",{"name":49,"slug":50},"Colors","colors",{"name":52,"slug":53},"Accessibility","accessibility",[55,76,90,103],{"id":56,"url":57,"icon":9,"name":58,"slug":59,"tags":60,"cover":72,"tagline":73,"is_featured":74,"date_created":75,"date_updated":9},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[61,62,64,66,68,70],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":63},"fonts",{"seo":9,"name":9,"slug":65},"icons",{"seo":9,"name":9,"slug":67},"mockups",{"seo":9,"name":9,"slug":69},"ui-kits",{"seo":9,"name":9,"slug":71},"design-systems","39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools",false,"2026-07-16T01:44:01.585569+00:00",{"id":77,"url":78,"icon":9,"name":79,"slug":80,"tags":81,"cover":87,"tagline":88,"is_featured":74,"date_created":89,"date_updated":9},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[82,83,86],{"seo":9,"name":47,"slug":31},{"seo":9,"name":84,"slug":85},"Open Source","open-source",{"seo":9,"name":9,"slug":50},"7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":91,"url":92,"icon":9,"name":93,"slug":94,"tags":95,"cover":100,"tagline":101,"is_featured":74,"date_created":102,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[96,97,98],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":99},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":104,"url":105,"icon":9,"name":106,"slug":107,"tags":108,"cover":126,"tagline":127,"is_featured":74,"date_created":128,"date_updated":9},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[109,112,114,115,118,119,120,122,124],{"seo":9,"name":110,"slug":111},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":113},"ai",{"seo":9,"name":47,"slug":31},{"seo":9,"name":116,"slug":117},"Freemium","freemium",{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":71},{"seo":9,"name":9,"slug":121},"prototyping",{"seo":9,"name":9,"slug":123},"no-code",{"seo":9,"name":9,"slug":125},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[130,136,142,148,154,160,166,172,178,184,190,196,202,208,214],{"url":131,"name":132,"slug":133,"cover":134,"tagline":135},"https:\u002F\u002Fruri.design\u002Fgradiator","Ruri Gradiator","ruri-gradiator","089f81a2-3082-45c0-bce5-ffc9875cb87b.webp","Advanced CSS gradient editor with a unique grid interface",{"url":137,"name":138,"slug":139,"cover":140,"tagline":141},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":143,"name":144,"slug":145,"cover":146,"tagline":147},"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":149,"name":150,"slug":151,"cover":152,"tagline":153},"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator","bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API",{"url":155,"name":156,"slug":157,"cover":158,"tagline":159},"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool","eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool",{"url":161,"name":162,"slug":163,"cover":164,"tagline":165},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":167,"name":168,"slug":169,"cover":170,"tagline":171},"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":173,"name":174,"slug":175,"cover":176,"tagline":177},"https:\u002F\u002Fclipbook.app","Clipbook","clipbook","925fd4fd-3e4c-49dc-a0c5-af653d860315.webp","macOS clipboard history manager",{"url":179,"name":180,"slug":181,"cover":182,"tagline":183},"https:\u002F\u002Fgithub.cards","GitHub.cards","github-cards","58b0c7d4-d07f-464a-b07f-584728d96ba8.webp","Generate beautiful GitHub profile data cards",{"url":185,"name":186,"slug":187,"cover":188,"tagline":189},"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":191,"name":192,"slug":193,"cover":194,"tagline":195},"https:\u002F\u002Fblazy.studio\u002Fapp","Blazy Studio","blazy-studio","ec2cfd45-1569-4a57-979c-7c79d107b6a3.webp","Turn Figma prototypes into video animations",{"url":197,"name":198,"slug":199,"cover":200,"tagline":201},"https:\u002F\u002Femojis.alexandru.so","AI Emojis","ai-emojis","f80c09f5-50e2-4b68-afc2-e28b071722df.webp","Generate unique emojis with artificial intelligence",{"url":203,"name":204,"slug":205,"cover":206,"tagline":207},"https:\u002F\u002Fmoonvy.com\u002Fapps\u002Fops\u002F","Open Prompt Studio","open-prompt-studio","ffb77c51-fef5-4b56-bf7f-00a33517ac4f.webp","Visual AI prompt editor for better prompt engineering",{"url":209,"name":210,"slug":211,"cover":212,"tagline":213},"https:\u002F\u002Ficons8.com\u002Fbgremover","Icons8 BG Remover","icons8-bgremover","d8f39253-d126-4ef3-8f11-46697e20cffb.webp","AI-powered background removal tool by Icons8",{"url":215,"name":216,"slug":217,"cover":218,"tagline":219},"https:\u002F\u002Fnightcafe.studio","NightCafe","nightcafe","d47c4eaf-8d04-4ee2-a7e4-fdf8b57c98ca.webp","AI art generation platform with multiple models",[221,234,250],{"url":222,"icon":9,"name":223,"slug":224,"tags":225,"cover":231,"tagline":232,"is_featured":3,"date_created":233,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[226,228,229,230],{"seo":9,"name":9,"slug":227},"collaboration",{"seo":9,"name":9,"slug":121},{"seo":9,"name":116,"slug":117},{"seo":9,"name":9,"slug":125},"7dc9bed7-8510-495f-82b3-84a60b1b4819.webp","Fast, streamlined issue tracking and project management — built for modern product teams","2026-06-16T07:18:11.23048+00:00",{"url":235,"icon":9,"name":236,"slug":237,"tags":238,"cover":247,"tagline":248,"is_featured":3,"date_created":249,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[239,240,241,243,245],{"seo":9,"name":47,"slug":31},{"seo":9,"name":84,"slug":85},{"seo":9,"name":9,"slug":242},"image-editing",{"seo":9,"name":9,"slug":244},"svg",{"seo":9,"name":9,"slug":246},"print-design","9f4321c5-7770-4e9d-a434-774fc0698c90.webp","The free and open-source image editor — a powerful Photoshop alternative for photo retouching and image composition","2026-06-16T07:16:45.154035+00:00",{"url":251,"icon":9,"name":252,"slug":253,"tags":254,"cover":260,"tagline":261,"is_featured":3,"date_created":262,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[255,257,258,259],{"seo":9,"name":9,"slug":256},"wireframe",{"seo":9,"name":9,"slug":121},{"seo":9,"name":9,"slug":227},{"seo":9,"name":116,"slug":117},"3d08be4f-39f6-4152-a769-e28d1a04aac2.webp","Fast, focused wireframing tool that keeps conversations on structure — not pixels","2026-06-16T07:14:07.685566+00:00"]