color-catalogs

color-catalogs

Find good color catalog for your business, let the users pick up colors and find the color closer based on name or RGB/Hash

npm i color-catalogs

Navigate and find the colors Live

Total Colors so far: 8191

Catalogs

• Australia
• British Standard and British 4800
• Crayola 72 and Crayola 100
• X11
• Flexa
• RAL
• Wikipedia
• NTC
• Japanese
• Matlib
• xkcd
• ISCC/NBS
• FS595
• Resene

Catalog

Use our functions to list catalogs, colors and utils functions to show the proper and translated color to the user

Color Picker

Color Swatches

Example

Node:

const { COLORS, findByColor } = require('color-catalogs');
// List for X11 Color Catalogs
console.log(COLORS.X11) 
// That will find the color: { name: 'Dark Violet', value: '#9400D3' }
const color = findByColor('X11', '#cc00cc') 

Typescript:

import { COLORS, findByColor } from 'color-catalogs';

Browser:

<script src="color-catalogs.js"></script>
<script>
var color = colorsCatalog.findByColor('X11', '#cc00cc') ; 
</script>  

Internationalization (i18n)

We have all the possible colors names unified in a json file and we translated the colors names for the main languages.

Here you can find color names in:

• English
• Italian
• Portuguese
• Spanish
• Detch

React

Live Example using React , React-Color and Color-Catalogs

import React, {useState} from 'react';
import './App.css';
import { CompactPicker, SwatchesPicker } from 'react-color';
import { COLORS, LANGUAGES, translateByName, findByColor,groupColors } from 'color-catalogs'

function App() {
  const catalogs = Object.keys(COLORS)
  const [color, setColor] = useState('#fff')
  const [catalog, setCatalog] = useState(catalogs[0])
  const handleChangeComplete = (color) => {
    setColor(color.hex);
  }
  const colorName = findByColor(catalog,color)
  const colors = Object.values(COLORS[catalog])
  const groupedColors = groupColors(colors)
  const langs = Object.keys(LANGUAGES)

  return (
    <div className="App">
      <h1>
          Color Catalogs
      </h1>
      <div className="search">
        <form>
          <label>Catalogs</label>
          <select onChange={({target})=>setCatalog(target.value)}>
          {catalogs.map(catalog=>(
            <option key={catalog} value={catalog}>{catalog}</option>
            )
          )}
          </select>
        </form>
        <div>
          <p> 
            Name: <b>{colorName.name}</b>
          </p>
          <p>
            Color: <b>{color}</b>
          </p>
          Translations:
          <ul>
          {langs.map(l=>(
            <li>
              {l} : {translateByName(colorName.name,l)}
            </li>
            )
          )}
          </ul>
        </div>
      </div>

      <SwatchesPicker
colors={groupedColors}
        color={color}
        onChangeComplete={handleChangeComplete}
      />

      <CompactPicker
        colors={colors}
        color={color}
        onChangeComplete={handleChangeComplete}
      />
    </div>
  );
}

export default App;

Utils

Methods utils to work with colors:

• colorDistance
• HEXtoRGB
• findByColor
• findByName

Todo

• Windows
• TKinter
• Pyxplot
• PyX
• R
• Werver
• Ingrid Sunderberg
• Warren Mars
• Japanese Colors 1 , 23, 4, 5, 6

Contribute

To contribute to this project, follow the docs: Contribute