This gist contains some react components for displaying color palettes in a visually pleasing way. It uses React (from create-react-app) with styled components. The display is inspired by the Refactoring UI book. The colors.js file makes it very easy to add/remove/adjust colors and see the results. Simply render the Colors component in your Reac…

Colors.js

// src/components/Colors.js
import React from 'react';
import styled from 'styled-components';
import Swatch from './Swatch';
import colors from '../styles/colors';

const ucfirst = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
};

const ColorCategory = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  border-top: 1px solid rgba(0,0,0,0.2);
  
  &:first-child {
    margin-top: 1em;
  }
`;

const Colors = () => {
  return Object.keys(colors).map(category => (
    <ColorCategory key={category}>
      <span>{ucfirst(category)}</span>
      <span>
        {Object.keys(colors[category]).sort().reverse().map(i => (
          <Swatch key={i} color={colors[category][i]}/>
        ))}
      </span>
    </ColorCategory>
  ))
};

export default Colors;
  

colors.js

// src/styles/colors.js
const colors = {
  primary: {
    900: "hsl(93, 100%, 15%)",
    800: "hsl(93, 100%, 18%)",
    700: "hsl(93, 99%, 20%)",
    600: "hsl(93, 99%, 22%)",
    500: "hsl(93, 98%, 24%)",
    400: "hsl(93, 90%, 29%)",
    300: "hsl(93, 77%, 34%)",
    200: "hsl(93, 60%, 64%)",
    100: "hsl(93, 55%, 84%)",
  },
  neutral: {
    900: "hsl(93, 82%, 4%)",
    500: "hsl(93, 5%, 50%)",
    100: "hsl(93, 20%, 97%)",
  },
  accents: {
    900: "hsl(358, 100%, 20%)",
    500: "hsl(358, 55%, 45%)",
    100: "hsl(358, 58%, 96%)",
  }
};

export default colors;

Swatch.js

// src/components/Swatch.js
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const Swatch = styled.div`
  display: inline-block;
  margin: 1rem 0.5rem
  background-color: ${props => props.color};
  width: 40px;
  height: 40px;
  border-radius: 5px;
  box-shadow: inset rgba(0,0,0,0.2) 1px 1px 1px 0;
`;

Swatch.propTypes = {
  color: PropTypes.string.isRequired,
};

export default Swatch;