# ColorUI

> Color tools from ColorUI's free public API: convert any CSS color into HEX, RGB, HSL, LCH, OKLCH and LAB at once, check the WCAG 2.1 contrast ratio between a text color and a background with AA and AAA pass or fail flags, and generate palettes from a few words about a brand or a mood, from a harmony rule around a base color, or at random. Every palette comes back as hex codes with a link to it on colorui.io, so a workflow can turn a brief into swatches, check a color pair before it ships, or convert a designer's OKLCH into the RGB a legacy tool needs. No account or API key required.

App · Images & Design · 6 actions. Web page: https://docs.lodol.com/docs/integrations/colorui

## Actions

### Check contrast

Compute the WCAG 2.1 contrast ratio between a text color and a background, with pass or fail flags for AA and AAA at normal and large text sizes and for graphics. The step to run before a color pair ships, with one boolean to branch on. No API key required.

**Inputs**

- Text color (`foreground`, text, required): The color of the text, icon or foreground. Any CSS color works: a hex code such as #7c5cff (bare digits are fine, the # is added), rgb(), hsl(), oklch(), or a named color such as tomato.
- Background color (`background`, text, required): The color behind it. Any CSS color works: a hex code such as #7c5cff (bare digits are fine, the # is added), rgb(), hsl(), oklch(), or a named color such as tomato.

**Outputs**

- `aa` (object): Whether the pair meets WCAG 2.1 level AA.
- `aaa` (object): Whether the pair meets WCAG 2.1 level AAA.
- `background` (text): The background color that was checked, as the service echoed it.
- `foreground` (text): The text color that was checked, as the service echoed it.
- `grade` (text): The best level the pair reaches for body text, as the service grades it: AAA, AA, or a fail.
- `passes_aa` (true/false): True when body text passes AA. This is the field to branch on before shipping a text and background pair.
- `passes_aaa` (true/false): True when body text passes AAA, the stricter level.
- `ratio` (number): The WCAG 2.1 contrast ratio, from 1 (no contrast) to 21 (black on white), to two decimals.

**Example output**

```json
{
  "aa": {
    "graphics": true,
    "large_text": true,
    "normal_text": true
  },
  "aaa": {
    "large_text": true,
    "normal_text": false
  },
  "background": "#7c5cff",
  "foreground": "#ffffff",
  "grade": "AA",
  "passes_aa": true,
  "passes_aaa": false,
  "ratio": 4.78
}
```

### Check service status

Check whether ColorUI is answering, how quickly, and how much of the rate limit is left this minute. This is the one action that reports a problem as a value instead of failing the step, so a workflow can branch on it, pace itself, or fall back to a saved palette when the service is down. Being throttled is reported separately from being down. No API key required.

**Inputs**: None.

**Outputs**

- `message` (text): What happened, in a sentence worth posting.
- `online` (true/false): True when the service answered with a converted color. This is the field to branch on.
- `rate_limit_resets_at` (text): When the current minute's budget refills, as a UTC time like 2026-09-11T14:05:00Z, or null when the service did not say.
- `rate_limited` (true/false): True when the answer was a throttle (HTTP 429). Being throttled is not the same as being down.
- `reachable` (true/false): True when something answered at all, even with an error. False means the request never landed.
- `requests_remaining` (number): How many requests are left in the current minute, out of 60 per IP address, or null when the service did not say. A workflow can wait when this runs low.
- `response_time_ms` (number): How long the request took, in milliseconds, or null when nothing came back.
- `status_code` (number): The HTTP status that came back, or null when nothing did.

**Example output**

```json
{
  "message": "ColorUI is up and converting colors, with 59 of 60 requests left in this minute.",
  "online": true,
  "rate_limit_resets_at": "2026-09-11T14:05:00Z",
  "rate_limited": false,
  "reachable": true,
  "requests_remaining": 59,
  "response_time_ms": 38.4,
  "status_code": 200
}
```

### Convert a color

Convert any CSS color into HEX, RGB, HSL, LCH, OKLCH and LAB, all at once or one at a time, each with its components and a CSS string ready to paste. The step that turns a designer's oklch() into the rgb() a legacy tool needs, or a named color into its hex for a template. No API key required.

**Inputs**

- Color (`color`, text, required): The color to convert. Any CSS color works: a hex code such as #7c5cff (bare digits are fine, the # is added), rgb(), hsl(), oklch(), or a named color such as tomato.
- Format (`format`, text): Optional. Which format to convert into. Every format at once by default, which is the choice for a step that will need more than one. One of: `all` (All formats), `hex`, `rgb`, `hsl`, `lch`, `oklch`, `lab`. Default: `all`.

**Outputs**

- `css` (text): The one string to paste: the CSS of the format asked for, or the hex when every format was.
- `format` (text): The format that was asked for: all, hex, rgb, hsl, lch, oklch or lab.
- `hex` (text): The color as lowercase hex, e.g. #7c5cff. Null when a different single format was asked for.
- `hsl` (object): The color in HSL, with its components and a CSS string. Null when this format was not asked for.
- `input` (text): The color as it was given, echoed back by the service.
- `lab` (object): The color in LAB, with its components and a CSS string. Null when this format was not asked for.
- `lch` (object): The color in LCH, with its components and a CSS string. Null when this format was not asked for.
- `oklch` (object): The color in OKLCH, with its components and a CSS string. Null when this format was not asked for.
- `rgb` (object): The color in RGB, with its components and a CSS string. Null when this format was not asked for.

