Features

• 🎨 Support for 22 color spaces: RGB, sRGB, Adobe RGB, HEX, HSL, HSV, HSI, HWB, CMYK, LCH, LAB(D50), LAB(D60), XYZ(D50), XYZ(D65), YUV, Oklab, Oklch, HSLuv, HPLuv, CIExyY, and CIELuv
• 🔄 Easy color conversions between all supported formats
• 🌈 Generate color harmonies (complementary, analogous, triadic, tetradic, split-complementary, and more)
• 🛠 Powerful color manipulation tools (adjust lightness, saturation, hue, alpha, and more)
• 🎛 Customizable, unopinionated ColorPicker component
• 💪 Full TypeScript support with type safety
• 🔌 Seamless IDE integration
• 🧠 Color naming and information retrieval
• 🔦 Brightness calculation and light/dark color detection
• 🚀 Optimized for modern web applications

npm i color-core

import { Color } from 'color-core';

// Create a color from different formats
const red = new Color('#ff0000');
const green = new Color({ r: 0, g: 255, b: 0 });
const blue = new Color({ h: 240, s: 100, l: 50 });

// Convert to different formats
console.log(red.toRgb());    // { r: 255, g: 0, b: 0 }
console.log(green.toHsl());  // { h: 120, s: 100, l: 50 }
console.log(blue.toHex());   // '#0000ff'

// Advanced color spaces
console.log(red.toOklab());   // { L: 0.627955, a: 0.224863, b: 0.125846 }
console.log(green.toCIExyY());// { x: 0.3, y: 0.6, Y: 0.715158 }
console.log(blue.toHSLuv()); // { h: 265.87, s: 100, l: 32.3 }

// Color manipulation
const lightRed = red.adjustLightness(20);
console.log(lightRed.toHex()); // '#ff6666'

const desaturatedGreen = green.adjustSaturation(-50);
console.log(desaturatedGreen.toHex()); // '#40bf40'

// Generate harmonies
const [complement] = red.complementary();
console.log(complement.toHex()); // '#00ffff'

const [color1, color2] = blue.splitComplementary();
console.log(color1.toHex(), color2.toHex()); // '#ffaa00' '#ff5500'

// Mix colors
const purple = red.mix(blue, 0.5);
console.log(purple.toHex()); // '#800080'

// Get color information
red.getName().then(name => console.log(name)); // 'Red'
red.getInfo().then(info => console.log(info));
// Returns: { name, hex, rgb, hsl, luminance, requestedHex }

// Check brightness and lightness
console.log(red.getBrightness()); // 76.245
console.log(red.isLight()); // false

import { hexToRgb, rgbToHsl, rgbToOklab } from 'color-core';

const rgb = hexToRgb('#00ff00');
console.log(rgb);  // { r: 0, g: 255, b: 0 }

const hsl = rgbToHsl(rgb);
console.log(hsl);  // { h: 120, s: 100, l: 50 }

const oklab = rgbToOklab(rgb);
console.log(oklab);  // { L: 0.866440, a: -0.233888, b: 0.179498 }

import { ColorPicker } from 'color-core';

function MyComponent() {
  return (
    <ColorPicker
      initialColor={{ r: 255, g: 0, b: 0 }}
      onChange={(color) => console.log('Selected color:', color)}
      width={300}
      height={200}
    />
  );
}

new Color(color: string | RGB | HSL | HSV | CMYK | LAB | LCH | XYZ | YUV | Oklab | Oklch | HSLuv | HPLuv | CIExyY | HSI | HWB | AdobeRGB)

type RGB = { r: number; g: number; b: number; a?: number };
type SRGB = { r: number; g: number; b: number };
type HSL = { h: number; s: number; l: number; a?: number };
type HSV = { h: number; s: number; v: number; a?: number };
type CMYK = { c: number; m: number; y: number; k: number };
type LAB = { l: number; a: number; b: number };
type LCH = { l: number; c: number; h: number };
type XYZ = { x: number; y: number; z: number };
type YUV = { y: number; u: number; v: number };
type Oklab = { L: number; a: number; b: number };
type Oklch = { L: number; C: number; h: number };
type HPLuv = { h: number; p: number; l: number };
type HSLuv = { h: number; s: number; l: number };
type CIExyY = { x: number; y: number; Y: number };
type CIELuv = { L: number; u: number; v: number };
type HSI = { h: number; s: number; i: number };
type HWB = { h: number; w: number; b: number };
type AdobeRGB = { r: number; g: number; b: number };

import { Color } from 'color-core';

const color = new Color('#ff0000');

// Lighten the color
const lighterColor = color.adjustLightness(20);
console.log(lighterColor.toHex()); // '#ff6666'

// Desaturate the color
const desaturatedColor = color.adjustSaturation(-50);
console.log(desaturatedColor.toHex()); // '#bf4040'

// Change the hue
const hueShiftedColor = color.adjustHue(120);
console.log(hueShiftedColor.toHex()); // '#00ff00'

// Invert the color
const invertedColor = color.invert();
console.log(invertedColor.toHex()); // '#00ffff'

