{"id":862,"date":"2025-05-08T02:50:48","date_gmt":"2025-05-08T02:50:48","guid":{"rendered":"https:\/\/pensplace.co.uk\/?p=862"},"modified":"2025-05-08T02:58:15","modified_gmt":"2025-05-08T02:58:15","slug":"icons-25-color-name-detection-with-colornames-org-api","status":"publish","type":"post","link":"https:\/\/pensplace.co.uk\/index.php\/2025\/05\/08\/icons-25-color-name-detection-with-colornames-org-api\/","title":{"rendered":"Icons 25 Gets a Splash of Color\u2026 Names"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>In <strong>Icons 25<\/strong>, I\u2019ve added a fun little upgrade that\u2019s all about making colors a bit more human. You know how we always end up picking a hex like <code class=\"\" data-line=\"\">#770000<\/code> and thinking\u2026 <em>\u201chmm\u2026 that\u2019s red, right? Or maybe maroon?\u201d<\/em> \ud83e\udd14<\/p>\n\n\n\n<p>Well, now when you pick a foreground or background color in Icons, it\u2019ll <strong>tell you the name of that color<\/strong> \u2014 thanks to a clever little custom connector to <a href=\"https:\/\/colornames.org\/\">ColorNames.org<\/a>. It\u2019s like your color picker just got a tiny voice that says: <em>\u201cHey, that\u2019s Forest Green!\u201d<\/em> \ud83c\udf32\ud83d\udc9a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83e\udde0 Why Bother?<\/h2>\n\n\n\n<p>Honestly, this started as a \u201cwouldn\u2019t it be cool if\u2026\u201d kind of idea. But the more I played with it, the more useful it became.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It helps you <strong>actually know what color you\u2019re picking<\/strong> (no more guessing).<\/li>\n\n\n\n<li>It makes it easier to <strong>talk about colors<\/strong> with others. \u201cHey, let\u2019s use Seafoam Green\u201d sounds way better than \u201cthat one hex that starts with #9E&#8230;\u201d<\/li>\n\n\n\n<li>And most importantly\u2026 it\u2019s just kinda fun! \ud83c\udf89<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2699\ufe0f How It Works (Nerd Corner)<\/h2>\n\n\n\n<p>Here\u2019s the deal:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You pick a color in Icons.<\/li>\n\n\n\n<li>The app sends the hex (like <code class=\"\" data-line=\"\">ff0000<\/code>) to the <a href=\"https:\/\/colornames.org\/\">ColorNames.org<\/a> API.<\/li>\n\n\n\n<li>It sends back the closest matching name \u2014 like \u201cRed\u201d or \u201cSunset Orange.\u201d<\/li>\n\n\n\n<li>That name appears <strong>right under the color picker<\/strong>, next to the hex.<\/li>\n<\/ol>\n\n\n\n<p>Boom. Simple as that.<\/p>\n\n\n\n<p>If there\u2019s no close match, it just doesn\u2019t show anything. No errors, no fuss.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd0c Under the Hood: The Custom Connector<\/h2>\n\n\n\n<p>Built a quick custom connector in Power Apps that does:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-powerquery\" data-line=\"\">GET https:\/\/colornames.org\/search\/json?hex=yourhexhere<\/code><\/pre>\n\n\n\n<p>And it returns:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-powerquery\" data-line=\"\">{\n  &quot;hex&quot;: &quot;228b22&quot;,\n  &quot;name&quot;: &quot;Forest Green&quot;,\n  &quot;exactMatchName&quot;: true\n}<\/code><\/pre>\n\n\n\n<p>In the app, I just grab <code class=\"\" data-line=\"\">.name<\/code> and plop it below the color picker. That\u2019s it. \ud83d\ude0e<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\uddbc\ufe0f What It Looks Like<\/h2>\n\n\n\n<p>Let\u2019s say you pick a color\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">#FF0000<\/code> \u2192 <strong>Red<\/strong><\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">#228B22<\/code> \u2192 <strong>Forest Green<\/strong><\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">#FFD700<\/code> \u2192 <strong>Gold<\/strong><\/li>\n<\/ul>\n\n\n\n<p>It\u2019s instant, it\u2019s smooth, and honestly makes picking colors feel that little bit more personal.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfc1 Final Thoughts<\/h2>\n\n\n\n<p>This isn\u2019t some massive game-changing feature\u2014but it is <strong>a nice little quality-of-life upgrade<\/strong> that makes Icons feel more polished and more fun.<\/p>\n\n\n\n<p>If you\u2019ve already got Icons 25, it\u2019s live now\u2014just pick a color and look below the picker! If not, maybe now\u2019s the time to give Icons a spin.<\/p>\n\n\n\n<p>Let me know what you think \u2014 and if you discover a weird or wonderful color name, definitely send it my way. I\u2019m collecting favourites. \ud83c\udfa8\u2728<\/p>\n\n\n\n<p>\u2014<\/p>\n\n\n\n<p><em>Pen<\/em><br><em>maker of stuff, fan of color names like \u201cKermit Green\u201d and \u201cBanana Mania\u201d<\/em> \ud83c\udf4c<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Icons 25, I\u2019ve added a fun little upgrade that\u2019s all about making colors a bit more human.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[51,31],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-power-apps"],"featured_image_src":"https:\/\/pensplace.co.uk\/wp-content\/uploads\/2025\/05\/image-27.png","author_info":{"display_name":"Pen","author_link":"https:\/\/pensplace.co.uk\/index.php\/author\/pen\/"},"_links":{"self":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":4,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"predecessor-version":[{"id":868,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/862\/revisions\/868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media\/864"}],"wp:attachment":[{"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensplace.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}