Color Utilities

Overview

React Beautiful Color provides a comprehensive set of utility functions for color conversion and manipulation. These utilities are available for public use and can help you work with colors in your applications.

Color Conversion

Hex Conversions

import { hexToRgb } from 'react-beautiful-color';

const rgb = hexToRgb('#ff6b9d');
// { r: 255, g: 107, b: 157 }

import { hexToHsv } from 'react-beautiful-color';

const hsv = hexToHsv('#ff6b9d');
// { h: 334, s: 58, v: 100 }

import { hexToHsl } from 'react-beautiful-color';

const hsl = hexToHsl('#ff6b9d');
// { h: 334, s: 100, l: 71 }

RGB Conversions

import { rgbToHex } from 'react-beautiful-color';

const hex = rgbToHex({ r: 255, g: 107, b: 157 });
// "#ff6b9d"

import { rgbToHsv } from 'react-beautiful-color';

const hsv = rgbToHsv({ r: 255, g: 107, b: 157 });
// { h: 334, s: 58, v: 100 }

import { rgbToHsl } from 'react-beautiful-color';

const hsl = rgbToHsl({ r: 255, g: 107, b: 157 });
// { h: 334, s: 100, l: 71 }

HSV Conversions

import { hsvToRgb } from 'react-beautiful-color';

const rgb = hsvToRgb({ h: 334, s: 58, v: 100 });
// { r: 255, g: 107, b: 157 }

import { hsvToHex } from 'react-beautiful-color';

const hex = hsvToHex({ h: 334, s: 58, v: 100 });
// "#ff6b9d"

import { hsvToHsl } from 'react-beautiful-color';

const hsl = hsvToHsl({ h: 334, s: 58, v: 100 });
// { h: 334, s: 100, l: 71 }

HSL Conversions

import { hslToRgb } from 'react-beautiful-color';

const rgb = hslToRgb({ h: 334, s: 100, l: 71 });
// { r: 255, g: 107, b: 157 }

import { hslToHex } from 'react-beautiful-color';

const hex = hslToHex({ h: 334, s: 100, l: 71 });
// "#ff6b9d"

import { hslToHsv } from 'react-beautiful-color';

const hsv = hslToHsv({ h: 334, s: 100, l: 71 });
// { h: 334, s: 58, v: 100 }

Utility Functions

getContrastColor

Returns the best contrast color (black or white) for accessibility.

import { getContrastColor } from 'react-beautiful-color';

const textColor = getContrastColor('#ff6b9d');
// "#000000" (black for light backgrounds)

const textColor2 = getContrastColor('#1a1a1a');
// "#ffffff" (white for dark backgrounds)

randomHex

Generates a random hex color.

import { randomHex } from 'react-beautiful-color';

const color = randomHex();
// "#a1b2c3" (random hex color)

formatColorString

Formats a ColorState object into a CSS color string.

import { formatColorString, useColorState } from 'react-beautiful-color';

const [{ colorState }] = useColorState({ type: 'hex', value: '#ff6b9d' });

const hex = formatColorString(colorState, 'hex'); // "#ff6b9d"
const rgb = formatColorString(colorState, 'rgb'); // "rgb(255, 107, 157)"
const rgba = formatColorString(colorState, 'rgba'); // "rgba(255, 107, 157, 1)"
const hsl = formatColorString(colorState, 'hsl'); // "hsl(334, 100%, 71%)"
const hsla = formatColorString(colorState, 'hsla'); // "hsla(334, 100%, 71%, 1)"

Color Class

The Color class provides an object-oriented interface for working with colors. It encapsulates color data and provides methods for conversion and formatting.

Creating an Instance

import { Color } from 'react-beautiful-color';

// Create from hex
const color = new Color({ type: 'hex', value: '#ff6b9d' });

// Create from RGB
const color2 = new Color({ type: 'rgb', r: 255, g: 107, b: 157 });

// Create from HSL
const color3 = new Color({ type: 'hsl', h: 334, s: 100, l: 71 });

// Create from HSV
const color4 = new Color({ type: 'hsv', h: 334, s: 58, v: 100 });

Color Conversion

Returns the RGB representation of the color.

const color = new Color({ type: 'hex', value: '#ff6b9d' });
const rgb = color.getRgb();
// { r: 255, g: 107, b: 157 }

Returns the HSV representation of the color.

const hsv = color.getHsv();
// { h: 334, s: 58, v: 100 }

Returns the HSL representation of the color.

const hsl = color.getHsl();
// { h: 334, s: 100, l: 71 }

Returns the hex representation of the color.

const hex = color.getHex();
// "#ff6b9d"

Returns the RGBA representation of the color.

const rgba = color.getRgba();
// { r: 255, g: 107, b: 157, a: 1 }

Returns the HSLA representation of the color.

const hsla = color.getHsla();
// { h: 334, s: 100, l: 71, a: 1 }

Returns the HSVA representation of the color.

const hsva = color.getHsva();
// { h: 334, s: 58, v: 100, a: 1 }

Formatting Methods

format()

Formats the color as a CSS color string. Supports all formats except HSV/HSVA.

const color = new Color({ type: 'hex', value: '#ff6b9d' });

const hex = color.format('hex'); // "#ff6b9d"
const rgb = color.format('rgb'); // "rgb(255, 107, 157)"
const rgba = color.format('rgba'); // "rgba(255, 107, 157, 1)"
const hsl = color.format('hsl'); // "hsl(334, 100%, 71%)"
const hsla = color.format('hsla'); // "hsla(334, 100%, 71%, 1)"

// Default format is hex
const defaultFormat = color.format(); // "#ff6b9d"

getContrastingColor()

Returns a new Color instance with the best contrast color (black or white) for accessibility.

const color = new Color({ type: 'hex', value: '#ff6b9d' });
const contrastColor = color.getContrastingColor();
const contrastHex = contrastColor.getHex(); // "#000000" (black for light backgrounds)

const darkColor = new Color({ type: 'hex', value: '#1a1a1a' });
const darkContrast = darkColor.getContrastingColor();
const darkContrastHex = darkContrast.getHex(); // "#ffffff" (white for dark backgrounds)

Complete Example

import { Color } from 'react-beautiful-color';

// Create a color instance
const color = new Color({ type: 'hex', value: '#ff6b9d' });

// Convert to different formats
const rgb = color.getRgb(); // { r: 255, g: 107, b: 157 }
const hsv = color.getHsv(); // { h: 334, s: 58, v: 100 }
const hsl = color.getHsl(); // { h: 334, s: 100, l: 71 }

// Format as CSS strings
const hexString = color.format('hex'); // "#ff6b9d"
const rgbString = color.format('rgb'); // "rgb(255, 107, 157)"
const hslString = color.format('hsl'); // "hsl(334, 100%, 71%)"

// Get contrasting color for accessibility
const contrastColor = color.getContrastingColor();
const contrastHex = contrastColor.getHex(); // "#000000"

On this page