RGB Colour Mixer<\/title><\/p>\n<style>\n * {\n box-sizing: border-box;\n }<\/p>\n body {\n margin: 0;\n padding: 40px 20px;<\/p>\n font-family: Arial, sans-serif;<\/p>\n background-color: #eeeeee;<\/p>\n text-align: center;\n }<\/p>\n h1 {\n margin-bottom: 10px;\n }<\/p>\n .instructions {\n margin-bottom: 30px;\n }<\/p>\n \/* =====================================\n MAIN COLOUR DISPLAY\n ===================================== *\/<\/p>\n #colourDisplay {\n width: 100%;\n max-width: 700px;<\/p>\n height: 250px;<\/p>\n margin: 0 auto 30px auto;<\/p>\n background-color: rgb(128, 128, 128);<\/p>\n border: 4px solid white;<\/p>\n border-radius: 12px;<\/p>\n box-shadow: 0 3px 10px rgba(0,0,0,0.2);<\/p>\n display: flex;\n align-items: center;\n justify-content: center;\n }<\/p>\n \/* =====================================\n RGB CONTROLS\n ===================================== *\/<\/p>\n .controls {\n width: 100%;\n max-width: 700px;<\/p>\n margin: 0 auto;<\/p>\n background-color: white;<\/p>\n padding: 25px;<\/p>\n border-radius: 10px;<\/p>\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n }<\/p>\n .slider-row {\n display: flex;\n align-items: center;<\/p>\n margin: 20px 0;\n }<\/p>\n .slider-label {\n width: 80px;<\/p>\n font-weight: bold;<\/p>\n text-align: left;\n }<\/p>\n .slider-value {\n width: 45px;<\/p>\n font-family: monospace;<\/p>\n font-size: 18px;<\/p>\n font-weight: bold;<\/p>\n text-align: right;\n }<\/p>\n \/* Sliders *\/<\/p>\n input[type=\"range\"] {\n flex: 1;<\/p>\n margin: 0 15px;<\/p>\n cursor: pointer;\n }<\/p>\n \/* Red slider *\/<\/p>\n #redSlider {\n accent-color: red;\n }<\/p>\n \/* Green slider *\/<\/p>\n #greenSlider {\n accent-color: green;\n }<\/p>\n \/* Blue slider *\/<\/p>\n #blueSlider {\n accent-color: blue;\n }<\/p>\n \/* =====================================\n RGB INFORMATION\n ===================================== *\/<\/p>\n .colour-information {\n margin-top: 25px;<\/p>\n padding-top: 20px;<\/p>\n border-top: 1px solid #ddd;\n }<\/p>\n .rgb-value {\n font-family: monospace;<\/p>\n font-size: 24px;<\/p>\n font-weight: bold;<\/p>\n margin: 10px;\n }<\/p>\n .hex-value {\n font-family: monospace;<\/p>\n font-size: 20px;<\/p>\n color: #555;\n }<\/p>\n \/* =====================================\n RESET BUTTON\n ===================================== *\/<\/p>\n button {\n margin-top: 20px;<\/p>\n padding: 10px 25px;<\/p>\n border: none;<\/p>\n border-radius: 5px;<\/p>\n background-color: #333;<\/p>\n color: white;<\/p>\n font-size: 16px;<\/p>\n cursor: pointer;\n }<\/p>\n button:hover {\n background-color: #555;\n }<\/p>\n<\/style>\n<\/head><\/p>\n<body><\/p>\n<h1>RGB Colour Mixer<\/h1>\n<div class=\"instructions\">\n Move the sliders to mix the \n Red<\/strong>, \n Green<\/strong> and \n Blue<\/strong> values.<\/p><\/div>\n <\/p>\n<div id=\"colourDisplay\"><\/div>\n <\/p>\n<div class=\"controls\">\n <\/p>\n<div class=\"slider-row\">\n<div class=\"slider-label\">\n Red\n <\/div>\n <input\n type=\"range\"\n id=\"redSlider\"\n min=\"0\"\n max=\"255\"\n value=\"128\"\n ><\/p>\n<div\n class=\"slider-value\"\n id=\"redValue\"\n > \n 128\n <\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"slider-row\">\n<div class=\"slider-label\">\n Green\n <\/div>\n <input\n type=\"range\"\n id=\"greenSlider\"\n min=\"0\"\n max=\"255\"\n value=\"128\"\n ><\/p>\n<div\n class=\"slider-value\"\n id=\"greenValue\"\n > \n 128\n <\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"slider-row\">\n<div class=\"slider-label\">\n Blue\n <\/div>\n <input\n type=\"range\"\n id=\"blueSlider\"\n min=\"0\"\n max=\"255\"\n value=\"128\"\n ><\/p>\n<div\n class=\"slider-value\"\n id=\"blueValue\"\n > \n 128\n <\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"colour-information\">\n<div class=\"rgb-value\" id=\"rgbValue\">\n RGB(128, 128, 128)\n <\/div>\n<div class=\"hex-value\" id=\"hexValue\">\n #808080\n <\/div>\n<\/p><\/div>\n <\/p>\n <button onclick=\"resetColour()\"> \n Reset \n <\/button><\/p><\/div>\n <script><\/p>\n \/\/ Get the sliders<\/p>\n const redSlider =\n document.getElementById(\"redSlider\");<\/p>\n const greenSlider =\n document.getElementById(\"greenSlider\");<\/p>\n const blueSlider =\n document.getElementById(\"blueSlider\");<\/p>\n \/\/ Get the displayed values<\/p>\n const redValue =\n document.getElementById(\"redValue\");<\/p>\n const greenValue =\n document.getElementById(\"greenValue\");<\/p>\n const blueValue =\n document.getElementById(\"blueValue\");<\/p>\n \/\/ Get the colour display<\/p>\n const colourDisplay =\n document.getElementById(\"colourDisplay\");<\/p>\n \/\/ Get RGB and HEX displays<\/p>\n const rgbValue =\n document.getElementById(\"rgbValue\");<\/p>\n const hexValue =\n document.getElementById(\"hexValue\");<\/p>\n \/*\n Convert a number from decimal\n to a two-digit hexadecimal value.\n *\/<\/p>\n function toHex(value) {<\/p>\n return Number(value)\n .toString(16)\n .padStart(2, \"0\")\n .toUpperCase();<\/p>\n }<\/p>\n \/*\n Update the colour\n *\/<\/p>\n function updateColour() {<\/p>\n \/\/ Get slider values<\/p>\n const red =\n redSlider.value;<\/p>\n const green =\n greenSlider.value;<\/p>\n const blue =\n blueSlider.value;<\/p>\n \/\/ Update numbers beside sliders<\/p>\n redValue.textContent = red;<\/p>\n greenValue.textContent = green;<\/p>\n blueValue.textContent = blue;<\/p>\n \/*\n Create RGB colour\n *\/<\/p>\n const rgb =\n `rgb(${red}, ${green}, ${blue})`;<\/p>\n \/*\n Change the large\n colour display.\n *\/<\/p>\n colourDisplay.style.backgroundColor =\n rgb;<\/p>\n \/*\n Display RGB value\n *\/<\/p>\n rgbValue.textContent =\n `RGB(${red}, ${green}, ${blue})`;<\/p>\n \/*\n Create HEX value\n *\/<\/p>\n const hex =\n \"#\" +\n toHex(red) +\n toHex(green) +\n toHex(blue);<\/p>\n \/*\n Display HEX value\n *\/<\/p>\n hexValue.textContent = hex;<\/p>\n }<\/p>\n \/*\n Update colour whenever\n a slider is moved.\n *\/<\/p>\n redSlider.addEventListener(\n \"input\",\n updateColour\n );<\/p>\n greenSlider.addEventListener(\n \"input\",\n updateColour\n );<\/p>\n blueSlider.addEventListener(\n \"input\",\n updateColour\n );<\/p>\n \/*\n Reset all sliders\n *\/<\/p>\n function resetColour() {<\/p>\n redSlider.value = 128;<\/p>\n greenSlider.value = 128;<\/p>\n blueSlider.value = 128;<\/p>\n updateColour();<\/p>\n }<\/p>\n \/*\n Set the initial colour\n *\/<\/p>\n updateColour();<\/p>\n <\/script><\/p>\n<\/body> \n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"RGB Colour Mixer RGB Colour Mixer Move the sliders to mix the Red, Green and Blue values. Red 128 Green 128 Blue 128 RGB(128, 128, 128) #808080 Reset<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-635","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":2,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/635\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/635\/revisions\/638"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":635,"date":"2026-10-02T10:13:31","date_gmt":"2026-10-02T10:13:31","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=635"},"modified":"2026-10-02T10:15:52","modified_gmt":"2026-10-02T10:15:52","slug":"colourslider","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/colourslider\/","title":{"rendered":"ColourSlider"},"content":{"rendered":"

\n
\n
\n
\n <\/p>\n