Color Utilities
Comprehensive API reference for the `color` utilities in the @plumeria/core package, covering all standard colors, theme colors, and lighten/darken 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.
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 Name | Hex Code | Description |
---|---|---|
aliceblue | #F0F8FF | A pale blue tint, ideal for light backgrounds. |
antiquewhite | #FAEBD7 | A soft, warm white with a hint of peach. |
aqua | #00FFFF | Bright cyan, suitable for vibrant accents. |
aquamarine | #7FFFD4 | A light cyan-green, great for fresh designs. |
azure | #F0FFFF | A very pale cyan, nearly white, for subtle backgrounds. |
beige | #F5F5DC | A warm, neutral color for backgrounds or text. |
bisque | #FFE4C4 | A soft peach color, ideal for warm UI elements. |
black | #000000 | Pure black, often used for text or borders. |
blanchedalmond | #FFEBCD | A creamy beige, suitable for subtle highlights. |
blue | #0000FF | Bright blue, great for links or buttons. |
blueviolet | #8A2BE2 | A rich purple-blue, ideal for creative designs. |
brown | #A52A2A | A deep reddish-brown, suitable for earthy tones. |
burlywood | #DEB887 | A warm tan, great for natural-themed UIs. |
cadetblue | #5F9EA0 | A muted blue-green, ideal for calm designs. |
chartreuse | #7FFF00 | A vivid green-yellow, suitable for highlights. |
chocolate | #D2691E | A rich brown, perfect for warm accents. |
coral | #FF7F50 | A vibrant orange-pink, great for lively designs. |
cornflowerblue | #6495ED | A soft blue, ideal for buttons or backgrounds. |
cornsilk | #FFF8DC | A pale yellow, suitable for light backgrounds. |
crimson | #DC143C | A deep red, great for bold accents or alerts. |
cyan | #00FFFF | Bright cyan, alias for aqua, for vibrant accents. |
darkblue | #00008B | A deep blue, suitable for strong contrasts. |
darkcyan | #008B8B | A deep cyan, great for calm, rich designs. |
darkgoldenrod | #B8860B | A dark golden yellow, ideal for earthy tones. |
darkgray | #A9A9A9 | A medium-dark gray, versatile for UI elements. |
darkgreen | #006400 | A deep green, suitable for natural themes. |
darkgrey | #A9A9A9 | Alias for darkgray, for consistency. |
darkkhaki | #BDB76B | A muted khaki, great for earthy backgrounds. |
darkmagenta | #8B008B | A deep purple, ideal for bold accents. |
darkolivegreen | #556B2F | A dark olive shade, suitable for natural designs. |
darkorange | #FF8C00 | A vibrant orange, great for attention-grabbing elements. |
darkorchid | #9932CC | A rich purple, ideal for creative designs. |
darkred | #8B0000 | A deep red, perfect for error states or accents. |
darksalmon | #E9967A | A muted orange-pink, great for warm designs. |
darkseagreen | #8FBC8F | A soft green, ideal for calm backgrounds. |
darkslateblue | #483D8B | A deep blue-purple, suitable for rich designs. |
darkslategray | #2F4F4F | A dark gray with a blue tint, great for muted UIs. |
darkslategrey | #2F4F4F | Alias for darkslategray, for consistency. |
darkturquoise | #00CED1 | A vibrant cyan, great for fresh accents. |
darkviolet | #9400D3 | A deep purple, ideal for bold creative elements. |
deeppink | #FF1493 | A bright pink, perfect for vibrant highlights. |
deepskyblue | #00BFFF | A bright blue, great for lively buttons or links. |
dimgray | #696969 | A medium-dark gray, versatile for text or borders. |
dimgrey | #696969 | Alias for dimgray, for consistency. |
dodgerblue | #1E90FF | A vibrant blue, ideal for buttons or links. |
firebrick | #B22222 | A deep red-brown, suitable for error states. |
floralwhite | #FFFAF0 | A soft white with a hint of peach, great for backgrounds. |
forestgreen | #228B22 | A rich green, ideal for natural themes. |
fuchsia | #FF00FF | Bright magenta, great for bold accents. |
gainsboro | #DCDCDC | A light gray, suitable for subtle backgrounds. |
ghostwhite | #F8F8FF | A very pale blue-white, ideal for light backgrounds. |
gold | #FFD700 | A bright yellow-gold, great for highlights. |
goldenrod | #DAA520 | A warm golden yellow, ideal for earthy tones. |
gray | #808080 | A neutral gray, versatile for text or backgrounds. |
green | #008000 | A standard green, great for natural themes. |
greenyellow | #ADFF2F | A bright yellow-green, ideal for success states. |
grey | #808080 | Alias for gray, for consistency. |
honeydew | #F0FFF0 | A very pale green, great for subtle backgrounds. |
hotpink | #FF69B4 | A vibrant pink, perfect for lively accents. |
indianred | #CD5C5C | A muted red, suitable for warm designs. |
indigo | #4B0082 | A deep blue-purple, ideal for rich designs. |
ivory | #FFFFF0 | A soft white with a hint of yellow, great for backgrounds. |
khaki | #F0E68C | A light yellow-brown, ideal for earthy tones. |
lavender | #E6E6FA | A pale purple, great for soft backgrounds. |
lavenderblush | #FFF0F5 | A very pale pink, ideal for subtle backgrounds. |
lawngreen | #7CFC00 | A bright green, great for vibrant highlights. |
lemonchiffon | #FFFACD | A pale yellow, suitable for light backgrounds. |
lightblue | #ADD8E6 | A soft blue, ideal for calm designs. |
lightcoral | #F08080 | A muted coral, great for warm accents. |
lightcyan | #E0FFFF | A very pale cyan, ideal for light backgrounds. |
lightgoldenrodyellow | #FAFAD2 | A pale yellow, great for subtle highlights. |
lightgray | #D3D3D3 | A light gray, versatile for backgrounds. |
lightgreen | #90EE90 | A soft green, ideal for fresh designs. |
lightgrey | #D3D3D3 | Alias for lightgray, for consistency. |
lightpink | #FFB6C1 | A soft pink, great for feminine designs. |
lightsalmon | #FFA07A | A light orange-pink, ideal for warm accents. |
lightseagreen | #20B2AA | A vibrant teal, great for fresh designs. |
lightskyblue | #87CEFA | A soft blue, ideal for calm backgrounds. |
lightslategray | #778899 | A medium gray with a blue tint, versatile for UI. |
lightslategrey | #778899 | Alias for lightslategray, for consistency. |
lightsteelblue | #B0C4DE | A soft blue-gray, great for calm designs. |
lightyellow | #FFFFE0 | A pale yellow, suitable for light backgrounds. |
lime | #00FF00 | Bright green, great for vibrant highlights. |
limegreen | #32CD32 | A vivid green, ideal for success states. |
linen | #FAF0E6 | A soft white with a hint of pink, great for backgrounds. |
magenta | #FF00FF | Bright magenta, alias for fuchsia, for bold accents. |
maroon | #800000 | A deep red-brown, suitable for rich designs. |
mediumaquamarine | #66CDAA | A medium cyan-green, great for fresh designs. |
mediumblue | #0000CD | A medium blue, ideal for links or buttons. |
mediumorchid | #BA55D3 | A medium purple, great for creative accents. |
mediumpurple | #9370DB | A soft purple, ideal for calm designs. |
mediumseagreen | #3CB371 | A medium green, great for natural themes. |
mediumslateblue | #7B68EE | A medium blue-purple, ideal for creative UIs. |
mediumspringgreen | #00FA9A | A bright green, great for vibrant highlights. |
mediumturquoise | #48D1CC | A medium cyan, ideal for fresh designs. |
mediumvioletred | #C71585 | A deep pink-purple, great for bold accents. |
midnightblue | #191970 | A very dark blue, ideal for strong contrasts. |
mintcream | #F5FFFA | A very pale green, great for subtle backgrounds. |
mistyrose | #FFE4E1 | A soft pink, ideal for feminine designs. |
moccasin | #FFE4B5 | A warm peach, great for warm backgrounds. |
navajowhite | #FFDEAD | A light peach, suitable for soft backgrounds. |
navy | #000080 | A very dark blue, often used for backgrounds or text. |
oldlace | #FDF5E6 | A pale, creamy white, great for backgrounds. |
olive | #808000 | A muted yellow-green, suitable for earthy themes. |
olivedrab | #6B8E23 | A dark olive green, ideal for natural designs. |
orange | #FFA500 | A bright orange, perfect for attention-grabbing elements. |
orangered | #FF4500 | A strong red-orange, great for bold accents. |
orchid | #DA70D6 | A light purple, ideal for creative designs. |
palegoldenrod | #EEE8AA | A soft yellow, suitable for subtle highlights. |
palegreen | #98FB98 | A light green, great for fresh backgrounds. |
paleturquoise | #AFEEEE | A pale cyan, ideal for calm designs. |
palevioletred | #DB7093 | A soft pink-purple, great for feminine accents. |
papayawhip | #FFEFD5 | A creamy peach, suitable for light backgrounds. |
peachpuff | #FFDAB9 | A soft peach, great for warm backgrounds. |
peru | #CD853F | A medium brown, ideal for earthy themes. |
pink | #FFC0CB | A classic pink, perfect for feminine or playful designs. |
plum | #DDA0DD | A soft purple, suitable for subtle accents. |
powderblue | #B0E0E6 | A light blue, great for calm backgrounds. |
purple | #800080 | A deep purple, ideal for creative themes. |
rebeccapurple | #663399 | A rich purple, named after Rebecca Meyer. |
red | #FF0000 | Pure red, great for alerts or accents. |
rosybrown | #BC8F8F | A muted brown with a pink tint, suitable for soft designs. |
royalblue | #4169E1 | A vivid blue, ideal for buttons or links. |
saddlebrown | #8B4513 | A deep brown, great for natural or rustic themes. |
salmon | #FA8072 | A soft orange-pink, suitable for warm accents. |
sandybrown | #F4A460 | A warm tan, great for earthy backgrounds. |
seagreen | #2E8B57 | A deep green, ideal for natural designs. |
seashell | #FFF5EE | A pale pink-white, perfect for subtle backgrounds. |
sienna | #A0522D | A reddish-brown, suitable for earthy accents. |
silver | #C0C0C0 | A light gray, versatile for backgrounds or text. |
skyblue | #87CEEB | A light blue, great for calm, airy designs. |
slateblue | #6A5ACD | A medium blue-purple, ideal for creative UIs. |
slategray | #708090 | A medium gray with a blue tint, suitable for UI elements. |
slategrey | #708090 | Alias for slategray, for consistency. |
snow | #FFFAFA | A very pale pink-white, ideal for light backgrounds. |
springgreen | #00FF7F | A bright green, perfect for lively highlights. |
steelblue | #4682B4 | A medium blue, great for professional designs. |
tan | #D2B48C | A light brown, suitable for natural backgrounds. |
teal | #008080 | A dark cyan, ideal for modern designs. |
thistle | #D8BFD8 | A soft purple, great for subtle backgrounds. |
tomato | #FF6347 | A vibrant red-orange, suitable for bold accents. |
turquoise | #40E0D0 | A bright cyan-green, perfect for fresh highlights. |
violet | #EE82EE | A light purple, ideal for creative elements. |
wheat | #F5DEB3 | A light tan, great for warm backgrounds. |
white | #FFFFFF | Pure white, commonly used for backgrounds. |
whitesmoke | #F5F5F5 | A very light gray, ideal for subtle backgrounds. |
yellow | #FFFF00 | Bright yellow, perfect for highlights or warnings. |
yellowgreen | #9ACD32 | A 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 Name | Hex Code | Description |
---|---|---|
primary | #0070F3 | A vibrant blue, ideal for primary buttons or links. |
secondary | #FF4081 | A bold pink, suitable for secondary actions or highlights. |
success | #2E7D32 | A rich green, used for success states (e.g., confirmation messages). |
warning | #ED6C02 | A warm orange, perfect for warning messages or alerts. |
error | #D32F2F | A 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.
Function | Description | Arguments | Returns |
---|---|---|---|
lighten(color, proportion) | Lightens a color by mixing with white. | color : A color name or hex codeproportion : 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 codeproportion : A number (0 to 1) or percentage string (e.g., '20%' ) | <color> (hex code) |
Notes
- A
proportion
of0
(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
.