what-color-is-it

Features

• 🎨 Convert between HEX, RGB, HSL, and HSV color formats
• 🏷️ Support for 100+ color labels with standard color values
• ✅ Type-safe with full TypeScript support
• 🛡️ Robust error handling and validation
• 🪶 Lightweight with minimal dependencies
• 📦 ESM and CommonJS support

Installation

# Using npm
npm install what-color-is-it

# Using yarn
yarn add what-color-is-it

# Using pnpm
pnpm add what-color-is-it

Usage

Basic Import

// ESM
import {
  convertHexToRGB,
  convertRGBToHex,
  convertLabelToHEX,
} from "what-color-is-it";

// CommonJS
const {
  convertHexToRGB,
  convertRGBToHex,
  convertLabelToHEX,
} = require("what-color-is-it");

Converting Colors

HEX Conversions

// Convert HEX to RGB
convertHexToRGB("#FF5733"); // Returns: "rgb(255, 87, 51)"

// Convert HEX to HSL
convertHexToHSL("#FF5733"); // Returns: "hsl(14, 100%, 60%)"

// Convert HEX to HSV
convertHexToHSV("#FF5733"); // Returns: "hsv(14, 80%, 100%)"

RGB Conversions

// Convert RGB to HEX
convertRGBToHex("rgb(255, 87, 51)"); // Returns: "#FF5733"
convertRGBToHex("255, 87, 51"); // Also works with this format

// Convert RGB to HSL
convertRGBToHSL("rgb(255, 87, 51)"); // Returns: "hsl(14, 100%, 60%)"

// Convert RGB to HSV
convertRGBToHSV("rgb(255, 87, 51)"); // Returns: "hsv(14, 80%, 100%)"

HSL Conversions

// Convert HSL to HEX
convertHSLToHex("hsl(14, 100%, 60%)"); // Returns: "#FF5733"
convertHSLToHex("14, 100%, 60%"); // Also works with this format

// Convert HSL to RGB
convertHSLToRGB("hsl(14, 100%, 60%)"); // Returns: "rgb(255, 87, 51)"

// Convert HSL to HSV
convertHSLToHSV("hsl(14, 100%, 60%)"); // Returns: "hsv(14, 80%, 100%)"

HSV Conversions

// Convert HSV to HEX
convertHSVToHex("hsv(14, 80%, 100%)"); // Returns: "#FF5733"
convertHSVToHex("14, 80%, 100%"); // Also works with this format

// Convert HSV to RGB
convertHSVToRGB("hsv(14, 80%, 100%)"); // Returns: "rgb(255, 87, 51)"

// Convert HSV to HSL
convertHSVToHSL("hsv(14, 80%, 100%)"); // Returns: "hsl(14, 100%, 60%)"

Using Color Labels

Convert from any of the 100+ built-in color labels to different formats:

// Convert color label to HEX
convertLabelToHEX("red"); // Returns: "#FF0000"
convertLabelToHEX("turquoise"); // Returns: "#40E0D0"

// Convert color label to RGB
convertLabelToRGB("forest green"); // Returns: "rgb(34, 139, 34)"

// Convert color label to HSL
convertLabelToHSL("lavender"); // Returns: "hsl(240, 67%, 94%)"

// Convert color label to HSV
convertLabelToHSV("gold"); // Returns: "hsv(51, 100%, 84%)"

TypeScript Support

The library includes full TypeScript support with type definitions for all functions and a comprehensive ColorLabel type for named colors:

import { ColorLabel } from "what-color-is-it";

// ColorLabel is a union type of all supported color names
function useColor(color: ColorLabel) {
  // Type-safe color handling
}

useColor("emerald"); // Valid
useColor("not-a-color"); // TypeScript error

Error Handling

All conversion functions include robust error handling:

// Invalid HEX format
convertHexToRGB("not-a-hex-color");
// Returns: "Invalid hex color. Make sure to include the # symbol"

// Invalid RGB values
convertRGBToHex("rgb(300, 0, 0)");
// Returns: "Invalid RGB values. Each component must be 0-255"

License

MIT © ezzeldin