Color Adjustment - Instructions
Overview
Color Adjustment provides color format conversion, manipulation, and generation utilities. It accepts colors in multiple formats (hex, RGB, HSL, named colors) with automatic format detection, and performs conversions, adjustments, and palette generation.
Accepted Color Formats
The color parameter accepts any of the following formats -- the parser auto-detects:
- Hex:
#3498dbor3498db(with or without #, 3 or 6 digits) - RGB function:
rgb(52, 152, 219) - HSL function:
hsl(204, 70, 53) - Comma-separated RGB:
52,152,219 - Named color:
red,forestgreen,dodgerblue, etc. (all standard CSS/HTML color names)
Actions
Conversions
color-hex-to-rgb
Convert any supported color format to RGB values.
- Required:
color-- the color to convert - Optional: none
Example:
{ "action": "color-hex-to-rgb", "color": "#3498db" }
color-rgb-to-hex
Convert any supported color format to hex.
- Required:
color-- the color to convert (e.g.,rgb(52, 152, 219)or52,152,219) - Optional: none
Example:
{ "action": "color-rgb-to-hex", "color": "rgb(255, 0, 0)" }
color-hex-to-hsl
Convert any supported color format to HSL values.
- Required:
color-- the color to convert - Optional: none
Example:
{ "action": "color-hex-to-hsl", "color": "#0000FF" }
color-hsl-to-hex
Convert HSL color to hex.
- Required:
color-- the color in HSL or any supported format - Optional: none
Example:
{ "action": "color-hsl-to-hex", "color": "hsl(204, 70, 53)" }
color-rgb-to-hsl
Convert RGB color to HSL.
- Required:
color-- the color to convert - Optional: none
Example:
{ "action": "color-rgb-to-hsl", "color": "rgb(255, 255, 0)" }
color-hsl-to-rgb
Convert HSL color to RGB.
- Required:
color-- the color to convert - Optional: none
Example:
{ "action": "color-hsl-to-rgb", "color": "hsl(120, 100, 50)" }
color-name-to-hex
Convert a CSS/HTML color name to hex, RGB, and HSL values.
- Required:
color-- the named color (e.g.,coral,steelblue,tomato) - Optional: none
Example:
{ "action": "color-name-to-hex", "color": "forestgreen" }
Manipulations
color-complement
Get the complementary color (opposite on the color wheel, 180-degree hue rotation).
- Required:
color-- the base color - Optional: none
Example:
{ "action": "color-complement", "color": "#FF0000" }
color-darken
Darken a color by reducing its lightness.
- Required:
color-- the color to darken - Optional:
amount-- percentage to darken (1-100, default: 10)
Example:
{ "action": "color-darken", "color": "#3498db", "amount": 20 }
color-lighten
Lighten a color by increasing its lightness.
- Required:
color-- the color to lighten - Optional:
amount-- percentage to lighten (1-100, default: 10)
Example:
{ "action": "color-lighten", "color": "navy", "amount": 15 }
color-invert
Invert a color (each RGB channel becomes 255 minus its value).
- Required:
color-- the color to invert - Optional: none
Example:
{ "action": "color-invert", "color": "#3498db" }
color-saturate
Increase a color's saturation.
- Required:
color-- the color to saturate - Optional:
amount-- percentage to increase saturation (1-100, default: 10)
Example:
{ "action": "color-saturate", "color": "rgb(150, 120, 100)", "amount": 30 }
color-desaturate
Decrease a color's saturation (move toward gray).
- Required:
color-- the color to desaturate - Optional:
amount-- percentage to decrease saturation (1-100, default: 10)
Example:
{ "action": "color-desaturate", "color": "#e74c3c", "amount": 25 }
Generators
color-random
Generate a random color. Returns hex, RGB, and HSL values.
- Required: none
- Optional: none
Example:
{ "action": "color-random" }
color-palette-generate
Generate a harmonious color palette. Uses analogous colors for small palettes (up to 3), pentagon distribution for medium palettes (up to 5), and even distribution for larger palettes.
- Required: none
- Optional:
count-- number of colors to generate (1-20, default: 5)
Example:
{ "action": "color-palette-generate", "count": 8 }
Common Workflows
- Brand color exploration: Use
color-name-to-hexto start from a named color, thencolor-complementto find a contrasting accent, andcolor-lighten/color-darkento create variants. - Building a UI palette: Use
color-palette-generatewith a desired count, then fine-tune individual colors withcolor-saturateorcolor-desaturate. - Format conversion for developers: Convert between hex, RGB, and HSL using the conversion actions to match the format required by your CSS, design tool, or API.
- Accessibility checks: Use
color-lightenandcolor-darkento create sufficient contrast between text and background colors.
Important Notes
- All actions except
color-randomandcolor-palette-generaterequire thecolorparameter. - The
amountparameter only applies tocolor-darken,color-lighten,color-saturate, andcolor-desaturate. - The
countparameter only applies tocolor-palette-generate. - All responses include the result in multiple formats (hex, RGB, and/or HSL) for convenience.
- Named colors support all 147 standard CSS/HTML color names (e.g.,
aliceblue,coral,midnightblue,tomato).







