React component to pick colors.

ColorPicker.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const ColorPickerWrapper = styled.div`
  width: 100%;
  background-color: white;
  padding: 40px 0;
`;

const BaseColors = styled.div`
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
`;
const BaseColor = styled.div`
  background-color: rgb(${props => props.color.join()});
  float: left;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  width: 25px;
  height: 25px;
  margin: 20px;
  transform: ${props => (props.active ? "scale(1.3, 1.3)" : "scale(1, 1)")};
`;

const VariedColors = styled.div`
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
`;
const VariedColor = styled.div`
  background-color: rgb(${props => props.color.join()});
  float: left;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  width: 30px;
  height: 30px;
  margin: 10px;
  transform: ${props => (props.active ? "scale(1.3, 1.3)" : "scale(1, 1)")};
`;

const ActiveColor = styled.div``;

class ColorPicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeColor: [0, 0, 0],
      activeBaseColor: [0, 72, 139],
      variedColors: [
        [0, 52, 119],
        [0, 72, 139],
        [0, 92, 159],
        [12, 112, 179],
        [32, 132, 199],
        [52, 152, 219],
        [72, 172, 239],
        [92, 192, 255],
        [112, 212, 255],
        [132, 232, 255]
      ]
    };
  }
  baseColors = [
    [46, 204, 113],
    [52, 152, 219],
    [155, 89, 182],
    [52, 73, 94],
    [241, 196, 15],
    [230, 126, 34],
    [231, 76, 60]
  ];
  lightModifier = 20;
  darkModifier = 0;
  transitionDuration = 200;
  transitionDelay = 25;
  variationTotal = 10;

  createVariations = baseColor => {
    if (baseColor.length < 1) {
      return;
    }
    // store the color variations
    let colorVariations = [];

    // Make variationTotal variations
    for (let index = 0; index < this.variationTotal; index++) {
      // The new color variation to save.
      const newColor = [];

      // The base color has some number of attributes (3) (red, green, and blue)
      // Each attribute needs to be changed by some amount to create a variation
      for (let x = 0; x < baseColor.length; x++) {
        // Take the color number, reduce it by 100 then darken until you hit 255
        let modifiedColor =
          Number(baseColor[x]) - 100 + this.lightModifier * index;

        if (modifiedColor <= 0) {
          modifiedColor = 0;
        } else if (modifiedColor >= 255) {
          modifiedColor = 255;
        }

        newColor.push(modifiedColor);
      }
      colorVariations.push(newColor);
    }
    return colorVariations;
  };
  render() {
    return (
      <ColorPickerWrapper>
        <BaseColors>
          {this.baseColors.map((baseColor, index) => {
            return (
              <BaseColor
                key={index}
                color={baseColor}
                active={baseColor === this.state.activeBaseColor ? true : false}
                onClick={() => {
                  const variedColors = this.createVariations(baseColor);
                  this.setState({
                    activeBaseColor: baseColor,
                    variedColors
                  });
                }}
              />
            );
          })}
        </BaseColors>
        <VariedColors>
          {this.state.variedColors.map((variedColor, index) => {
            return (
              <VariedColor
                key={index}
                color={variedColor}
                active={variedColor === this.state.activeColor ? true : false}
                onClick={() => {
                  this.props.setColor(variedColor);
                  this.setState({ activeColor: variedColor });
                }}
              />
            );
          })}
        </VariedColors>
      </ColorPickerWrapper>
    );
  }
}

ColorPicker.propTypes = {};

export default ColorPicker;