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

• X11
• Flexa
• RAL
• Wikipedia
• NTC
• Japanese: https://www.colordic.org/
• Matlib
• xkcd
• ISCC/NBS
• FS595
• British Standard
• British 4800
• Australia
• Resene

Crayola

Crayola 72 Crayola 100

Todo

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

Catalog

Formate seus dados com mascaras de tipos de dados brasileiros

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 } from 'react-color';
import { COLORS } 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 colors = Object.values(COLORS[catalog])
  return (
    <div className="App">
      <h1>
          Color Catalogs
      </h1>
      <label>Catalogs</label>
      <select onChange={({target})=>setCatalog(target.value)}>
      {catalogs.map(catalog=>(
        <option key={catalog} value={catalog}>{catalog}</option>
        )
      )}
      </select>

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

export default App;

Utils

Methods utils to work with colors:

• colorDistance
• HEXtoRGB
• findByColor
• findColorByName

Contribute

To contribute to this project, follow the docs: Contribute