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

cypheir-color-scheme

v0.6.6

Published

An npm package project that help in the generation of color variants and schemes for projects.

Downloads

7

Readme

Cypheir Colour Scheme Generator

Cypheir Logo

Description

The Cypheir Colour Scheme is a meticulously crafted colour palette designed for use in projects involving colour mixing, combination and psychology.

Consider the psychological impact of each colour. How does it make people feel? Use this knowledge strategically in branding, user interfaces, and visual communication.

The Cypheir colour schemes should evoke inspiration and creativity. They should ignite the imagination and encourage innovative design choices.

Installation

npm install cypheir-color-scheme

Usage

Colour Scheme

const { ColourScheme } = require("cypheir-color-scheme");

// Example usage
const color = new ColourScheme("#009cff");
console.log(color.Monochrome());

Colour Palette (*work in progress)

const { ColourPalette } = require("cypheir-color-scheme");

// Example usage
const palette = new ColourPalette();
console.log(palette.showColour());
console.log(palette.paletteAplha());

Colour Name Finder

const { ColourLookup } = require("cypheir-color-scheme");

// Example usage
const colourSearch = ColourLookup("#1ca7ec");
console.log(colourSearch); //  Huelveño Horizon*

Features

  • HSL to RGB Converter
  • RGB to HSL Converter
  • HEX to RGB Converter
  • RGB to HEX Converter
  • RGB to CMYK Converter
  • CMYK to HEX Converter
  • Monochrome Generator
  • Complimentary Colour Scheme
  • Analogous Colour Scheme
  • Tradic Colour Scheme
  • Tetradic Colour Scheme
  • Colour Name Finder

API Reference

ColourLookup(colour) :string

A callback function that looks up the name of the inputted colour.

Returns the name (or alternative name) of the inputted colour.

Note: Any name that gets attached with an asterisk(*) is an alternative name and not the exact colour name.

Monochrome() :Array<string>

A callback function that uses the base colour to run a loop to get the relative monochromatic colours.

Returns an array of string.

Compliments(variation: number | Array<number>, toHex: boolean) :string | RGB | (string | RGB)[]

Parameters:

  • variation: Set the different variants of output: 1 = 180deg, 2 = [150deg, 210deg], [90, 120, 270] = [90deg, 120deg, 270deg].
  • toHex: Converts the output to HEX code (default: true)

Returns a string or a RGB object or an array of strings or RGB objects.

Analogous(offset: number) :RGB

Parameters:

  • offset: Set an offset degree.

Return a RGB object {red: x, green: y, blue: z}.

Tradic(offset: number | [number, number], toHex: boolean)

Parameters:

  • offset: Set offeset between the two triadic angled colours.
  • toHex: To convert the output to HEX.

Returns a string or RGB object array of the triadic colours.

Tetradic(offset: number , toHex: boolean)

Parameters:

  • offset: Set offeset between the two tetradic angled colours.
  • toHex: To convert the output to HEX.

Returns a string or RGB object array of the tetradic colours.

Contributing

Contributions are welcome! If you'd like to improve the color scheme or add support for additional languages, feel free to submit a pull request.

Special Thanks

We would love to give a special shout out and thanks to the creators of the following dependecies, for their hardwork helped in the build of the package.

  • tsup
  • typescript
  • color-name-list
  • nearest-color
  • @changesets/cli

License

This project is licensed under the MIT License.

Developer Setup

tsup.config.ts


import { defineConfig } from "tsup";

export default defineConfig({
format: ["cjs", "esm"],
entry: ["./src/index.ts"],
dts: true,
shims: true,
skipNodeModulesBundle: true,
clean: true,
});

tsconfig.json


{
"compilerOptions": {
/_ Visit https://aka.ms/tsconfig to read more about this file _/

    /* Language and Environment */
    "target": "ES2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 

    /* Modules */
    "module": "CommonJS" /* Specify what module code is generated. */,
    "rootDir": "./" /* Specify the root folder within your source files. */,
    "moduleResolution": "Node10" /* Specify how TypeScript looks up a file from a given module specifier. */,


    /* Emit */
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
    "noEmit": true /* Disable emitting files from a compilation. */,

    /* Interop Constraints */
    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,

},
"include": ["src"],
"exclude": ["node_modules"]
}