Docs
Open Lodol
DocumentationIntegrationsAPI

ColorUI

App · Images & Design · 6 actions

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.

Actions

ActionWhat it does
Check contrastCompute 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.
Check service statusCheck whether ColorUI is answering, how quickly, and how much of the rate limit is left this minute.
Convert a colorConvert 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.
Generate a harmony paletteBuild a palette around one color by a color-wheel rule: complementary, analogous, triadic, tetradic, split-complementary, square or monochromatic.
Generate a palette from a promptGenerate a palette from a few words about what it is for, such as a brand, a product or a mood.
Generate a random paletteDraw a palette of two to eight colors at random, as hex codes with a link to the palette on colorui.io.

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 colorforegroundtextRequired
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 colorbackgroundtextRequired
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

aaobject
Whether the pair meets WCAG 2.1 level AA.
aaaobject
Whether the pair meets WCAG 2.1 level AAA.
backgroundtext
The background color that was checked, as the service echoed it.
foregroundtext
The text color that was checked, as the service echoed it.
gradetext
The best level the pair reaches for body text, as the service grades it: AAA, AA, or a fail.
passes_aatrue/false
True when body text passes AA. This is the field to branch on before shipping a text and background pair.
passes_aaatrue/false
True when body text passes AAA, the stricter level.
rationumber
The WCAG 2.1 contrast ratio, from 1 (no contrast) to 21 (black on white), to two decimals.
Example output
{
  "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

messagetext
What happened, in a sentence worth posting.
onlinetrue/false
True when the service answered with a converted color. This is the field to branch on.
rate_limit_resets_attext
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_limitedtrue/false
True when the answer was a throttle (HTTP 429). Being throttled is not the same as being down.
reachabletrue/false
True when something answered at all, even with an error. False means the request never landed.
requests_remainingnumber
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_msnumber
How long the request took, in milliseconds, or null when nothing came back.
status_codenumber
The HTTP status that came back, or null when nothing did.
Example output
{
  "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

ColorcolortextRequired
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.
Formatformattext
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

csstext
The one string to paste: the CSS of the format asked for, or the hex when every format was.
formattext
The format that was asked for: all, hex, rgb, hsl, lch, oklch or lab.
hextext
The color as lowercase hex, e.g. #7c5cff. Null when a different single format was asked for.
hslobject
The color in HSL, with its components and a CSS string. Null when this format was not asked for.
inputtext
The color as it was given, echoed back by the service.
labobject
The color in LAB, with its components and a CSS string. Null when this format was not asked for.
lchobject
The color in LCH, with its components and a CSS string. Null when this format was not asked for.
oklchobject
The color in OKLCH, with its components and a CSS string. Null when this format was not asked for.
rgbobject
The color in RGB, with its components and a CSS string. Null when this format was not asked for.
Example output
{
  "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 colorbasetextRequired
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.
HarmonyharmonytextRequired
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

basetext
The color the palette was built around.
colorslist
The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
countnumber
How many colors are in the palette.
harmonytext
The harmony rule the palette follows.
share_urltext
A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
sourcetext
How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.
Example output
{
  "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

PromptprompttextRequired
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.
Variantvariantnumber
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

colorslist
The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
countnumber
How many colors are in the palette.
intentobject
What the service took the prompt to be asking for. Null when it gave no reading.
narrativeslist
One explanation per color, in palette order. Empty when the service gave none.
prompttext
The brief the palette was designed for.
share_urltext
A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
sourcetext
How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.
variantnumber
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
{
  "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 colorscountnumber
Optional. How many colors to draw, between 2 and 8. 5 by default.From 2 to 8. Default: 5.

Outputs

colorslist
The palette, as lowercase hex codes in the service's order, e.g. #7c5cff.
countnumber
How many colors are in the palette.
share_urltext
A link that opens the palette on colorui.io, e.g. https://colorui.io/p/0b0b1a7c5cffff2bd606f5fffbbf24. Null when the service gave none.
sourcetext
How the palette was made, as the service reports it: ai for a prompt, harmony for a rule, random for a draw.
Example output
{
  "colors": [
    "#2a9d8f",
    "#e9c46a",
    "#f4a261",
    "#e76f51",
    "#264653"
  ],
  "count": 5,
  "share_url": "https://colorui.io/p/2a9d8fe9c46af4a261e76f51264653",
  "source": "random"
}

Colormind

Previous Page

Companies House

Next Page

On this page

ActionsCheck contrastCheck service statusConvert a colorGenerate a harmony paletteGenerate a palette from a promptGenerate a random palette