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: #3498db or 3498db (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) or 52,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

1. Brand color exploration: Use color-name-to-hex to start from a named color, then color-complement to find a contrasting accent, and color-lighten / color-darken to create variants.
2. Building a UI palette: Use color-palette-generate with a desired count, then fine-tune individual colors with color-saturate or color-desaturate.
3. 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.
4. Accessibility checks: Use color-lighten and color-darken to create sufficient contrast between text and background colors.

Important Notes

• All actions except color-random and color-palette-generate require the color parameter.
• The amount parameter only applies to color-darken, color-lighten, color-saturate, and color-desaturate.
• The count parameter only applies to color-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).