// Convert to grayscale
const grayscaleColor = color.grayscale();
console.log(grayscaleColor.toHex()); // '#4d4d4d'

// Mix with another color
const mixedColor = color.mix(new Color('#0000ff'), 0.5);
console.log(mixedColor.toHex()); // '#800080'

// Get color name
color.getName().then(name => console.log(name)); // 'Red'

// Get color information
color.getInfo().then(info => console.log(info));
// Returns: { name, hex, rgb, hsl, luminance, requestedHex }

// Check brightness and if the color is light
console.log(color.getBrightness()); // 76.245
console.log(color.isLight()); // false

import { Color } from 'color-core';

// Create a color in Oklab space
const oklabColor = new Color({ L: 0.627955, a: 0.224863, b: 0.125846 });
console.log(oklabColor.toHex()); // '#ff0000'

// Convert to CIE xyY
const xyYColor = oklabColor.toCIExyY();
console.log(xyYColor); // { x: 0.64, y: 0.33, Y: 0.2126 }

// Create a color in HSLuv space
const hsluvColor = new Color({ h: 12.177, s: 100, l: 53.237 });
console.log(hsluvColor.toRgb()); // { r: 255, g: 0, b: 0 }

// Convert to Adobe RGB
const adobeRGBColor = hsluvColor.toAdobeRGB();
console.log(adobeRGBColor); // { r: 255, g: 0, b: 0 }

import { Color } from 'color-core';

const baseColor = new Color('#ff0000');

// Generate complementary color
const [complement] = baseColor.complementary();
console.log(complement.toHex()); // '#00ffff'

// Generate analogous colors
const [analog1, analog2] = baseColor.analogous();
console.log(analog1.toHex(), analog2.toHex()); // '#ff8000' '#ff0080'

// Generate triadic colors
const [triad1, triad2] = baseColor.triadic();
console.log(triad1.toHex(), triad2.toHex()); // '#00ff00' '#0000ff'

// Generate tetradic colors
const [tetra1, tetra2, tetra3] = baseColor.tetradic();
console.log(tetra1.toHex(), tetra2.toHex(), tetra3.toHex()); // '#80ff00' '#00ffff' '#8000ff'

// Generate split-complementary colors
const [split1, split2] = baseColor.splitComplementary();
console.log(split1.toHex(), split2.toHex()); // '#00ff80' '#0080ff'

// Generate shades
const shades = baseColor.shades(5);
shades.forEach(shade => console.log(shade.toHex()));
// '#ff0000' '#cc0000' '#990000' '#660000' '#330000'

// Generate tints
const tints = baseColor.tints(5);
tints.forEach(tint => console.log(tint.toHex()));
// '#ff0000' '#ff3333' '#ff6666' '#ff9999' '#ffcccc'

id: changelog title: Changelog sidebar_label: Changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

TODO

• more parsers for CSS color strings

[1.4.0] - 2024-07-25

Added

• New accessibility features:
  • getRelativeLuminance: Calculate the relative luminance of a color
  • getContrastRatio: Calculate the contrast ratio between two colors
  • getWCAGCompliance: Determine WCAG compliance level for color contrast
• New methods in Color class: getRelativeLuminance(), getContrastRatio(), getWCAGCompliance()
• Partial implementation of parsers for CSS color strings. More coming soon.

Changed

• Clarified behavior of rgbToHex function for alpha values:
  • Alpha values of 0.995 and above now consistently produce 'ff'
  • Other alpha values are rounded to the nearest integer
• Updated documentation with new accessibility features and examples.
• Improved test coverage for new accessibility features.

Attention

• Deprecated the color picker component in favor of a new color picker package to be released soon.
• Removed dependencies for React & React DOM since those are no longer needed.

Fixed

• #22

[1.3.3] - 2024-07-21

Added

• New color scale functions:
  • Sequential Scale
  • Diverging Scale
  • Multi-Hue Sequential Scale
  • Perceptually Uniform Scale
  • Qualitative Scale

Changed

• New git structure using a monorepo setup with yarn workspaces
• New documentation site built with Docusaurus v3 + typedoc
• Updated demo site to showcase new color scale functions

[1.3.1] - 2024-07-17

Changed

• Updated SRGB type definitions to include prefix to avoid conflicts with other color spaces

[1.3.0] - 2024-07-17

BIG UPDATE 🎉

Added

• <input checked="" disabled="" type="checkbox"> Support for AdobeRGB, Oklab, Oklch, HSLuv, HPLuv, CIExyY, CIELuv, HWB, sRGB, and HSI color spaces
• <input checked="" disabled="" type="checkbox"> Support for converting between D50 and D65 white points for XYZ and Lab color spaces
• <input checked="" disabled="" type="checkbox"> New conversion functions:
  • rgbToOklab(), oklabToRgb()
  • rgbToOklch(), oklchToRgb()
  • rgbToHSLuv(), hsluvToRgb()
  • rgbToHPLuv(), hpluvToRgb()
  • rgbToCIExyY(), ciexyYToRgb()
  • rgbToCIELuv(), cieLuvToRgb()
  • rgbToHwb(), hwbToRgb()
  • rgbToHsi(), hsiToRgb()
  • rgbToSrgb(), srgbToRgb()
  • adobeRGBToRGB(), rgbToAdobeRGB()
  • xyzD50ToD65(), xyzD65ToD50()
  • xyzD50ToRgb(), rgbToXyzD50()
  • labD50ToRgb(), rgbToLabD50()
