[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fcolor-picker":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":337,"links":338,"dates":387},"\u002Fexamples\u002Fcomponents\u002Fcolor-picker","collection","components",true,{"example_count":9,"app_count":10},175,107,{"id":12,"title":13,"description":14},183,"Color picker","See how interfaces let people choose or enter a color. Explore how swatches, value fields, and selection controls fit together within the color picker.",{"title":16,"description":17,"og_image":18},"Color picker UI examples - Nicelydone","Color picker UI design examples from SaaS apps. See how interfaces let people choose or enter a color. Explore how swatches, value fields, and selection…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2fc8f0da-ea4b-4dc7-bf1a-824a7d73e172.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Color picker UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Color picker UI design examples from SaaS apps. See how interfaces let people choose or enter a color. Explore how swatches, value fields, and selection controls fit together within the color picker.",[32],{"title":33,"description":14,"links":34},"About Color picker",[],[36],"175 UI components",[38,64,89,110,139,161,187,213,243,264,285,310],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"c6f0f4e0-60c6-44f1-ac86-c9c07ed7c4fa","Dock UI component","A date picker popover displaying a calendar grid and dropdowns for month and year selection.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents",1255,887,"UI component from Dock","component",[48],{"id":12,"title":13,"slug":49},"color-picker",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[56,60],{"id":57,"title":58,"slug":59},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},29,"Task Management","task-management",{"uuid":65,"title":66,"description":67,"canonical_path":68,"image":69,"width":70,"height":71,"image_alt":72,"kind":46,"categories":73,"app":75},"2c1476fb-ecf9-4694-b082-80995a2d3752","Avatar color selector","Lets users preview and change the background color of their emoji avatar during onboarding","\u002Fexamples\u002Fapps\u002Ffamily\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9ce16f2f-bbb6-457e-8def-2e8d90566e2f.png",1020,630,"Avatar color selector from Family",[74],{"id":12,"title":13,"slug":49},{"slug":76,"title":77,"logo":78,"baseline":79,"categories":80},"family","Family","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F54b399c5-e1bc-4b2d-9748-6c66246cee2b.png","Your favorite crypto wallet.",[81,85],{"id":82,"title":83,"slug":84},36,"Finance","finance",{"id":86,"title":87,"slug":88},95,"Blockchain","blockchain",{"uuid":90,"title":91,"description":92,"canonical_path":93,"image":94,"width":95,"height":96,"image_alt":97,"kind":46,"categories":98,"app":100},"d00dd6ef-c039-4e98-8f80-b9ceaf5e6ddc","Aboard UI component","A dropdown menu displaying a list of color options with corresponding color swatches.","\u002Fexamples\u002Fapps\u002Faboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbef54349-ecff-4b85-bcf5-6003af0e5c3b.png",267,1106,"UI component from Aboard",[99],{"id":12,"title":13,"slug":49},{"slug":101,"title":102,"logo":103,"baseline":104,"categories":105},"aboard","Aboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fea3ae2e7-7419-4926-acae-b179668f6172.png","Bring joy to your workplace with Aboard",[106],{"id":107,"title":108,"slug":109},10,"Human resources","human-resources",{"uuid":111,"title":112,"description":113,"canonical_path":114,"image":115,"width":116,"height":117,"image_alt":118,"kind":46,"categories":119,"app":121},"63443874-feaa-4877-9c61-3efeed70ef5f","Mailchimp UI component","A user interface displaying style customization options for an email, including color selection and device-specific settings, with an active color picker popover.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd20112d-014b-45b9-b1fa-b7f791cd0d57.png",1423,1019,"UI component from Mailchimp",[120],{"id":12,"title":13,"slug":49},{"slug":122,"title":123,"logo":124,"baseline":125,"categories":126},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[127,131,135],{"id":128,"title":129,"slug":130},25,"Marketing","marketing",{"id":132,"title":133,"slug":134},27,"Email Newsletters","email-newsletters",{"id":136,"title":137,"slug":138},68,"SMS","sms",{"uuid":140,"title":141,"description":142,"canonical_path":143,"image":144,"width":145,"height":146,"image_alt":147,"kind":46,"categories":148,"app":150},"f6bff60b-60be-41d1-bc47-6f49392ced34","Missive UI component","A color picker popover is displayed over a dark-themed application interface, showing a grid of color swatches, a hexadecimal input field, and a color selection button.","\u002Fexamples\u002Fapps\u002Fmissive\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbb9ea3a2-f744-40cc-8be9-f780ee5ced21.png",712,517,"UI component from Missive",[149],{"id":12,"title":13,"slug":49},{"slug":151,"title":152,"logo":153,"baseline":154,"categories":155},"missive","Missive","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmissive-3771692f.png","Team email, chat & tasks",[156,157],{"id":57,"title":58,"slug":59},{"id":158,"title":159,"slug":160},92,"Email","email",{"uuid":162,"title":163,"description":164,"canonical_path":165,"image":166,"width":167,"height":168,"image_alt":169,"kind":46,"categories":170,"app":172},"c3e8a685-0363-43c8-92ac-0c6bef7dbd79","Found UI component","A user interface for selecting an accent color, featuring a grid of color swatches and a hex code input field.","\u002Fexamples\u002Fapps\u002Ffound\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbc749b76-7c07-401a-850b-7dda7e8023ab.png",1067,1209,"UI component from Found",[171],{"id":12,"title":13,"slug":49},{"slug":173,"title":174,"logo":175,"baseline":176,"categories":177},"found","Found","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6e62a187-70b0-4e5c-8c4a-790249b945b0.png","Smarter banking for your business",[178,179,183],{"id":82,"title":83,"slug":84},{"id":180,"title":181,"slug":182},39,"Payments","payments",{"id":184,"title":185,"slug":186},56,"Accounting","accounting",{"uuid":188,"title":189,"description":190,"canonical_path":191,"image":192,"width":193,"height":194,"image_alt":195,"kind":46,"categories":196,"app":198},"6b01a926-bb70-4cd5-bcf8-b8b9e60ed358","Paper UI component","A color picker modal displaying a color spectrum, hue and opacity sliders, numerical input fields for various color models, and a dropdown for selecting color format.","\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7eeb00e7-0363-47e9-8d8e-57fc1a758501.png",1663,650,"UI component from Paper",[197],{"id":12,"title":13,"slug":49},{"slug":199,"title":200,"logo":201,"baseline":202,"categories":203},"paper","Paper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","Design, share, ship",[204,208,212],{"id":205,"title":206,"slug":207},7,"Web Development","web-development",{"id":209,"title":210,"slug":211},8,"Design","design",{"id":57,"title":58,"slug":59},{"uuid":214,"title":215,"description":216,"canonical_path":217,"image":218,"width":219,"height":220,"image_alt":221,"kind":46,"categories":222,"app":224},"2f63aacf-f180-4dfc-8f3a-b61882935e53","Dovetail UI component","A popover menu displaying actions for a tag, including merge, copy, move, and delete options.","\u002Fexamples\u002Fapps\u002Fdovetail\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb2dfdba9-eecb-4e7d-bc05-14ab1fe9fae5.png",604,634,"UI component from Dovetail",[223],{"id":12,"title":13,"slug":49},{"slug":225,"title":226,"logo":227,"baseline":228,"categories":229},"dovetail","Dovetail","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6b47c81d-b89f-43c4-9087-0c1e1df518d7.png","Helps you with the key steps of UX research",[230,231,235,239],{"id":209,"title":210,"slug":211},{"id":232,"title":233,"slug":234},22,"Knowledge Management","knowledge-management",{"id":236,"title":237,"slug":238},35,"Feedback","feedback",{"id":240,"title":241,"slug":242},104,"User Research","user-research",{"uuid":244,"title":245,"description":246,"canonical_path":247,"image":248,"width":249,"height":250,"image_alt":251,"kind":46,"categories":252,"app":254},"1803eea1-d44d-4543-9b82-269da88168f0","Pocket Casts UI component","An input field for a folder name with a color selection palette.","\u002Fexamples\u002Fapps\u002Fpocket-casts\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0b81cbb-8d00-4793-bb33-86eb7c145518.png",1048,477,"UI component from Pocket Casts",[253],{"id":12,"title":13,"slug":49},{"slug":255,"title":256,"logo":257,"baseline":258,"categories":259},"pocket-casts","Pocket Casts","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ff4d1fda4-3822-47c0-a321-da4fe83db7b8.png","Listen to podcasts with the best free podcasting app",[260],{"id":261,"title":262,"slug":263},15,"Media and Entertainment","media-and-entertainment",{"uuid":265,"title":266,"description":267,"canonical_path":268,"image":269,"width":270,"height":271,"image_alt":272,"kind":46,"categories":273,"app":275},"ac74eb11-1679-4a23-8a18-3637c179b25a","Mixpanel UI component","A modal dialog displaying a color picker with a hex code input field, a color saturation and lightness gradient, and a hue slider.","\u002Fexamples\u002Fapps\u002Fmixpanel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5ca7e004-c166-47e4-9745-ecd1e99cdc04.png",930,814,"UI component from Mixpanel",[274],{"id":12,"title":13,"slug":49},{"slug":276,"title":277,"logo":278,"baseline":279,"categories":280},"mixpanel","Mixpanel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6591e7aa-86c8-4da2-8c52-c70f46a86bbb.png","Product analytics for mobile, web, & more",[281],{"id":282,"title":283,"slug":284},46,"Analytics","analytics",{"uuid":286,"title":287,"description":288,"canonical_path":289,"image":290,"width":291,"height":292,"image_alt":293,"kind":46,"categories":294,"app":296},"4b486cbc-2b3f-4037-9582-05270304f732","Lightfield UI component","A popover menu for selecting a color and an icon.","\u002Fexamples\u002Fapps\u002Flightfield\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F638dbc38-c70f-469d-b468-e466d7a64fe3.png",654,355,"UI component from Lightfield",[295],{"id":12,"title":13,"slug":49},{"slug":297,"title":298,"logo":299,"baseline":300,"categories":301},"lightfield","Lightfield","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F3428fd96-b66c-4c23-a060-55858d095f59.png","A new kind of CRM",[302,306],{"id":303,"title":304,"slug":305},53,"CRM","crm",{"id":307,"title":308,"slug":309},80,"Artificial Intelligence","artificial-intelligence",{"uuid":311,"title":312,"description":313,"canonical_path":314,"image":315,"width":316,"height":317,"image_alt":318,"kind":46,"categories":319,"app":321},"328f8598-f2e4-4505-961f-5d048fa094cb","Fabric UI component","A color picker modal with a hex code input field.","\u002Fexamples\u002Fapps\u002Ffabric\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F162bdcb0-30a6-491a-8d8c-b48600485511.png",582,670,"UI component from Fabric",[320],{"id":12,"title":13,"slug":49},{"slug":322,"title":323,"logo":324,"baseline":325,"categories":326},"fabric","Fabric","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F42ed2d48-9d22-43a8-a445-db7acd80254b.png","Your second brain. Remember everything",[327,328,332,336],{"id":232,"title":233,"slug":234},{"id":329,"title":330,"slug":331},30,"Productivity","productivity",{"id":333,"title":334,"slug":335},71,"File sharing","file-sharing",{"id":307,"title":308,"slug":309},[],[339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384],{"label":340,"to":341},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":343,"to":344},"Settings","\u002Fexamples\u002Fscreens\u002Fsettings",{"label":346,"to":347},"AI Settings","\u002Fexamples\u002Fscreens\u002Fai-settings",{"label":349,"to":350},"Design Editor","\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":352,"to":353},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":355,"to":356},"Family design examples","\u002Fexamples\u002Fapps\u002Ffamily",{"label":358,"to":359},"Aboard design examples","\u002Fexamples\u002Fapps\u002Faboard",{"label":361,"to":362},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":364,"to":365},"Missive design examples","\u002Fexamples\u002Fapps\u002Fmissive",{"label":367,"to":368},"Found design examples","\u002Fexamples\u002Fapps\u002Ffound",{"label":370,"to":371},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"label":373,"to":374},"Dovetail design examples","\u002Fexamples\u002Fapps\u002Fdovetail",{"label":376,"to":377},"Pocket Casts design examples","\u002Fexamples\u002Fapps\u002Fpocket-casts",{"label":379,"to":380},"Mixpanel design examples","\u002Fexamples\u002Fapps\u002Fmixpanel",{"label":382,"to":383},"Lightfield design examples","\u002Fexamples\u002Fapps\u002Flightfield",{"label":385,"to":386},"Fabric design examples","\u002Fexamples\u002Fapps\u002Ffabric",{"published_at":388,"updated_at":389},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]