npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rapid7/prisma

v4.0.2

Published

String-to-color generator

Downloads

2

Readme

prisma

A simple string-to-color conversion tool. The string provided generates a unique and consistent color, and an immutable object of the various valid HTML color values are returned.

prisma has no dependencies, and has a tiny footprint of only 1.6kb (minified and gzipped).

Installation

Install via npm:

$ npm i @rapid7/prisma --save

and incorporate into your project:

// ES2015
import prisma from '@rapid7/prisma';

// CommonJS
const prisma = require('@rapid7/prisma').default;

// UMD
const prisma = window.prisma;

Usage

Simply pass a value to the prisma function, and it will return an object with the hashed color information:

const colorizedString = prisma('Hello World!');

/* colorizedString is now the object:
{
  hex: '#7e7be2',
  hsl: 'hsl(242, 64%, 68%)',
  hslArray: [242, 0.64, 0.68],
  hsla: 'hsla(242, 64%, 68%, 1)',
  hslaArray: [242, 0.64, 0.68, 1],
  rgb: 'rgb(126, 123, 226)',
  rgbArray: [126, 123, 226],
  rgba: 'rgba(126, 123, 226, 1)',
  rgbaArray: [126, 123, 226, 1],
  shouldTextBeDark: false,
  shouldTextBeDarkW3C: true
}
*/

Additionally, you can pass an object of options to the call:

const colorizedStringWithOptions = prisma('Hello World!', {
  brightnessThreshold: 135,
  defaultHex: '1d1d1d',
  opacity: 0.5
});

/* colorizedStringWithOptions is now the object:
{
  hex: '#7e7be2',
  hsl: 'hsl(242, 64%, 68%)',
  hslArray: [242, 0.64, 0.68],
  hsla: 'hsla(242, 64%, 68%, 0.5)',
  hslaArray: [242, 0.64, 0.68, 0.5],
  rgb: 'rgb(126, 123, 226)',
  rgbArray: [126, 123, 226],
  rgba: 'rgba(126, 123, 226, 0.5)',
  rgbaArray: [126, 123, 226, 0.5],
  shouldTextBeDark: false,
  shouldTextBeDarkW3C: true
}
*/

Options

brightnessThreshold

Numeric brightness value used as comparator when calculating shouldTextBeDark, where brightness values greater than or equal to the number provided will return true. Valid values are between 0 and 255, with the recommended range between 128 and 145.

  • Default = 130
  • Good = 140
  • Bad = "140"

defaultHex

Hexadecimal code that is the given default for empty strings. Shorthand values or with preceding hash is allowed.

  • Default = 000000
  • Good = ffffff
  • Good = #fff
  • Bad = red

opacity

Numeric opacity value used in rgba and hsla (note that these are the only two colors impacted by opacity).

  • Default = 1
  • Good = 0.5
  • Bad = 50
  • Bad = -0.6

Object properties returned

hex {string}

The hexadecimal color code as a string used in CSS

hsl {string}

The computed values for HSL (hue, saturation, luminance) as a string used in CSS

hslArray {Array<number>}

The computed values for HSL as an array of numbers

hsla {string}

The computed values for HSLA (hue, saturation, luminance, alpha of opacity) as a string used in CSS

hslaArray {Array<number>}

The computed values for HSLA as an array of numbers

rgb {string}

The Computed values for RGB (red, green, blue) as a string used in CSS

rgbArray {Array<number>}

The computed values for RGB as an array of numbers

rgba {string}

The Computed values for RGBA (red, green, blue, alpha of opacity) as a string used in CSS

rgbaArray {Array<number>}

The computed values for RGBA as an array of numbers

shouldTextBeDark {boolean}

Boolean value denoting if using this color as a background-color on an element, should the foreground text color be dark. This is based on an opinionated gamma value threshold.

shouldTextBeDarkW3C {boolean}

Boolean value denoting if using this color as a background-color on an element, should the foreground text color be dark. This is based on the W3C Relative Luminance Definition that is defined in the W3 spec.

Additional functions

prisma.shouldTextBeDark(hexColor: string[, brightnessThreshold: number]) returns {boolean}

Pass a hexadecimal color to it (with or without leading hash), and it returns whether the foreground text should be dark or not based on brightness level.

prisma.shouldTextBeDark('#000'); // false
prisma.shouldTextBeDark('ffffff'); // true

prisma.shouldTextBeDarkW3C(hexColor: string[, brightnessThreshold: number]) returns {boolean}

Pass a hexadecimal color to it (with or without leading hash), and it returns whether the foreground text should be dark or not based on the W3C standard.

prisma.shouldTextBeDarkW3C('#000'); // false
prisma.shouldTextBeDarkW3C('ffffff'); // true

How does it work?

Internally the string is hashed using a simple bitwise operation, and the resultant integer is converted into a hexadecimal code that the other values are built from. Because the hash is a bitwise operation based on charCodeAt, the consistency of the hash is guaranteed, and therefore the resultant colors are as well.

Development

Clone the git repository, and run npm install. From there, you can run any of the following npm scripts:

  • build = builds the library with NODE_ENV=development and with source maps, outputting to the dist folder
  • build:minified = builds the library with NODE_ENV=production and minified, outputting tot the dist folder
  • dev = runs the playground React application to see prisma in action. Have fun playing!
  • lint = runs ESLint against the files in src
  • prepublish = runs lint, transpile, build, and build-minified
  • transpile = runs babel to transpile the files in src to an ES5-compliant version in the lib folder