Color Palette

color-palette.markdown

Color Palette

This is practice for a component I'm thinking about integrating into a blog on my personal site. I'm looking for ways to improve my art and design skills, and maybe get better at React while I'm at it. I read an article on smashing magazine that recommended trying to create a color scheme every day, so I decided to try it out for a bit!

Here's a link to the article if you're interested: Color Theory for Designers: How To Create Your Own Color Schemes

A Pen by B Wilcox on CodePen.

License.

index.html

<div id="app"></div>

script.babel

const colorData = [
  {
    color: "#EEFFFF",
    size: 8
  },
  {
    color: "#27E0E0",
    size: 5,
  },
  {
    color: "#1195A8",
    size: 3
  },
  {
    color: "#1A3145",
    size: 2
  },
  {
    color: "#FF2F4A",
    size: 1
  }
];

/**
 * This describes a single element in our color palette.
 */
const Color = props => {
  const style = {
    backgroundColor: props.color,
    flex: `${props.size} 0 auto`
  }
  return (
    <div style={style}></div>
  );
};

/**
 * This will be our color palette. Accepts an array of color
 * data and renders each one in a color component.
 */
const Palette = props => {
  const style = {
    "display": "flex",
    "width": "100%",
    "height": "100%"
  };
  return (
    <div style={style}>
      {props.colors.map(color => <Color size={color.size} color={color.color} />)}
    </div>
  );
};

ReactDOM.render(<Palette colors={colorData} />, document.getElementById("app"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>

style.css

html, body, #app {
  width: 100%;
  height: 100%;
}