{"id":3464,"date":"2022-09-21T20:08:42","date_gmt":"2022-09-21T15:08:42","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3464"},"modified":"2022-09-21T20:08:45","modified_gmt":"2022-09-21T15:08:45","slug":"hex-color-shades-generator-of-given-color-using-javascript-values-js-react","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/","title":{"rendered":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React"},"content":{"rendered":"\n

App.js<\/h2>\n\n\n\n
import React, { useState } from 'react'\nimport SingleColor from '.\/SingleColor'\n\nimport Values from 'values.js'\n\nfunction App() {\n  const [color, setColor] = useState('')\n  const [error, setError] = useState(false)\n  const [list, setList] = useState(new Values('#f15025').all(10))\n\n  const handleSubmit = (e) => {\n    e.preventDefault()\n    try {\n      let colors = new Values(color).all(10)\n      setList(colors)\n    } catch (error) {\n      setError(true)\n      console.log(error)\n    }\n  }\n\n  return (\n    <>\n      <section className='container'>\n        <h3>color generator<\/h3>\n        <form onSubmit={handleSubmit}>\n          <input\n            type='text'\n            value={color}\n            onChange={(e) => setColor(e.target.value)}\n            placeholder='#f15025'\n            className={`${error ? 'error' : null}`}\n          \/>\n          <button className='btn' type='submit'>\n            submit\n          <\/button>\n        <\/form>\n      <\/section>\n      <section className='colors'>\n        {list.map((color, index) => {\n          return (\n            <SingleColor\n              key={index}\n              {...color}\n              index={index}\n              hexColor={color.hex}\n            \/>\n          )\n        })}\n      <\/section>\n    <\/>\n  )\n}\n\nexport default App<\/pre><\/div>\n\n\n\n
index.css<\/h2>\n\n\n\n
\/*\n=============== \nVariables\n===============\n*\/\n\n:root {\n  \/* dark shades of primary color*\/\n  --clr-primary-1: hsl(205, 86%, 17%);\n  --clr-primary-2: hsl(205, 77%, 27%);\n  --clr-primary-3: hsl(205, 72%, 37%);\n  --clr-primary-4: hsl(205, 63%, 48%);\n  \/* primary\/main color *\/\n  --clr-primary-5: hsl(205, 78%, 60%);\n  \/* lighter shades of primary color *\/\n  --clr-primary-6: hsl(205, 89%, 70%);\n  --clr-primary-7: hsl(205, 90%, 76%);\n  --clr-primary-8: hsl(205, 86%, 81%);\n  --clr-primary-9: hsl(205, 90%, 88%);\n  --clr-primary-10: hsl(205, 100%, 96%);\n  \/* darkest grey - used for headings *\/\n  --clr-grey-1: hsl(209, 61%, 16%);\n  --clr-grey-2: hsl(211, 39%, 23%);\n  --clr-grey-3: hsl(209, 34%, 30%);\n  --clr-grey-4: hsl(209, 28%, 39%);\n  \/* grey used for paragraphs *\/\n  --clr-grey-5: hsl(210, 22%, 49%);\n  --clr-grey-6: hsl(209, 23%, 60%);\n  --clr-grey-7: hsl(211, 27%, 70%);\n  --clr-grey-8: hsl(210, 31%, 80%);\n  --clr-grey-9: hsl(212, 33%, 89%);\n  --clr-grey-10: hsl(210, 36%, 96%);\n  --clr-white: #fff;\n  --clr-red-dark: hsl(360, 67%, 44%);\n  --clr-red-light: hsl(360, 71%, 66%);\n  --clr-green-dark: hsl(125, 67%, 44%);\n  --clr-green-light: hsl(125, 71%, 66%);\n  --clr-black: #222;\n  --transition: all 0.3s linear;\n  --spacing: 0.1rem;\n  --radius: 0.25rem;\n  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n  --max-width: 1170px;\n  --fixed-width: 620px;\n}\n\/*\n=============== \nGlobal Styles\n===============\n*\/\n\n*,\n::after,\n::before {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  background: var(--clr-grey-10);\n  color: var(--clr-grey-1);\n  line-height: 1.5;\n  font-size: 0.875rem;\n}\nul {\n  list-style-type: none;\n}\na {\n  text-decoration: none;\n}\nh1,\nh2,\nh3,\nh4 {\n  letter-spacing: var(--spacing);\n  text-transform: capitalize;\n  line-height: 1.25;\n  margin-bottom: 0.75rem;\n}\nh1 {\n  font-size: 3rem;\n}\nh2 {\n  font-size: 2rem;\n}\nh3 {\n  font-size: 1.25rem;\n}\nh4 {\n  font-size: 0.875rem;\n}\np {\n  margin-bottom: 1.25rem;\n  color: var(--clr-grey-5);\n}\n@media screen and (min-width: 800px) {\n  h1 {\n    font-size: 4rem;\n  }\n  h2 {\n    font-size: 2.5rem;\n  }\n  h3 {\n    font-size: 1.75rem;\n  }\n  h4 {\n    font-size: 1rem;\n  }\n  body {\n    font-size: 1rem;\n  }\n  h1,\n  h2,\n  h3,\n  h4 {\n    line-height: 1;\n  }\n}\n\/*  global classes *\/\n\n\/* section *\/\n.section {\n  width: 90vw;\n  margin: 0 auto;\n  max-width: var(--max-width);\n}\n\n@media screen and (min-width: 992px) {\n  .section {\n    width: 95vw;\n  }\n}\n\n\/*\n=============== \nColor Generator\n===============\n*\/\n\n.container {\n  text-align: center;\n  display: flex;\n  align-items: center;\n  height: 100px;\n  padding-left: 2rem;\n}\n.container h3 {\n  margin-bottom: 0;\n  margin-right: 2rem;\n}\n\ninput {\n  border-color: transparent;\n  padding: 0.5rem 1rem;\n  font-size: 1.2rem;\n  border-top-left-radius: var(--radius);\n  border-bottom-left-radius: var(--radius);\n}\n.btn {\n  background: var(--clr-primary-5);\n  padding: 0.5rem 1rem;\n  font-size: 1.2rem;\n  border-color: transparent;\n  border-top-right-radius: var(--radius);\n  border-bottom-right-radius: var(--radius);\n  text-transform: capitalize;\n  color: var(--clr-white);\n  cursor: pointer;\n}\n@media screen and (max-width: 576px) {\n  .container h3 {\n    font-size: 1rem;\n  }\n  input,\n  .btn {\n    font-size: 0.85rem;\n  }\n}\ninput.error {\n  border: 2px solid var(--clr-red-dark);\n}\n.colors {\n  min-height: calc(100vh - 100px);\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(223.33px, 1fr));\n  grid-template-rows: repeat(auto-fit, minmax(96px, 1fr));\n}\n.color {\n  padding: 1rem 2rem;\n  cursor: pointer;\n  font-size: 1rem;\n  text-transform: none;\n}\n.percent-value {\n  margin-bottom: 0;\n  color: var(--clr-grey-1);\n}\n.color-value {\n  color: var(--clr-grey-1);\n  margin-bottom: 0;\n}\n.color-light .color-value {\n  color: var(--clr-white);\n}\n.color-light .percent-value {\n  color: var(--clr-white);\n}\n\n.alert {\n  text-transform: uppercase;\n  font-size: 0.85rem;\n  margin-top: 0.5rem;\n}<\/pre><\/div>\n\n\n\n
SingleColor.js<\/h2>\n\n\n\n
import React, { useState, useEffect } from 'react'\nimport rgbToHex from '.\/utils'\n\nconst SingleColor = ({ rgb, weight, index, hexColor }) => {\n  const [alert, setAlert] = useState(false)\n  const bcg = rgb.join(',')\n  const hex = rgbToHex(...rgb)\n  const hexValue = `#${hexColor}`\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setAlert(false)\n    }, 3000)\n    return () => clearTimeout(timeout)\n  }, [alert])\n  return (\n    <article\n      className={`color ${index > 10 && 'color-light'}`}\n      style={{ backgroundColor: `rgb(${bcg})` }}\n      onClick={() => {\n        setAlert(true)\n        navigator.clipboard.writeText(hexValue)\n      }}\n    >\n      <p className='percent-value'>{weight}%<\/p>\n      <p className='color-value'>{hexValue}<\/p>\n      {alert && <p className='alert'>copied to clipboard<\/p>}\n    <\/article>\n  )\n}\n\nexport default SingleColor<\/pre><\/div>\n\n\n\n
utils.js<\/h2>\n\n\n\n
function componentToHex(c) {\n    var hex = c.toString(16);\n    return hex.length == 1 ? '0' + hex : hex;\n  }\n  \n  function rgbToHex(r, g, b) {\n    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);\n  }\n  \n  export default rgbToHex;<\/pre><\/div>\n\n\n\n
Screenshot of Hex Color\/Shades Generator of Given Color Using JavaScript values.js React<\/h2>\n\n\n\n
\"Hex
Hex Color\/Shades Generator of Given Color Using JavaScript values.js React<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
App.js index.css SingleColor.js utils.js Screenshot of Hex Color\/Shades Generator of Given Color Using JavaScript values.js React<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHex Color\/Shades Generator of Given Color Using JavaScript values.js React<\/title>\n<meta name=\"description\" content=\"App.js import React, { useState } from 'react' import SingleColor from '.\/SingleColor' import Values from 'values.js' function App() { const =\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React\" \/>\n<meta property=\"og:description\" content=\"App.js import React, { useState } from 'react' import SingleColor from '.\/SingleColor' import Values from 'values.js' function App() { const =\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T15:08:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T15:08:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Hex_Color_Shades_Generator_of_Given_Color_Using_JavaScript_React-1024x499.jpg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React","description":"App.js import React, { useState } from 'react' import SingleColor from '.\/SingleColor' import Values from 'values.js' function App() { const =","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/","og_locale":"en_US","og_type":"article","og_title":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React","og_description":"App.js import React, { useState } from 'react' import SingleColor from '.\/SingleColor' import Values from 'values.js' function App() { const =","og_url":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-21T15:08:42+00:00","article_modified_time":"2022-09-21T15:08:45+00:00","og_image":[{"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Hex_Color_Shades_Generator_of_Given_Color_Using_JavaScript_React-1024x499.jpg","type":"","width":"","height":""}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React","datePublished":"2022-09-21T15:08:42+00:00","dateModified":"2022-09-21T15:08:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/"},"wordCount":46,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/","url":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/","name":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-21T15:08:42+00:00","dateModified":"2022-09-21T15:08:45+00:00","description":"App.js import React, { useState } from 'react' import SingleColor from '.\/SingleColor' import Values from 'values.js' function App() { const =","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/hex-color-shades-generator-of-given-color-using-javascript-values-js-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Hex Color\/Shades Generator of Given Color Using JavaScript values.js React"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3464"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3464\/revisions"}],"predecessor-version":[{"id":3466,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3464\/revisions\/3466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}