[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcoolors":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":45,"showcases":46,"links":357,"dates":389},"\u002Fexamples\u002Fapps\u002Fcoolors","detail","apps",true,{"title":9,"description":10,"og_image":11},"Coolors design examples - Nicelydone","Explore Coolors UI design examples. The super fast color schemes generator","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_sign-in_11d668b3_nicelydone.jpg",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Coolors design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Coolors",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"categories":40},"Coolors","coolors","The super fast color schemes generator","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcoolors-3e0b0842.png","http:\u002F\u002Fcoolors.co",[41],{"id":42,"title":43,"slug":44},8,"Design","design",[],[47,354],{"family":48,"examples":49},"screens",[50,83,100,121,159,181,209,227,251,283,309,332],{"uuid":51,"title":52,"description":53,"canonical_path":29,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":58,"component_categories":68,"app":81},"1c637256-a765-423e-9fbc-6798360aafbc","Sign in","Sign-in screen where the user authenticates with their email or username and password via a centered modal overlay.",2880,1520,"Sign in from Coolors","screen",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},4,"Sign In","sign-in",0,{"id":65,"label":66,"slug":67},1,"Access & Account","access-and-account",[69,73,77],{"id":70,"title":71,"slug":72},277,"Button group","button-group",{"id":74,"title":75,"slug":76},175,"Button","button",{"id":78,"title":79,"slug":80},284,"Modal","modal",{"slug":36,"title":35,"logo":38,"categories":82},[],{"uuid":84,"title":85,"description":86,"canonical_path":29,"image":87,"width":54,"height":55,"image_alt":88,"kind":57,"patterns":89,"component_categories":95,"app":98},"bb099b61-e3bf-4a9e-9b57-4d08861a4944","Password reset","Authentication overlay where the user enters their registered email or username and chooses a new password to regain access.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_password-reset_b128c15f_nicelydone.jpg","Password reset from Coolors",[90],{"id":91,"label":92,"slug":93,"rank":63,"group":94},2,"Forgot Password","forgot-password",{"id":65,"label":66,"slug":67},[96,97],{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":99},[],{"uuid":101,"title":102,"description":103,"canonical_path":29,"image":104,"width":54,"height":55,"image_alt":105,"kind":57,"patterns":106,"component_categories":112,"app":119},"7d685912-2946-4db4-badf-d7e47f67b2f2","Sign up","Signup modal where the user creates a Coolors account with a username, email, and password, with an option to join the newsletter.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_sign-up_b8ebb4e8_nicelydone.jpg","Sign up from Coolors",[107],{"id":108,"label":109,"slug":110,"rank":63,"group":111},5,"Sign Up","sign-up",{"id":65,"label":66,"slug":67},[113,117,118],{"id":114,"title":115,"slug":116},240,"Horizontal navigation","horizontal-navigation",{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":29,"image":125,"width":54,"height":126,"image_alt":127,"kind":57,"patterns":128,"component_categories":149,"app":157},"5a6026d7-4bc7-476d-9379-8b1180278596","Welcome message","Design editor where a welcome modal prompts the user to watch a tutorial before generating color schemes.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_welcome-message_0ca3eb74_nicelydone.jpg",1526,"Welcome message from Coolors",[129,137,142],{"id":130,"label":131,"slug":132,"rank":63,"group":133},77,"Welcome","welcome",{"id":134,"label":135,"slug":136},7,"Onboarding & Education","onboarding-and-education",{"id":138,"label":139,"slug":140,"rank":65,"group":141},73,"Guided Tour","guided-tour",{"id":134,"label":135,"slug":136},{"id":143,"label":144,"slug":145,"rank":91,"group":146},55,"Design Editor","design-editor",{"id":108,"label":147,"slug":148},"Media & Tools","media-and-tools",[150,154,155,156],{"id":151,"title":152,"slug":153},169,"Avatar","avatar",{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":158},[],{"uuid":160,"title":161,"description":162,"canonical_path":29,"image":163,"width":54,"height":126,"image_alt":164,"kind":57,"patterns":165,"component_categories":175,"app":179},"88ec93d7-1170-4c24-af6c-4219e5afafb3","Onboarding","Design editor where a tutorial modal instructs the user to hit the spacebar to generate color schemes over a five-column color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding_15b65db6_nicelydone.jpg","Onboarding from Coolors",[166,168,170],{"id":138,"label":139,"slug":140,"rank":63,"group":167},{"id":134,"label":135,"slug":136},{"id":143,"label":144,"slug":145,"rank":65,"group":169},{"id":108,"label":147,"slug":148},{"id":171,"label":172,"slug":173,"rank":91,"group":174},58,"Media Editor","media-editor",{"id":108,"label":147,"slug":148},[176,177,178],{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":180},[],{"uuid":182,"title":161,"description":183,"canonical_path":29,"image":184,"width":54,"height":126,"image_alt":164,"kind":57,"patterns":185,"component_categories":201,"app":207},"ac2095f8-8907-48fd-8657-9b00ed8d41fd","Design editor where a tutorial modal explains how to lock colors by clicking on them to generate combinations.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-2_596bb4f7_nicelydone.jpg",[186,188,193,198],{"id":143,"label":144,"slug":145,"rank":63,"group":187},{"id":108,"label":147,"slug":148},{"id":189,"label":190,"slug":191,"rank":65,"group":192},76,"Tutorial","tutorial",{"id":134,"label":135,"slug":136},{"id":194,"label":195,"slug":196,"rank":91,"group":197},72,"Getting Started","getting-started",{"id":134,"label":135,"slug":136},{"id":171,"label":172,"slug":173,"rank":199,"group":200},3,{"id":108,"label":147,"slug":148},[202,203,204,205,206],{"id":70,"title":71,"slug":72},{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":208},[],{"uuid":210,"title":161,"description":211,"canonical_path":29,"image":212,"width":54,"height":126,"image_alt":164,"kind":57,"patterns":213,"component_categories":220,"app":225},"e10922cf-bef0-4aaf-b5c7-10e1a29e2382","Onboarding screen where a tutorial modal instructs the user to click a hex value to type in starting colors, while highlighting a specific color swatch in the background.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-3_4aa21731_nicelydone.jpg",[214,216,218],{"id":138,"label":139,"slug":140,"rank":63,"group":215},{"id":134,"label":135,"slug":136},{"id":189,"label":190,"slug":191,"rank":65,"group":217},{"id":134,"label":135,"slug":136},{"id":171,"label":172,"slug":173,"rank":91,"group":219},{"id":108,"label":147,"slug":148},[221,222,223,224],{"id":70,"title":71,"slug":72},{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":226},[],{"uuid":228,"title":161,"description":229,"canonical_path":29,"image":230,"width":54,"height":126,"image_alt":164,"kind":57,"patterns":231,"component_categories":240,"app":249},"e65dd201-07ff-4327-965c-fb256cd7bf41","Design editor where a product tour modal explains how to refine the generated color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_onboarding-4_739a0ddc_nicelydone.jpg",[232,234,236,238],{"id":143,"label":144,"slug":145,"rank":63,"group":233},{"id":108,"label":147,"slug":148},{"id":138,"label":139,"slug":140,"rank":65,"group":235},{"id":134,"label":135,"slug":136},{"id":189,"label":190,"slug":191,"rank":91,"group":237},{"id":134,"label":135,"slug":136},{"id":171,"label":172,"slug":173,"rank":199,"group":239},{"id":108,"label":147,"slug":148},[241,245,246,247,248],{"id":242,"title":243,"slug":244},214,"Popover","popover",{"id":70,"title":71,"slug":72},{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":250},[],{"uuid":252,"title":253,"description":254,"canonical_path":29,"image":255,"width":54,"height":126,"image_alt":256,"kind":57,"patterns":257,"component_categories":276,"app":281},"9c67e453-abd8-488f-9df3-17a7e76bf101","Generate color scheme","Design editor where the user generates, views, and exports a five-color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_generate-color-scheme_56eef20d_nicelydone.jpg","Generate color scheme from Coolors",[258,260,267,269],{"id":143,"label":144,"slug":145,"rank":63,"group":259},{"id":108,"label":147,"slug":148},{"id":261,"label":262,"slug":263,"rank":65,"group":264},30,"AI Generation","ai-generation",{"id":199,"label":265,"slug":266},"AI","ai",{"id":171,"label":172,"slug":173,"rank":91,"group":268},{"id":108,"label":147,"slug":148},{"id":270,"label":271,"slug":272,"rank":199,"group":273},25,"Upload & Download","upload-and-download",{"id":91,"label":274,"slug":275},"Actions","actions",[277,278,279,280],{"id":70,"title":71,"slug":72},{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"slug":36,"title":35,"logo":38,"categories":282},[],{"uuid":284,"title":285,"description":286,"canonical_path":29,"image":287,"width":54,"height":126,"image_alt":288,"kind":57,"patterns":289,"component_categories":299,"app":307},"143a7e3b-2675-4ea6-9276-9854f15cb2da","Save color scheme","Design editor where the user saves a generated color scheme by providing a palette label in a modal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_save-color-scheme_0db2ce87_nicelydone.jpg","Save color scheme from Coolors",[290,292,297],{"id":143,"label":144,"slug":145,"rank":63,"group":291},{"id":108,"label":147,"slug":148},{"id":293,"label":294,"slug":295,"rank":65,"group":296},11,"Edit","edit",{"id":91,"label":274,"slug":275},{"id":171,"label":172,"slug":173,"rank":91,"group":298},{"id":108,"label":147,"slug":148},[300,304,305,306],{"id":301,"title":302,"slug":303},233,"Tabs","tabs",{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":308},[],{"uuid":310,"title":311,"description":312,"canonical_path":29,"image":313,"width":54,"height":126,"image_alt":314,"kind":57,"patterns":315,"component_categories":325,"app":330},"c8bb31df-32d0-4268-a5d3-5df39811c9a0","Generator settings","Design editor where the user configures color generation settings like isolation mode and monochromatic generation via a modal overlay.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_generator-settings_f3c6f654_nicelydone.jpg","Generator settings from Coolors",[316,318,323],{"id":143,"label":144,"slug":145,"rank":63,"group":317},{"id":108,"label":147,"slug":148},{"id":319,"label":320,"slug":321,"rank":65,"group":322},33,"AI Settings","ai-settings",{"id":199,"label":265,"slug":266},{"id":293,"label":294,"slug":295,"rank":91,"group":324},{"id":91,"label":274,"slug":275},[326,327,328,329],{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":331},[],{"uuid":333,"title":334,"description":335,"canonical_path":29,"image":336,"width":54,"height":126,"image_alt":337,"kind":57,"patterns":338,"component_categories":347,"app":352},"47dba8fc-7a56-423d-bfcf-64775cc2c412","Pick color from an image","Design editor where the user can upload an image or enter a URL to extract a color palette.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fcoolors_pick-color-image_64837c8e_nicelydone.jpg","Pick color from an image from Coolors",[339,341,343,345],{"id":143,"label":144,"slug":145,"rank":63,"group":340},{"id":108,"label":147,"slug":148},{"id":270,"label":271,"slug":272,"rank":65,"group":342},{"id":91,"label":274,"slug":275},{"id":171,"label":172,"slug":173,"rank":91,"group":344},{"id":108,"label":147,"slug":148},{"id":261,"label":262,"slug":263,"rank":199,"group":346},{"id":199,"label":265,"slug":266},[348,349,350,351],{"id":151,"title":152,"slug":153},{"id":114,"title":115,"slug":116},{"id":74,"title":75,"slug":76},{"id":78,"title":79,"slug":80},{"slug":36,"title":35,"logo":38,"categories":353},[],{"family":355,"examples":356},"pages",[],[358,360,362,365,368,371,373,377,381,385],{"label":359,"to":29},"Coolors product screens",{"label":361,"to":32},"Coolors marketing pages",{"label":363,"to":364},"Coolors user flows","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fflows",{"label":366,"to":367},"Coolors UI components","\u002Fexamples\u002Fapps\u002Fcoolors\u002Fcomponents",{"label":369,"to":370},"Design app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdesign",{"label":372,"to":18},"All SaaS app examples",{"label":374,"to":375,"description":376},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":378,"to":379,"description":380},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":382,"to":383,"description":384},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":386,"to":387,"description":388},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":390,"updated_at":391},"2017-06-10T15:25:00.000Z","2026-09-13T13:02:39.000Z"]