[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-atmos-color-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":55,"alternatives-atmos-color-en-US":120,"related-resources-atmos-color-en-US":235},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":30,"cover":31,"icon":9,"pricing":32,"platform":33,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":35,"views_count":36,"featured_rank":9,"categories":37,"tags":46,"files":9},775,"Atmos","atmos-color","https:\u002F\u002Fatmos.style",null,"Suite of online color tools for UI designers","Atmos is a collection of modern color tools designed for UI designers and developers. It includes a HEX to LCH color converter, a color palette generator, and an interactive color wheel that helps you understand color relationships. The tools are built with accessibility in mind, making it easy to create harmonious and WCAG-compliant color schemes.",{"title":13,"meta_description":14},"Atmos -- Suite of online color tools for UI designers","Atmos is a collection of modern color tools designed for UI designers and developers. It includes a HEX to LCH color converter, a color palette generator, an...",[16,17,18,19,20,21],"HEX to LCH color format converter","Color palette generator from any base color","Interactive color wheel with harmony rules","WCAG contrast ratio checker built in","Export palettes to CSS, SVG, and Tailwind","Accessible color suggestions for UI design",[23,24,25],"Clean and fast interface with no ads","LCH conversion is rare and very useful","Accessibility features are genuinely helpful",[27,28,29],"Limited to color-related functionality only","No color palette sharing or community features","Lacks advanced features like gradient generation","UI designers and front-end developers who need accessible, well-structured color palettes","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","free",[34],"Web",{"free":3},0,[38,42],{"name":39,"slug":40,"sub_categories":41},"Design Tools","design-tools",[],{"name":43,"slug":44,"sub_categories":45},"Colors & Palettes","colors-palettes",[],[47,49,52],{"name":48,"slug":32},"Free",{"name":50,"slug":51},"Colors","colors",{"name":53,"slug":54},"Accessibility","accessibility",[56,88,98,108],{"id":57,"url":58,"icon":9,"name":59,"slug":60,"tags":61,"cover":84,"tagline":85,"is_featured":86,"date_created":87,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[62,65,67,70,72,74,76,78,80,82],{"seo":9,"name":63,"slug":64},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":66},"ai",{"seo":9,"name":68,"slug":69},"Freemium","freemium",{"seo":9,"name":9,"slug":71},"free-trial",{"seo":9,"name":9,"slug":73},"image-editing",{"seo":9,"name":9,"slug":75},"video",{"seo":9,"name":9,"slug":77},"animation",{"seo":9,"name":9,"slug":79},"prototyping",{"seo":9,"name":9,"slug":81},"no-code",{"seo":9,"name":9,"slug":83},"productivity","fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7",false,"2026-06-28T03:12:01.911314+00:00",{"id":89,"url":90,"icon":9,"name":91,"slug":92,"tags":93,"cover":95,"tagline":96,"is_featured":86,"date_created":97,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[94],{"seo":9,"name":9,"slug":51},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":99,"url":100,"icon":9,"name":101,"slug":102,"tags":103,"cover":105,"tagline":106,"is_featured":86,"date_created":107,"date_updated":9},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[104],{"seo":9,"name":9,"slug":51},"bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API","2026-06-24T04:30:57.92162+00:00",{"id":109,"url":110,"icon":9,"name":111,"slug":112,"tags":113,"cover":117,"tagline":118,"is_featured":86,"date_created":119,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[114,115],{"seo":9,"name":48,"slug":32},{"seo":9,"name":9,"slug":116},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[121,127,133,139,145,151,157,163,169,175,181,187,193,199,205,211,217,223,229],{"url":122,"name":123,"slug":124,"cover":125,"tagline":126},"https:\u002F\u002Fpigment.shapefactory.co","Pigment","pigment","3aa8318c-dc03-4e6b-b429-d73c051ed65b.webp","Simple online color palette generator for designers",{"url":128,"name":129,"slug":130,"cover":131,"tagline":132},"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":134,"name":135,"slug":136,"cover":137,"tagline":138},"https:\u002F\u002Fvectormaker.co","Vectormaker","vectormaker","3ffa729b-d51b-4bc1-b2df-536a43336b87.webp","Convert PNG images to SVG vectors online",{"url":140,"name":141,"slug":142,"cover":143,"tagline":144},"https:\u002F\u002Fd.design","堆友 \u002F D.design","d-design","5b070c3d-05b2-451a-915b-e34ffb995d20.webp","Alibaba's 3D scene and avatar editor for everyone",{"url":146,"name":147,"slug":148,"cover":149,"tagline":150},"https:\u002F\u002Fslantt.co","Slantt","slantt","13aa2788-c462-4897-b95b-510d1c56657e.webp","Add 3D perspective effects to flat images online",{"url":152,"name":153,"slug":154,"cover":155,"tagline":156},"https:\u002F\u002Fmagicpattern.design","MagicPattern","magicpattern","bc5a27ac-20f5-443c-9d44-c9d453c9f5b3.webp","Create stunning patterns, gradients, and blobs in minutes",{"url":158,"name":159,"slug":160,"cover":161,"tagline":162},"https:\u002F\u002Fepiceasing.com","Epic Easing","epic-easing","264d2f69-a81e-4142-9157-9c9a006dd1a7.webp","Visual CSS easing function generator for animations",{"url":164,"name":165,"slug":166,"cover":167,"tagline":168},"https:\u002F\u002Fgoodpalette.io","Goodpalette","goodpalette","1c508913-1ea0-4383-9122-91c1c93faecb.webp","Generate accessible color palettes for UI design",{"url":170,"name":171,"slug":172,"cover":173,"tagline":174},"https:\u002F\u002Fmeshgradient.com","Mesh Gradient","mesh-gradient","de892395-dc05-42ff-83f9-913d028370cc.webp","Create beautiful mesh gradient backgrounds for your designs",{"url":176,"name":177,"slug":178,"cover":179,"tagline":180},"https:\u002F\u002Fcloudconvert.com","CloudConvert","cloudconvert","1671a79f-8c57-49b7-9a30-70769f239c56.webp","Online file converter supporting 200+ formats",{"url":182,"name":183,"slug":184,"cover":185,"tagline":186},"https:\u002F\u002Fnijijourney.com","Niji Journey","niji-journey","77a82019-8f4c-4eaa-8f5d-4a958332543f.webp","AI image generator specialized in anime and illustration",{"url":188,"name":189,"slug":190,"cover":191,"tagline":192},"https:\u002F\u002Fopticlean.io","OptiClean","opticlean","4637cb73-608a-4149-ba0f-24f641834a90.webp","AI-powered photo cleanup and object removal tool",{"url":194,"name":195,"slug":196,"cover":197,"tagline":198},"https:\u002F\u002Fstudio.d-id.com","D-ID","did","605a00ff-6ce8-4bd2-ab54-f6280237416d.webp","AI video platform that animates photos into talking avatars",{"url":200,"name":201,"slug":202,"cover":203,"tagline":204},"https:\u002F\u002Fbing.com\u002Fcreate","Bing Image Creator","bing-image-creator","f4787931-584f-4b3c-886a-d2c2870593e5.webp","Free AI image generation powered by DALL-E",{"url":206,"name":207,"slug":208,"cover":209,"tagline":210},"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":212,"name":213,"slug":214,"cover":215,"tagline":216},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":218,"name":219,"slug":220,"cover":221,"tagline":222},"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":224,"name":225,"slug":226,"cover":227,"tagline":228},"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":230,"name":231,"slug":232,"cover":233,"tagline":234},"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",[236,249,266],{"url":237,"icon":9,"name":238,"slug":239,"tags":240,"cover":246,"tagline":247,"is_featured":3,"date_created":248,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[241,243,244,245],{"seo":9,"name":9,"slug":242},"collaboration",{"seo":9,"name":9,"slug":79},{"seo":9,"name":68,"slug":69},{"seo":9,"name":9,"slug":83},"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":250,"icon":9,"name":251,"slug":252,"tags":253,"cover":263,"tagline":264,"is_featured":3,"date_created":265,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[254,255,258,259,261],{"seo":9,"name":48,"slug":32},{"seo":9,"name":256,"slug":257},"Open Source","open-source",{"seo":9,"name":9,"slug":73},{"seo":9,"name":9,"slug":260},"svg",{"seo":9,"name":9,"slug":262},"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":267,"icon":9,"name":268,"slug":269,"tags":270,"cover":276,"tagline":277,"is_featured":3,"date_created":278,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[271,273,274,275],{"seo":9,"name":9,"slug":272},"wireframe",{"seo":9,"name":9,"slug":79},{"seo":9,"name":9,"slug":242},{"seo":9,"name":68,"slug":69},"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"]