roloc

A library that selects a color from a list of the primary and secondary colors (or grey scale in color blind mode) with a high contrast.

Install

Install by running the npm install command. npm i --save roloc

Usage

CSS only

import 'roloc/roloc.css';

// Now just add the roloc or roloc-cb class to your html.
// Doesn't have to be in JSX you can use it in plain html, just using JSX for the example.
export default () => <div className="roloc">Hello World!</div>;

Basic usage (CSS in JS)

import roloc from 'roloc'; // ES6
// var roloc = require('roloc').default // ES5;

const style = {
  name : {
    display: 'flex',
    backgroundColor: roloc(), // Default: Pull a color from the list of colors.
    
  },
  picture: {
    display: 'flex',
    backgroundColor: roloc(2) // Passed optional parameter to jump 2 colors in the list of colors.
  }
}

/**
ES5 compatible
module.exports = function(props) {
  return (
    <div className='bioCard' style={{backgroundColor: roloc()}}>
      <div className='name' style={style.name}></div>
      <div className='picture' style={style.picture}></div>
    </div>
  )
}
*/

// ES6
export default (props) => (
  <div className='bioCard' style={{backgroundColor: roloc()}}>
    <div className='name' style={style.name}></div>
    <div className='picture' style={style.picture}></div>
  </div>
);

Colorblind Usage

import { rolocColorBlind } from 'roloc'; // ES6

const style = {
  name : {
    display: 'flex',
    backgroundColor: rolocColorBlind(), // Use the color blind version of the function that uses black and white gradients.
  }
}

Special thanks

Thanks to Gantman for helping come up with ideas on this project.