Plumeria logo/ ✾ Plumeria
API reference

Color Utilities

The color utilities in the @plumeria/core package provides a comprehensive set of tools for applying colors in your styles. It includes a complete collection of 141 CSS named colors, framework-specific theme colors, and utilities to lighten or darken colors programmatically. This reference details all available colors and utilities, with examples to demonstrate their usage.

Overview

The color utilities simplifies color management in your styles by providing:

  • Standard Colors: A complete set of 141 CSS named colors with autocomplete support.
  • Theme Colors: Predefined colors for common UI states (e.g., primary, success).
  • Lighten/Darken Utilities: Functions to adjust color brightness dynamically.

These utilities integrate seamlessly with @plumeria/core and can be combined with other utilities like pseudo for dynamic and responsive styling.

export const color = {
  ...colors, // Standard named colors
  ...themeColors, // Framework-specific colors
  lighten, // Lighten a color by a specified proportion
  darken, // Darken a color by a specified proportion
};

Standard Colors

The colors object provides a complete set of 141 CSS named colors, supporting autocomplete in modern IDEs. Below is a curated list of commonly used colors, with the full list available in the expandable section.

Color NameHex CodeDescription
aliceblue #F0F8FFA pale blue tint, ideal for light backgrounds.
antiquewhite #FAEBD7A soft, warm white with a hint of peach.
aqua #00FFFFBright cyan, suitable for vibrant accents.
aquamarine #7FFFD4A light cyan-green, great for fresh designs.
azure #F0FFFFA very pale cyan, nearly white, for subtle backgrounds.
beige #F5F5DCA warm, neutral color for backgrounds or text.
bisque #FFE4C4A soft peach color, ideal for warm UI elements.
black #000000Pure black, often used for text or borders.
blanchedalmond #FFEBCDA creamy beige, suitable for subtle highlights.
blue #0000FFBright blue, great for links or buttons.
blueviolet #8A2BE2A rich purple-blue, ideal for creative designs.
brown #A52A2AA deep reddish-brown, suitable for earthy tones.
burlywood #DEB887A warm tan, great for natural-themed UIs.
cadetblue #5F9EA0A muted blue-green, ideal for calm designs.
chartreuse #7FFF00A vivid green-yellow, suitable for highlights.
chocolate #D2691EA rich brown, perfect for warm accents.
coral #FF7F50A vibrant orange-pink, great for lively designs.
cornflowerblue #6495EDA soft blue, ideal for buttons or backgrounds.
cornsilk #FFF8DCA pale yellow, suitable for light backgrounds.
crimson #DC143CA deep red, great for bold accents or alerts.
cyan #00FFFFBright cyan, alias for aqua, for vibrant accents.
darkblue #00008BA deep blue, suitable for strong contrasts.
darkcyan #008B8BA deep cyan, great for calm, rich designs.
darkgoldenrod #B8860BA dark golden yellow, ideal for earthy tones.
darkgray #A9A9A9A medium-dark gray, versatile for UI elements.
darkgreen #006400A deep green, suitable for natural themes.
darkgrey #A9A9A9Alias for darkgray, for consistency.
darkkhaki #BDB76BA muted khaki, great for earthy backgrounds.
darkmagenta #8B008BA deep purple, ideal for bold accents.
darkolivegreen #556B2FA dark olive shade, suitable for natural designs.
darkorange #FF8C00A vibrant orange, great for attention-grabbing elements.
darkorchid #9932CCA rich purple, ideal for creative designs.
darkred #8B0000A deep red, perfect for error states or accents.
darksalmon #E9967AA muted orange-pink, great for warm designs.
darkseagreen #8FBC8FA soft green, ideal for calm backgrounds.
darkslateblue #483D8BA deep blue-purple, suitable for rich designs.
darkslategray #2F4F4FA dark gray with a blue tint, great for muted UIs.
darkslategrey #2F4F4FAlias for darkslategray, for consistency.
darkturquoise #00CED1A vibrant cyan, great for fresh accents.
darkviolet #9400D3A deep purple, ideal for bold creative elements.
deeppink #FF1493A bright pink, perfect for vibrant highlights.
deepskyblue #00BFFFA bright blue, great for lively buttons or links.
dimgray #696969A medium-dark gray, versatile for text or borders.
dimgrey #696969Alias for dimgray, for consistency.
dodgerblue #1E90FFA vibrant blue, ideal for buttons or links.
firebrick #B22222A deep red-brown, suitable for error states.
floralwhite #FFFAF0A soft white with a hint of peach, great for backgrounds.
forestgreen #228B22A rich green, ideal for natural themes.
fuchsia #FF00FFBright magenta, great for bold accents.
gainsboro #DCDCDCA light gray, suitable for subtle backgrounds.
ghostwhite #F8F8FFA very pale blue-white, ideal for light backgrounds.
gold #FFD700A bright yellow-gold, great for highlights.
goldenrod #DAA520A warm golden yellow, ideal for earthy tones.
gray #808080A neutral gray, versatile for text or backgrounds.
green #008000A standard green, great for natural themes.
greenyellow #ADFF2FA bright yellow-green, ideal for success states.
grey #808080Alias for gray, for consistency.
honeydew #F0FFF0A very pale green, great for subtle backgrounds.
hotpink #FF69B4A vibrant pink, perfect for lively accents.
indianred #CD5C5CA muted red, suitable for warm designs.
indigo #4B0082A deep blue-purple, ideal for rich designs.
ivory #FFFFF0A soft white with a hint of yellow, great for backgrounds.
khaki #F0E68CA light yellow-brown, ideal for earthy tones.
lavender #E6E6FAA pale purple, great for soft backgrounds.
lavenderblush #FFF0F5A very pale pink, ideal for subtle backgrounds.
lawngreen #7CFC00A bright green, great for vibrant highlights.
lemonchiffon #FFFACDA pale yellow, suitable for light backgrounds.
lightblue #ADD8E6A soft blue, ideal for calm designs.
lightcoral #F08080A muted coral, great for warm accents.
lightcyan #E0FFFFA very pale cyan, ideal for light backgrounds.
lightgoldenrodyellow #FAFAD2A pale yellow, great for subtle highlights.
lightgray #D3D3D3A light gray, versatile for backgrounds.
lightgreen #90EE90A soft green, ideal for fresh designs.
lightgrey #D3D3D3Alias for lightgray, for consistency.
lightpink #FFB6C1A soft pink, great for feminine designs.
lightsalmon #FFA07AA light orange-pink, ideal for warm accents.
lightseagreen #20B2AAA vibrant teal, great for fresh designs.
lightskyblue #87CEFAA soft blue, ideal for calm backgrounds.
lightslategray #778899A medium gray with a blue tint, versatile for UI.
lightslategrey #778899Alias for lightslategray, for consistency.
lightsteelblue #B0C4DEA soft blue-gray, great for calm designs.
lightyellow #FFFFE0A pale yellow, suitable for light backgrounds.
lime #00FF00Bright green, great for vibrant highlights.
limegreen #32CD32A vivid green, ideal for success states.
linen #FAF0E6A soft white with a hint of pink, great for backgrounds.
magenta #FF00FFBright magenta, alias for fuchsia, for bold accents.
maroon #800000A deep red-brown, suitable for rich designs.
mediumaquamarine #66CDAAA medium cyan-green, great for fresh designs.
mediumblue #0000CDA medium blue, ideal for links or buttons.
mediumorchid #BA55D3A medium purple, great for creative accents.
mediumpurple #9370DBA soft purple, ideal for calm designs.
mediumseagreen #3CB371A medium green, great for natural themes.
mediumslateblue #7B68EEA medium blue-purple, ideal for creative UIs.
mediumspringgreen #00FA9AA bright green, great for vibrant highlights.
mediumturquoise #48D1CCA medium cyan, ideal for fresh designs.
mediumvioletred #C71585A deep pink-purple, great for bold accents.
midnightblue #191970A very dark blue, ideal for strong contrasts.
mintcream #F5FFFAA very pale green, great for subtle backgrounds.
mistyrose #FFE4E1A soft pink, ideal for feminine designs.
moccasin #FFE4B5A warm peach, great for warm backgrounds.
navajowhite #FFDEADA light peach, suitable for soft backgrounds.
navy #000080A very dark blue, often used for backgrounds or text.
oldlace #FDF5E6A pale, creamy white, great for backgrounds.
olive #808000A muted yellow-green, suitable for earthy themes.
olivedrab #6B8E23A dark olive green, ideal for natural designs.
orange #FFA500A bright orange, perfect for attention-grabbing elements.
orangered #FF4500A strong red-orange, great for bold accents.
orchid #DA70D6A light purple, ideal for creative designs.
palegoldenrod #EEE8AAA soft yellow, suitable for subtle highlights.
palegreen #98FB98A light green, great for fresh backgrounds.
paleturquoise #AFEEEEA pale cyan, ideal for calm designs.
palevioletred #DB7093A soft pink-purple, great for feminine accents.
papayawhip #FFEFD5A creamy peach, suitable for light backgrounds.
peachpuff #FFDAB9A soft peach, great for warm backgrounds.
peru #CD853FA medium brown, ideal for earthy themes.
pink #FFC0CBA classic pink, perfect for feminine or playful designs.
plum #DDA0DDA soft purple, suitable for subtle accents.
powderblue #B0E0E6A light blue, great for calm backgrounds.
purple #800080A deep purple, ideal for creative themes.
rebeccapurple #663399A rich purple, named after Rebecca Meyer.
red #FF0000Pure red, great for alerts or accents.
rosybrown #BC8F8FA muted brown with a pink tint, suitable for soft designs.
royalblue #4169E1A vivid blue, ideal for buttons or links.
saddlebrown #8B4513A deep brown, great for natural or rustic themes.
salmon #FA8072A soft orange-pink, suitable for warm accents.
sandybrown #F4A460A warm tan, great for earthy backgrounds.
seagreen #2E8B57A deep green, ideal for natural designs.
seashell #FFF5EEA pale pink-white, perfect for subtle backgrounds.
sienna #A0522DA reddish-brown, suitable for earthy accents.
silver #C0C0C0A light gray, versatile for backgrounds or text.
skyblue #87CEEBA light blue, great for calm, airy designs.
slateblue #6A5ACDA medium blue-purple, ideal for creative UIs.
slategray #708090A medium gray with a blue tint, suitable for UI elements.
slategrey #708090Alias for slategray, for consistency.
snow #FFFAFAA very pale pink-white, ideal for light backgrounds.
springgreen #00FF7FA bright green, perfect for lively highlights.
steelblue #4682B4A medium blue, great for professional designs.
tan #D2B48CA light brown, suitable for natural backgrounds.
teal #008080A dark cyan, ideal for modern designs.
thistle #D8BFD8A soft purple, great for subtle backgrounds.
tomato #FF6347A vibrant red-orange, suitable for bold accents.
turquoise #40E0D0A bright cyan-green, perfect for fresh highlights.
violet #EE82EEA light purple, ideal for creative elements.
wheat #F5DEB3A light tan, great for warm backgrounds.
white #FFFFFFPure white, commonly used for backgrounds.
whitesmoke #F5F5F5A very light gray, ideal for subtle backgrounds.
yellow #FFFF00Bright yellow, perfect for highlights or warnings.
yellowgreen #9ACD32A medium yellow-green, great for fresh accents.

