Feature - Copy different color formats

README.md

@@ -26,7 +26,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
     - [X] Remove colors
     - [ ] Color ordering 
     - [X] Alpha color (0 - transparent)
-    - [ ] Copy color in different format - HEX, RGBA, HSLA (JSON)
+    - [X] Copy color in different format - HEX, RGBA, HSLA (JSON)
     - [ ] Download color format for ASE, GIMP/Inscape color scheme
 - [ ] Mobile version 
 - [ ] Search bar to search places 

src/components/main-app/sidebar-wrapper/alpha-input.js

@@ -11,6 +11,9 @@ export default function AlphaInput() {
       <input
         type="number"
         value={opacity}
+        step={0.1}
+        max={1}
+        min={0}
         className="input-text"
         placeholder="Alpha Input"
         onChange={e => onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}

src/components/main-app/sidebar-wrapper/color-details.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { URL_COLOR_TYPE, URL_UPDATE_PUSH } from 'config';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { useCopyToClipboard } from 'react-use';
+
+export default function ColorDetails({ text }) {
+  const [colorType, setColorType] = useQueryParam(URL_COLOR_TYPE, StringParam);
+  const [clipboard, copyToClipboard] = useCopyToClipboard();
+  const [copyText, setCopyText] = useState('Copy');
+
+  const onCopy = () => {
+    copyToClipboard(JSON.stringify(text, null, 2));
+    setCopyText('Copied!');
+    setTimeout(() => {
+      setCopyText('Copy');
+    }, 3000);
+  };
+
+  return (
+    <div>
+      <div>
+        <label>Choose Color Type</label>
+        <select
+          className="select-box"
+          name="color-tpye"
+          value={colorType}
+          onChange={e => {
+            setColorType(e.target.value, URL_UPDATE_PUSH);
+          }}
+          defaultValue="rgba"
+        >
+          <option value="hex">Hex</option>
+          <option value="rgba">RGBA</option>
+          <option value="hsla">HSLA</option>
+        </select>
+        <button className="copy-button" onClick={onCopy}>
+          {clipboard.error ? (
+            <p>Unable to copy value: {clipboard.error.message}</p>
+          ) : (
+            <p>{copyText}</p>
+          )}
+        </button>
+      </div>
+      <br />
+      <div className="break-overflow-word">{JSON.stringify(text)}</div>
+    </div>
+  );
+}

src/components/main-app/sidebar-wrapper/colors-input.js

@@ -51,14 +51,14 @@ export default function ColorsInput() {
         <a
           href="#add"
           onClick={() => addColor()}
-          class="iconButton fa fa-lg fa-plus"
+          className="iconButton fa fa-lg fa-plus"
         >
           {' '}
         </a>
       </div>
       <div className="color-input">
         {colorsArray.map((color, key) => (
-          <>
+          <div className="display-inline" key={key}>
             <div
               className="color-input-item"
               style={
@@ -78,7 +78,7 @@ export default function ColorsInput() {
                 onClick={e => setItemColorStatus({ color, key })}
               ></div>
             </div>
-          </>
+          </div>
         ))}
       </div>
       {itemColorStatus ? (

src/components/main-app/sidebar-wrapper/index.js

@@ -2,3 +2,4 @@ export { default as TilesInput } from './tiles-input';
 export { default as ShapeInput } from './shape-input';
 export { default as ColorsInput } from './colors-input';
 export { default as AlphaInput } from './alpha-input';
+export { default as ColorDetails } from './color-details';

src/components/main-app/sidebar.js

@@ -1,4 +1,4 @@
-import { URL_COLORS, URL_OPACITY } from 'config';
+import { URL_COLORS, URL_OPACITY, URL_COLOR_TYPE } from 'config';
 import React, { useEffect, useState } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { copyColor, getColorsArray } from 'utils';
@@ -7,17 +7,19 @@ import {
   ShapeInput,
   ColorsInput,
   AlphaInput,
+  ColorDetails,
 } from './sidebar-wrapper';
 
 export default function Sidebar() {
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [colorType] = useQueryParam(URL_COLOR_TYPE, StringParam);
   const [text, setText] = useState('');
 
   useEffect(() => {
     const colorArray = getColorsArray(colors);
-    setText(copyColor(colorArray, opacity));
-  }, [colors, opacity]);
+    setText(copyColor(colorArray, opacity, colorType));
+  }, [colors, opacity, colorType]);
 
   return (
     <div className="sidebar">
@@ -37,7 +39,7 @@ export default function Sidebar() {
         <AlphaInput />
         <br />
         <br />
-        <div>{JSON.stringify(text)}</div>
+        <ColorDetails text={text} />
       </div>
     </div>
   );

src/config/default.js

@@ -18,3 +18,4 @@ export const COLORS_DEFAULT =
   'f1eef6-e4d2e7-d7b5d8-db8dc4-df65b0-de4094-dd1c77-bb0e5d-980043';
 
 export const OPACITY_DEFAULT = 1;
+export const COLOR_TYPE_DEFAULT = 'rgba';

src/config/index.js

@@ -5,11 +5,13 @@ export {
   URL_TILES,
   URL_COLORS,
   URL_OPACITY,
+  URL_COLOR_TYPE,
 } from './url';
 
 export {
   SHAPE_URL_DEFAULT,
   TILES_URL_DEFAULT,
   COLORS_DEFAULT,
   OPACITY_DEFAULT,
+  COLOR_TYPE_DEFAULT,
 } from './default';

src/config/url.js

@@ -4,3 +4,4 @@ export const URL_SHAPE = 'shape';
 export const URL_TILES = 'tiles';
 export const URL_COLORS = 'colors';
 export const URL_OPACITY = 'opacity';
+export const URL_COLOR_TYPE = 'colorType';

src/pages/main.js

@@ -5,11 +5,13 @@ import {
   URL_TILES,
   URL_COLORS,
   URL_OPACITY,
+  URL_COLOR_TYPE,
   COLORS_DEFAULT,
   URL_UPDATE_PUSH,
   OPACITY_DEFAULT,
   TILES_URL_DEFAULT,
   SHAPE_URL_DEFAULT,
+  COLOR_TYPE_DEFAULT,
 } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
 
@@ -18,6 +20,7 @@ export default function Main() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
   const [colors, onChangeColors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [colorType, setColorType] = useQueryParam(URL_COLOR_TYPE, StringParam);
 
   useEffect(() => {
     if (!shape) {
@@ -43,6 +46,12 @@ export default function Main() {
     }
   }, [opacity, onChangeOpacity]);
 
+  useEffect(() => {
+    if (!colorType) {
+      setColorType(COLOR_TYPE_DEFAULT, URL_UPDATE_PUSH);
+    }
+  }, [colorType, setColorType]);
+
   return (
     <>
       <MainApp />

src/sass/_app.sass

@@ -88,6 +88,18 @@
     font-size: 15px
     border-radius: 6px
 
+.display-inline
+    display: inline
+
+.select-box
+    margin-left: 10px
+    padding: 7px
+.copy-button
+    float: right
+    padding: 6px
+
+.break-overflow-word
+    overflow-wrap: break-word
 
 @media only screen and (max-width: 1440px)
     .sidebar

src/utils/copy-color.js

@@ -10,15 +10,58 @@ function hexToRgbA(hex, opacity) {
       r: (c >> 16) & 255,
       g: (c >> 8) & 255,
       b: c & 255,
-      a: 255 * parseFloat(opacity),
+      a: parseFloat(opacity),
     };
   }
   throw new Error('Bad Hex');
 }
 
-export default function copyColor(colorsArray, opacity) {
+function hexToHsla(hex, opacity) {
+  let rgba = hexToRgbA(hex, opacity);
+  let r = rgba.r,
+    g = rgba.g,
+    b = rgba.b;
+
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h = 0,
+    s = 0,
+    l = 0;
+
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = ((g - b) / delta) % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {
+    h,
+    s,
+    l,
+    a: rgba.a,
+  };
+}
+
+export default function copyColor(colorsArray, opacity, type) {
   if (!colorsArray.length) return null;
   let tempColorsArray = [];
-  colorsArray.map(color => tempColorsArray.push(hexToRgbA(color, opacity)));
+  if (type === 'rgba')
+    colorsArray.map(color => tempColorsArray.push(hexToRgbA(color, opacity)));
+  else if (type === 'hex')
+    colorsArray.map(color => tempColorsArray.push(color));
+  else if (type === 'hsla')
+    colorsArray.map(color => tempColorsArray.push(hexToHsla(color, opacity)));
   return tempColorsArray;
 }