**Example output**

```json
{
  "css": "#7c5cff",
  "format": "all",
  "hex": "#7c5cff",
  "hsl": {
    "css": "hsl(251.78 100% 68.04%)",
    "h": 251.78,
    "l": 68.04,
    "s": 100
  },
  "input": "#7c5cff",
  "lab": {
    "a": 44.54,
    "b": -78.38,
    "css": "lab(49.76 44.54 -78.38)",
    "l": 49.76
  },
  "lch": {
    "c": 90.15,
    "css": "lch(49.76 90.15 299.61)",
    "h": 299.61,
    "l": 49.76
  },
  "oklch": {
    "c": 0.2376,
    "css": "oklch(59.01% 0.2376 282.47)",
    "h": 282.47,
    "l": 0.5901
  },
  "rgb": {
    "b": 255,
    "css": "rgb(124 92 255)",
    "g": 92,
    "r": 124
  }
}
```

### Generate a harmony palette

Build a palette around one color by a color-wheel rule: complementary, analogous, triadic, tetradic, split-complementary, square or monochromatic. The step that turns a brand color into a set of accents that sit well with it, as hex codes with a link to the palette. No API key required.

**Inputs**

- Base color (`base`, text, required): The color to build the palette around. Any CSS color works: a hex code such as #7c5cff (bare digits are fine, the # is added), rgb(), hsl(), oklch(), or a named color such as tomato.
- Harmony (`harmony`, text, required): The color-wheel rule that picks the other colors from the base: complementary for its opposite, analogous for its neighbours, triadic or square for evenly spaced accents, monochromatic for shades of the base itself. One of: `complementary`, `analogous`, `triadic`, `tetradic`, `split-complementary`, `square`, `monochromatic`.

**Outputs**

- `base` (text): The color the palette was built around.
- `colors` (list): The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
- `count` (number): How many colors are in the palette.
- `harmony` (text): The harmony rule the palette follows.
- `share_url` (text): A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
- `source` (text): How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.

**Example output**

```json
{
  "base": "#7c5cff",
  "colors": [
    "#7c5cff",
    "#ff5c7c",
    "#5cff7c"
  ],
  "count": 3,
  "harmony": "triadic",
  "share_url": "https://colorui.io/p/7c5cffff5c7c5cff7c",
  "source": "harmony"
}
```

### Generate a palette from a prompt

Generate a palette from a few words about what it is for, such as a brand, a product or a mood. Comes back as hex codes with the intent the service read into the prompt, an explanation for each color, and a link to the palette on colorui.io. Set a variant to make the result repeatable. No API key required.

**Inputs**

- Prompt (`prompt`, text, required): What the palette is for, in a few words: a brand, a mood, a product. The service reads the intent and designs a palette to suit it.
- Variant (`variant`, number): Optional. A number from 0 to 99 that picks one of the palettes the prompt could give. The same prompt and variant always return the same palette, so set one to make a step repeatable, or change it to get a different take on the same brief. From 0 to 99.

**Outputs**

- `colors` (list): The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
- `count` (number): How many colors are in the palette.
- `intent` (object): What the service took the prompt to be asking for. Null when it gave no reading.
- `narratives` (list): One explanation per color, in palette order. Empty when the service gave none.
- `prompt` (text): The brief the palette was designed for.
- `share_url` (text): A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
- `source` (text): How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.
- `variant` (number): The variant that was used, 0 to 99, or null when the service chose. The same prompt and variant always give the same palette.

**Example output**

```json
{
  "colors": [
    "#0b0b1a",
    "#7c5cff",
    "#ff2bd6",
    "#06f5ff",
    "#fbbf24"
  ],
  "count": 5,
  "intent": {
    "key": "gaming",
    "label": "Gaming / Esports",
    "rationale": "A gaming interface wants a near-black base with neon accents that read at a glance."
  },
  "narratives": [
    {
      "color": "#0b0b1a",
      "text": "A near-black base that lets the neon accents glow."
    },
    {
      "color": "#7c5cff",
      "text": "An electric violet for primary actions and focus rings."
    },
    {
      "color": "#ff2bd6",
      "text": "A hot magenta for alerts and live indicators."
    },
    {
      "color": "#06f5ff",
      "text": "A cyan for links, progress and anything that should feel fast."
    },
    {
      "color": "#fbbf24",
      "text": "An amber for rewards, warnings and the occasional highlight."
    }
  ],
  "prompt": "Cyberpunk gaming UI",
  "share_url": "https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24",
  "source": "ai",
  "variant": 0
}
```

### Generate a random palette

Draw a palette of two to eight colors at random, as hex codes with a link to the palette on colorui.io. The step for a fresh scheme every run: a color of the day, a placeholder theme, or inspiration to pass on to a designer. No API key required.

**Inputs**

- Number of colors (`count`, number): Optional. How many colors to draw, between 2 and 8. 5 by default. From 2 to 8. Default: `5`.

**Outputs**

- `colors` (list): The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
- `count` (number): How many colors are in the palette.
- `share_url` (text): A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
- `source` (text): How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.

**Example output**

```json
{
  "colors": [
    "#2a9d8f",
    "#e9c46a",
    "#f4a261",
    "#e76f51",
    "#264653"
  ],
  "count": 5,
  "share_url": "https://colorui.io/p/2a9d8fe9c46af4a261e76f51264653",
  "source": "random"
}
```