0.0.7 • Published 2 years ago
@ifeelblue/color-kit v0.0.7
color-kit
This is an color library made to use with CSS. Consists of pre-made hex colors based on this page.
Usage
install
npm install @ifeelblue/color-kit
use :monocle_face:
import { darkGreen, BLUE, buildColor } from "@ifeelblue/color-kit";
import { I_Color, E_ColorType } from "@ifeelblue/color-kit";
const greenColorHEX: string = buildColor(darkGreen); // #01ff9b as string
// OR
const greenColorHEX2 = darkGray.hex;
const softBlueAsHEX: string = buildColor(BLUE.dark); // #ff4580 as string
const myCustomHSLAColor: I_Color = {
hue: 5,
saturation: 50, // 50%
lightness: 88, // 88%
alpha: 0.7,
type: E_ColorType.HSLA,
};
const myCustomColorHSLA = buildColor(myCustomHSLAColor); // hsla(5, 50%, 88%, 0.7) as string
Types
solid color
export enum E_ColorType {
HEX,
RGB,
RGBA,
HSL,
HSLA,
}
export interface I_Color {
type: E_ColorType;
hex: string;
/*hsl*/
hue?: number;
saturation?: number;
lightness?: number;
/*rgb*/
red?: number;
green?: number;
blue?: number;
/*opacity*/
alpha?: number;
}
color pack
export interface I_ColorPack {
colorName: string;
dark: I_Color;
mid: I_Color;
soft: I_Color;
}
Default Colors
solid
/*gray*/
const darkGray: I_Color = {
type: E_ColorType.HEX,
hex: "#28293D",
};
const midGray: I_Color = {
type: E_ColorType.HEX,
hex: "#555870",
};
const softGray: I_Color = {
type: E_ColorType.HEX,
hex: "#9090A7",
};
/*White*/
/*Red*/
/*Green*/
/*Blue*/
/*Orange*/
/*Yellow*/
/*Teal*/
/*Purple*/
pack
const GRAY: I_ColorPack = {
colorName: "gray",
dark: rgb.darkGray,
mid: rgb.midGray,
soft: rgb.softGray,
};
const WHITE: I_ColorPack = {
colorName: "white",
dark: rgb.darkWhite,
mid: rgb.midWhite,
soft: rgb.softWhite,
};
const RED;
const GREEN;
const BLUE;
const ORANGE;
const YELLOW;
const TEAL;
const PURPLE;