• <input checked="" disabled="" type="checkbox"> New methods in Color class: toOklab(), toOklch(), toHSLuv(), toHPLuv(), toCIExyY(), toCIELuv(), toHWB(), toHSI(), toSrgb(), toAdobeRGB()
• <input checked="" disabled="" type="checkbox"> Updated demo site to showcase new color spaces and conversions

Changed

• NAME CHANGE! 'next-color' is now 'color-core'
• New Demo Site! Built with next-ui :artist:
• Updated type definitions to include Oklab, Oklch, HSLuv, HPLuv, CIExyY, and CIELUV
• Expanded test coverage for new color spaces, refactored tests to be less dumb.
• New calculations for LCH color space to improve accuracy
• New calculations for XYZ and LAB color spaces to account for white point differences

Documentation

[1.2.0] - 2024-07-07

Added

• Color naming functionality: getColorName() method to get the closest named color from api.color.pizza based on the provided color
• Brightness calculation:
  • getBrightness() method to calculate perceived brightness
  • isLight() method to determine if a color is light or dark

Changed

• Improved performance of color conversion functions
• Refactored color manipulation methods for better readability and maintainability
• Updated demo site with new features and examples
• Improved error handling and type safety
• Improved documentation with more examples and explanations
• Enhanced test coverage
• Added CI/CD pipeline for automated testing and deployment

Fixed

• Edge case in mix() function where alpha values were not being considered correctly
• Precision loss in successive color space conversions
• Addressed potential "Maximum update depth exceeded" error during rapid color picker interactions
• Improved performance of ColorPicker component for better performance during rapid color changes

[1.1.0] - 2024-07-07

Fixed

• removed test files from npm package - woops!

[1.1.0] - 2024-07-07

Added

• SO many tests! 🎉

Changed

• Improved performance of RGB to HSL conversion
• Other minor conversion optimizations
• Enhanced type safety for all color manipulation functions
• Updated demo site with new features and examples

Fixed

• Edge case in mix() function where alpha values were not being considered correctly
• Precision loss in successive color space conversions

Deprecated

• Compound color harmony function in favor of Split-Complementary

Security

• Updated dependencies to address potential vulnerabilities

Documentation

• Added examples for all new features in README.md
• Improved API documentation with more detailed explanations and use cases + a new fancy theme

[1.0.1] - 2024-07-05

Changed

• Optimized ColorPicker component for better performance during rapid color changes.
• Implemented debouncing for color updates to reduce unnecessary re-renders.

Added

• useCallback implementation in ColorPicker for improved render efficiency.
• New hueSliderHeight prop in ColorPicker for customizable hue slider height.

Fixed

• Addressed potential "Maximum update depth exceeded" error during rapid color picker interactions.

[1.0.0] - 2024-07-04

Added

• New Color Picker functionality
• Unified Color class for easy color manipulations
• Additional color harmony functions:
  • Compound
  • Double Split-Complementary
  • Shades
  • Square
  • Tints
  • Tones
• New color manipulation methods:
  • adjustLightness
  • adjustSaturation
  • adjustHue
  • adjustAlpha
  • invert
  • grayscale
  • mix
• Support for XYZ and YUV color spaces
• Improved type safety and error handling

Changed

• Upgraded from version 0.2.0 to 1.0.0
• Refactored and optimized existing color conversion and harmony functions
• Enhanced documentation and examples in README.md

Fixed

• Various bug fixes and performance improvements

0.2.0 - 2024-07-03

Added

• New color harmony functions:
  • Square
  • Double Split-Complementary
  • Compound (Accented Analog)
  • Shades
  • Tints
  • Tones
• Extended Color class with new harmony methods

Changed

• /

Fixed

• /

[0.1.2] - 2024-07-02

Added

• Color harmony functions:
  • Complementary
  • Analogous
  • Triadic
  • Tetradic (Rectangle)
  • Split-Complementary
  • Monochromatic
• Unified Color class for easy color manipulations
• Demo site showcasing color conversions and harmonies

Changed

• Improved TypeScript typings for better developer experience
• Enhanced error handling for invalid color inputs

Fixed

• Edge cases in color conversion algorithms

0.1.0 - 2024-07-01

Added

• Initial release of the color-core library
• Color conversion functions:
  • RGB to/from HEX
  • RGB to/from HSL
  • RGB to/from HSV
  • RGB to/from CMYK
  • RGB to/from LAB
  • RGB to/from LCH
• Basic TypeScript support with type definitions
• Basic error handling for invalid inputs
• Test suite for verifying color conversions