@ridi/colors
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

@ridi/colors

Install

$ npm install @ridi/colors

Usage

import colors from '@ridi/colors';
import hex from '@ridi/colors/hex.json';
import rgb from '@ridi/colors/rgb.json';
import hsl from '@ridi/colors/hsl.json';
import hwb from '@ridi/colors/hwb.json';

colors.dogerBlue5; // #EBF6FF
hex.dogerBlue5; // #EBF6FF
rgb.dogerBlue5; // rgb(235, 246, 255)
hsl.dogerBlue5; // hsl(207, 100%, 96%)
hwb.dogerBlue5; // hwb(207, 92%, 0%)

Colors

import colors from '@ridi/colors';
import hex from '@ridi/colors/hex.json';
import rgb from '@ridi/colors/rgb.json';
import hsl from '@ridi/colors/hsl.json';
import hwb from '@ridi/colors/hwb.json';

import Color from 'color';

<div>
  {Object.keys(colors).map((name) => {
    const color = Color(colors[name]);

    return (
      <div
        key={name}
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '8px',
          color: color.isLight() ? 'black' : 'white',
          backgroundColor: color,
        }}
      >
        <div
          style={{
            flex: 1,
            userSelect: 'all',
            fontSize: '14px',
            fontWeight: 'bold',
          }}
        >
          {name}
        </div>

        <div style={{ fontSize: '10px', textAlign: 'right' }}>
          <div style={{ userSelect: 'all' }}>{hex[name]}</div>
          <div style={{ userSelect: 'all' }}>{rgb[name]}</div>
          <div style={{ userSelect: 'all' }}>{hsl[name]}</div>
          <div style={{ userSelect: 'all' }}>{hwb[name]}</div>
        </div>
      </div>
    );
  })}
</div>;

Readme

Keywords

none

Package Sidebar

Install

npm i @ridi/colors

Weekly Downloads

732

Version

0.7.1

License

MIT

Unpacked Size

21.7 kB

Total Files

8

Last publish

Collaborators

  • hw.choi
  • simulacre7
  • ys.yoon
  • lowfront
  • mando212
  • khinenw
  • davin.ahn
  • ridicorp
  • ridi-junhee