{"id":350,"date":"2023-07-26T13:18:59","date_gmt":"2023-07-26T04:18:59","guid":{"rendered":"https:\/\/bbbots.com\/?page_id=350"},"modified":"2023-07-26T13:26:23","modified_gmt":"2023-07-26T04:26:23","slug":"hex-colors","status":"publish","type":"page","link":"https:\/\/bbbots.com\/ja\/hex-colors\/","title":{"rendered":"HEX Colors"},"content":{"rendered":"<!-- Added by Post\/Page specific custom CSS plugin, thank you for using! -->\n<style>input{\r\n  width:300px;\r\n  height:300px;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton{\r\n  height:27px;\r\n}\r\n\r\n#colorHex{\r\n  \r\n  text-transform: uppercase;\r\n}\r\n\r\nh3{text-align:center}\r\n\r\n.outer-picker {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n}<\/style>\n<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1414.4px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"outer-picker\">\n\n\n<h3>Pick a Color:<\/h3>\n<input id=\"inputColor\" type=\"color\" value=\"#ff1a1a\"\/>\n\n<h3 id=\"colorHex\"><\/h3>\n\n<\/div>\n\n\n\n<script>\n\nfunction getColor() {\n    document.getElementById(\"colorHex\").innerHTML = document.getElementById(\"inputColor\").value;\n\n}\nfunction hexToRgb(hex) {\n    var result = \/^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$\/i.exec(hex);\n    var r = parseInt(result[1], 16);\n    var g = parseInt(result[2], 16);\n    var b = parseInt(result[3], 16);\n    return 'RGB('+r+','+g+','+b+')'; \n}\n\nconst backRGB = document.querySelector(\"#colorHex\");\nconst color = document.querySelector(\"#inputColor\");\n\ncolor.addEventListener(\"input\",(event)=>{\n   backRGB.innerHTML = \"HEX Color Code:<br>\" + color.value;\n   \/\/ You can also do it with the event object as event object holds the value of the current color\n   \/\/  backRGB.style.backgroundColor = event.target.value;\n});\n\n\n<\/script><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-350","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/pages\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":0,"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/pages\/350\/revisions"}],"wp:attachment":[{"href":"https:\/\/bbbots.com\/ja\/wp-json\/wp\/v2\/media?parent=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}