{"id":1145,"date":"2023-02-16T09:19:19","date_gmt":"2023-02-16T09:19:19","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=1145"},"modified":"2023-02-16T09:19:19","modified_gmt":"2023-02-16T09:19:19","slug":"color-picker","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/fr\/color-picker\/","title":{"rendered":"Color Picker"},"content":{"rendered":"<div style=\"height:70px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\">\n<section id=\"options\">\n  <div class=\"text full\">\n    <p>Adjust the values to generate new colors.<\/p>\n  <\/div>\n  <form name=\"pickColors\" id=\"pick-colors\" action=\"\">\n    <div class=\"input-group full\">\n     <br>\n      <div class=\"input-element half\">\n\n        <label for=\"hue\">Hue<\/label>\n        <br>\n        <select id=\"hue\" name=\"hue\" size=\"1\">\n          <option>Default<\/option>\n          <option value=\"red\">Red<\/option>\n          <option value=\"orange\">Orange<\/option>\n          <option value=\"yellow\">Yellow<\/option>\n          <option value=\"green\">Green<\/option>\n          <option value=\"blue\">Blue<\/option>\n          <option value=\"purple\">Purple<\/option>\n          <option value=\"pink\">Pink<\/option>\n          <option value=\"monochrome\">Monochrome<\/option>\n          <option value=\"random\">Random<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"input-element half\">\n        <label for=\"luminosity\">Luminosity<\/label>\n        <br>\n        <select id=\"luminosity\" name=\"luminosity\">\n          <option>Default<\/option>\n          <option value=\"bright\">Bright<\/option>\n          <option value=\"light\">Light<\/option>\n          <option value=\"dark\">Dark<\/option>\n          <option value=\"random\">Random<\/option>\n        <\/select>\n        <br>\n      <\/div>\n<br><br>\n      <div class=\"input-element full range\"><br><br><br><br>\n        <label for=\"color-range\">Quantity: <\/label><span id=\"range-label\"><\/span>\n        <br>\n        <input id=\"color-range\" name=\"rndmRange\" type=\"range\" min=\"1\" max=\"128\" step=\"1\" value=\"64\">\n        <br>\n      <\/div>\n    <\/div>\n  <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\n  <div class=\"text full\">\n    <p><\/p>\n  <\/div>\n<\/section>\n<section id=\"color-space\"><\/section>\n<div class=\"clearfix\"><\/div>\n<script async=\"\" type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/randomcolor\/0.4.0\/randomColor.min.js\"><\/script>\n\n\n<style>\n\/* Border-box *\/\n\n\n\n\n\na:link {\n  color: #aaa;\n}\na:visited {\n  color: #777;\n}\na:hover {\n  color: #699;\n}\na:active {\n  color: #fff;\n}\n\n#options{\n  display: block;\n  color: #000;\n  background-color: #fff;\n\n  \n}\n\n\n\n\n\n\nbutton {\n  margin: 1.5em 0;\n}\n\nselect {\n  width: 100%;\n  padding:8px;\n}\n\ninput[type=\"range\" i] {\n    appearance: auto;\n    cursor: default;\n    color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255));\n    padding: initial;\n    border: initial;\n    margin: 2px;\n}\nuser agent stylesheet\ninput {\n    writing-mode: horizontal-tb !important;\n    font-style: ;\n    font-variant-ligatures: ;\n    font-variant-caps: ;\n    font-variant-numeric: ;\n    font-variant-east-asian: ;\n    font-weight: ;\n    font-stretch: ;\n    font-size: ;\n    font-family: ;\n    text-rendering: auto;\n    color: fieldtext;\n    letter-spacing: normal;\n    word-spacing: normal;\n    line-height: normal;\n    text-transform: none;\n    text-indent: 0px;\n    text-shadow: none;\n    display: inline-block;\n    text-align: start;\n    appearance: auto;\n    -webkit-rtl-ordering: logical;\n    cursor: text;\n    background-color: field;\n    margin: 0em;\n    padding: 1px 2px;\n    border-width: 2px;\n    border-style: inset;\n    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));\n    border-image: initial;\n}\n\n\n\n.text {\n  margin: 1em 0 2em 0;\n  max-width: 300px;\n  margin: 0 auto;\n}\n\n.full {\n  width: 100%;\n}\n\n.half {\n  display: inline-block;\n  width: 50%;\n}\n\nlabel, span {\n  font-size: 15px;\n}\n\n.range {\n  display: block;\n  vertical-align: middle;\n  margin: 5px 0;\n}\n\n#range-label {\n  display: inline-block;\n  width: 10%;\n}\n\n\ninput[type=range] {\n  display: inline-block;\n  width: 90%;\n  margin: .5em 0;\n}\n\n.circle {\n  display: inline-block;\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  margin: 10px;\n}\n\n.color-label {\n  font-size: 13px;\n  text-align: center;\n  font-family: monospace;\n  width: 100%;\n}\n\n.swatch {\n  width: 60px;\n  float: left;\n  margin-bottom: 10px;\n}\n\n#color-space {\n  display: block;\n  width: 300px;\n  margin: 0 auto;\n}\n\n.hidden {\n  display: none;\n}\n\n\n\n\/* Tablet and Desktop Views *\/\n\n@media screen and (min-width:600px) {\n  .circle {\n    width: 60px;\n    height: 60px;\n    border-radius: 30px;\n  }\n\n  .swatch {\n    width: 80px;\n    margin-bottom: 20px;\n  }\n\n  #color-space {\n    width: 500px;\n    display: block;\n    padding: 0 10px;\n\n  }\n}\n\n@media screen and (min-width:800px){\n  body, html, #options, #color-space {\n    height: 100%;\n    overflow-y: auto;\n  }\n\n  #options{\n    display: block;\n    float: left;\n  }\n\n  .clearfix {\n    display: block;\n    clear: both;\n    margin: 0;\n  }\n\n  #color-space {\n    width: auto;\n  }\n}\n\n@media screen and (min-width:1280px){\n  .circle {\n    width: 80px;\n    height: 80px;\n    border-radius: 40px;\n  }\n\n  .swatch {\n    width: 100px;\n    margin: 0 15px 10px 15px;\n\n  }\n}\n<\/style>\n\n<script>\n\/*\n * main.js\n * Immediately invoked function expression to contain functions and variables\n *\n *\/\n(function(window, document, undefined) {\n  \"use strict\";\n\n  \/\/ \"Global\" variables\n\n  var rangeInput,          \/\/ how many different colors to generate\n      hueInput,            \/\/ hue inputs (red, blue, etc.)\n      luminosityInput,     \/\/ luminosity inputs (light, dark, etc.)\n      masterSwatch,        \/\/ master template containing DOM nodes for swatches\n      colorArray = [];     \/\/ color array\n\n  \/*\n   * init() is called on load and grabs all of our primary inputs and\n   * initializes our master swatch\n   *\/\n  function init() {\n\n    rangeInput          = document.getElementById('color-range');\n    hueInput            = document.getElementById('hue');\n    luminosityInput     = document.getElementById('luminosity');\n\n    updateRangeValue();\n\n    rangeInput.addEventListener('input',updateRangeValue, false);\n    rangeInput.addEventListener('change', generateColors, false);\n    hueInput.addEventListener('change', generateColors, false);\n    luminosityInput.addEventListener('change', generateColors, false);\n\n    masterSwatch = createSwatch();\n  }\n\n  \/*\n   * generateColors() parses our input and generates the specified number of\n   * color swatches given the inputs selected by the user. This is where we\n   * make our calls to the color.js library\n   *\n   * @param  {Event} e - the click event from the button\n   *\/\n  function generateColors (e) {\n\n    var fragment   = document.createDocumentFragment(),\n        colorSpace = document.getElementById('color-space'),\n        rangeLbl   = document.getElementById('range-label'),\n        colorObj   = {},\n        hue,\n        luminosity;\n\n    e.preventDefault();\n    removeChildren(colorSpace);\n\n    rangeLbl.innerHTML = rangeInput.value;\n\n    \/\/ parse hue and luminosity\n    if (hueInput.selectedIndex >= 1) {\n      hue = hueInput.options[hueInput.selectedIndex].value;\n      colorObj.hue = hue;\n    }\n\n    if (luminosityInput.selectedIndex >= 1) {\n      luminosity = luminosityInput.options[luminosityInput.selectedIndex].value;\n      colorObj.luminosity = luminosity;\n    }\n\n    colorObj.count = rangeInput.value;\n\n    colorArray = randomColor(colorObj);\n    fillSwatches(colorArray, fragment); \/\/ Send array and doc fragment\n\n    colorSpace.appendChild(fragment);\n  }\n\n  \/**\n   * updateRangeValue() is called when the user moves the range input\n   *\/\n  function updateRangeValue() {\n    var rangeLbl = document.getElementById('range-label');\n    rangeLbl.innerHTML = rangeInput.value;\n  }\n\n  \/*\n   * createSwatch() creates the master color swatch template to be used for\n   * all of the generated colors, returning the parent Node\n   *\n   * @return {Node} swatch\n   *\/\n  function createSwatch () {\n    var circle = document.createElement('div'),\n        label  = document.createElement('div'),\n        swatch = document.createElement('div');\n\n    circle.classList.add('circle');\n    label.classList.add('color-label');\n    swatch.classList.add('swatch');\n    swatch.appendChild(circle);\n    swatch.appendChild(label);\n\n    return swatch;\n  }\n\n  \/*\n   * fillswatches() takes an array of hex values and creates a swatch for each\n   * using the master swatch template\n   *\n   * @param  {Array} arr               - the array of hex values\n   * @param  {DocumentFragment} parent - fragment to act as our parent Node\n   *\/\n  function fillSwatches (arr, parent) {\n    arr.forEach(function (hexValue) {\n      var swatch = masterSwatch.cloneNode(true);\n      \/\/ first child = circle, second child = label\n      swatch.childNodes[0].style.backgroundColor = hexValue;\n      swatch.childNodes[0].setAttribute('title', hexValue);\n      swatch.childNodes[1].appendChild(document.createTextNode(hexValue));\n\n      parent.appendChild(swatch);\n    });\n  }\n\n  \/*\n   * removeChildren() takes a parent Node and removes all of its children\n   *\n   * @param  {Node} parent - the parent Node\n   *\/\n  function removeChildren(parent) {\n    while (parent.firstChild)\n      parent.removeChild(parent.firstChild);\n  }\n\n  window.addEventListener('load', init, false);\n  window.addEventListener('load', generateColors, false);\n\n})(window, document);\n<\/script>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Adjust the values to generate new colors. Hue DefaultRedOrangeYellowGreenBluePurplePinkMonochromeRandom Luminosity DefaultBrightLightDarkRandom Quantity:<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1145","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/fr\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages\/1145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/comments?post=1145"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/pages\/1145\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/fr\/wp-json\/wp\/v2\/media?parent=1145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}