{"id":5212,"date":"2025-02-18T10:01:47","date_gmt":"2025-02-18T15:01:47","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5212"},"modified":"2025-02-18T10:01:48","modified_gmt":"2025-02-18T15:01:48","slug":"a-color-input-that-also-shows-the-value","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/a-color-input-that-also-shows-the-value\/","title":{"rendered":"A Color Input That Also Shows the Value"},"content":{"rendered":"\n<p>It&#8217;s awfully nice that HTML provides a native color picker. Activating the input opens up a color picker (either the OS-provided one or something the browser provides), allows you to pick a color, and changes the input&#8217;s value to that color<sup data-fn=\"e92f1c3d-12cc-41b9-8c38-631a619bef6d\" class=\"fn\"><a href=\"#e92f1c3d-12cc-41b9-8c38-631a619bef6d\" id=\"e92f1c3d-12cc-41b9-8c38-631a619bef6d-link\">1<\/a><\/sup>. <\/p>\n\n\n\n<p>Here&#8217;s what that&#8217;s like in macOS Chrome:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"554\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/02\/CleanShot-2025-02-17-at-13.28.51.gif?resize=800%2C554&#038;ssl=1\" alt=\"\" class=\"wp-image-5218\" style=\"width:390px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>The UI varies, but <a href=\"https:\/\/frontendmasters.com\/blog\/the-color-input-the-color-picker\/\">in all cases<\/a> <strong>it doesn&#8217;t actually show you the color value you&#8217;ve picked when the picker is closed. <\/strong>I think that&#8217;s&#8230; weird? What if the input is part of a form in which you actually have a valid color you want to put in yourself? Or copy the value out of?<\/p>\n\n\n\n<p>I thought of this while I was looking at <a href=\"https:\/\/codepen.io\/argyleink\/pen\/YzLMaor\">Adam Argyle&#8217;s color-mix() tool<\/a>. It&#8217;s a great tool, but it made me wish I could just type or paste in a color rather than <em>having<\/em> to use the picker.<\/p>\n\n\n\n<p>I figured I&#8217;d toss together a Web Component that would actually display the color. We could call it an <a href=\"https:\/\/adactio.com\/journal\/20618\">HTML web component<\/a> as it starts with perfectly valid HTML (which you can customize as needed) then you wrap it in a custom element to extend the functionality and\/or UI. In this the thing that displays the color is an <code>&lt;input type=\"text\"><\/code>, because that works both to show it, and can accept a value that can propagate back to the color input. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZYzdgNN\" src=\"\/\/codepen.io\/anon\/embed\/ZYzdgNN?height=450&amp;theme-id=47434&amp;slug-hash=ZYzdgNN&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZYzdgNN\" title=\"CodePen Embed ZYzdgNN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That basically does what I was picturing. This keeps it all Light DOM so it would be quite easy to style and customize. Since could be used inside a <code>&lt;form><\/code>, you might need to fiddle with <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ElementInternals#examples\"><code>ElementInternals<\/code><\/a> so that the input can participate in the form as expected. Since there are now <em>two<\/em> inputs that essentially have the same value, it&#8217;s likely you&#8217;ll only want one to submit as form data.<\/p>\n\n\n\n<p>But my example there, like native color inputs themselves, deals exclusively in HEX colors. I was hoping that the text input could deal in <em>any<\/em> sort of valid color format. <\/p>\n\n\n\n<p>Erick Merchant had a clever idea where the color from the text input is coerced into a HEX for the benefit of the color input, but otherwise accepts and valid color value. Try putting <code>oklch(64.26% 0.3059 332)<\/code> into this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JoPgGQY\" src=\"\/\/codepen.io\/anon\/embed\/JoPgGQY?height=450&amp;theme-id=47434&amp;slug-hash=JoPgGQY&amp;default-tab=js,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JoPgGQY\" title=\"CodePen Embed JoPgGQY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Pretty clever if you ask me! It won&#8217;t handle transparency, so that&#8217;s something to consider for sure, but otherwise seems to do a pretty good job. I&#8217;d be tempted to take the color inputs value in a form generally, as it has automatic validation to ensure it&#8217;s a valid color. But in the case of this second demo, I&#8217;d be tempted to take the text input value instead since it honors the original intention of the color, albeit very hard to validate.<\/p>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"e92f1c3d-12cc-41b9-8c38-631a619bef6d\">It would be extremely cool if OS color pickers supported formats other than HEX as well as P3-and-beyond color spaces, but that&#8217;s a topic for another day.   <a href=\"#e92f1c3d-12cc-41b9-8c38-631a619bef6d-link\" aria-label=\"Jump to footnote reference 1\">\u21a9\ufe0e<\/a><\/li><\/ol>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For who-knows-what reason color inputs only show a color swatch, not a string representation of the color. Let&#8217;s see if we can fix that.<\/p>\n","protected":false},"author":1,"featured_media":5226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"[{\"content\":\"It would be extremely cool if OS color pickers supported formats other than HEX as well as P3-and-beyond color spaces, but that's a topic for another day.  \",\"id\":\"e92f1c3d-12cc-41b9-8c38-631a619bef6d\"}]"},"categories":[1],"tags":[81,31,3,36],"class_list":["post-5212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-color","tag-html","tag-javascript","tag-web-components"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/02\/color-input.png?fit=1322%2C712&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5212"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5212\/revisions"}],"predecessor-version":[{"id":5228,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5212\/revisions\/5228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5226"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}