Theme Colors

The themeColors object provides a set of predefined colors tailored for common UI states, such as buttons, alerts, or notifications. These colors are designed to align with modern framework conventions.

Color NameHex CodeDescription
primary #0070F3A vibrant blue, ideal for primary buttons or links.
secondary #FF4081A bold pink, suitable for secondary actions or highlights.
success #2E7D32A rich green, used for success states (e.g., confirmation messages).
warning #ED6C02A warm orange, perfect for warning messages or alerts.
error #D32F2FA deep red, ideal for error states or validation messages.

Lighten and Darken Utilities

The lighten and darken utilities adjust a color's brightness by mixing it with white or black based on a proportion (0 to 1 or a percentage string like '20%'). Ideal for hover effects, focus states, or dynamic color variations.

FunctionDescriptionArgumentsReturns
lighten(color, proportion)Lightens a color by mixing with white.color: A color name or hex code
proportion: A number (0 to 1) or percentage string (e.g., '20%')
<color> (hex code)
darken(color, proportion)Darkens a color by mixing with black.color: A color name or hex code
proportion: A number (0 to 1) or percentage string (e.g., '20%')
<color> (hex code)

Notes

  • A proportion of 0 (or '0%') leaves the color unchanged; 1 (or '100%') results in pure white (lighten) or black (darken).
  • Works with named colors (e.g., navy) and hex codes (e.g., #000080).

Usage Examples

Below are practical examples demonstrating how to use the color utilities with @plumeria/core.

Example 1: Using Standard Colors

import { css } from '@plumeria/core';
 
const styles = css.create({
  background: {
    backgroundColor: css.color.wheat, // Warm beige background
    color: css.color.black, // Black text for contrast
  },
  highlight: {
    backgroundColor: css.color.crimson, // Deep red for alerts
  },
});

Example 2: Using Theme Colors

import { css } from '@plumeria/core';
 
const buttonStyles = css.create({
  primaryButton: {
    backgroundColor: css.color.primary, // Vibrant blue for primary buttons
    color: css.color.white,
    padding: '10px 20px',
  },
  errorMessage: {
    backgroundColor: css.color.error, // Red for error alerts
    color: css.color.white,
    borderRadius: '4px',
  },
});

Example 3: Using Lighten and Darken

import { css } from '@plumeria/core';
 
const styles = css.create({
  button: {
    backgroundColor: css.color.primary, // #0070F3
    color: css.color.white,
    [css.pseudo.hover]: {
      backgroundColor: css.color.lighten('primary', 0.2), // Lighter blue on hover
    },
    [css.pseudo.active]: {
      backgroundColor: css.color.darken('primary', 0.2), // Darker blue on click
    },
  },
});

Example 4: Combining Colors with Pseudo-Classes

import { css } from '@plumeria/core';
 
const styles = css.create({
  alert: {
    backgroundColor: css.color.warning, // Orange for warnings
    color: css.color.white,
    padding: '10px',
    [css.pseudo.hover]: {
      backgroundColor: css.color.lighten('warning', 0.3), // Lighter orange on hover
    },
  },
});

On this page

;