# Serialif Color

> Look up, convert and pair colors with Serialif Color, the free keyless color API. Give it a color as a CSS name, a hex code, rgb or hsl, with or without an alpha channel, and get back its name, the same color in every format and the black or white text that reads on it; convert one value into another format; get a color's complementary or its grayscale; pick a random color that a seed makes repeatable; or look up a whole list of brand colors in one step.

App · Images & Design · 8 actions. Web page: https://docs.lodol.com/docs/integrations/serialif-color

## Actions

### Check service status

Check whether Serialif Color is answering, and how quickly. This is the one action that reports a problem as a value instead of failing the step, so a workflow can decide what to do about it.

**Inputs**: None.

**Outputs**

- `message` (text)
- `online` (true/false)
- `reachable` (true/false)
- `response_time_ms` (number)
- `status_code` (number)

**Example output**

```json
{
  "message": "Serialif Color is up and answering.",
  "online": true,
  "reachable": true,
  "response_time_ms": 612.4,
  "status_code": 200
}
```

### Convert a color

Convert one color into hex, rgb or hsl and get the converted value as a string ready to paste into a stylesheet, a design tool or a message. A color with an alpha channel converts with it, so rgba(196, 65, 90, 0.47) becomes #C4415A78, and the value without the alpha comes back beside it. The full color comes back too, with its name and every component.

**Inputs**

- Color (`color`, text, required): The color, as a CSS color name such as aquamarine, a hex code such as #7FFFD4 (3, 4, 6 or 8 digits, the last two an alpha), rgb(127, 255, 212), rgba(196, 65, 90, 0.47) or hsl(160, 100%, 75%). Three bare numbers are read as rgb, or as hsl when the second and third carry a percent sign. Wire in a value from an earlier step, or type one.
- Convert to (`to`, text, required): The format to convert the color into. One of: `hex`, `rgb`, `hsl`.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color` (object)
- `input` (text)
- `input_format` (text)
- `opaque_value` (text)
- `to` (text)
- `value` (text)

**Example output**

```json
{
  "color": {
    "alpha": 0.47,
    "blue": 90,
    "css_name": null,
    "green": 65,
    "hex": "#C4415A78",
    "hex_opaque": "#C4415A",
    "hsl": "hsla(349, 53%, 51%, 0.47)",
    "hue": 349,
    "hue_exact": 348.54962,
    "is_dark": true,
    "lightness": 51,
    "lightness_exact": 51.17647,
    "red": 196,
    "rgb": "rgba(196, 65, 90, 0.47)",
    "saturation": 53,
    "saturation_exact": 52.61044,
    "text_color": "#FFFFFF"
  },
  "input": "rgba(196, 65, 90, 0.47)",
  "input_format": "rgb",
  "opaque_value": "#C4415A",
  "to": "hex",
  "value": "#C4415A78"
}
```

### Get a random color

Pick an opaque color at random and look it up, for an accent, a label or a placeholder that should not be the same every time. Add a seed to make the pick repeatable: the same seed always gives the same color, so naming a customer, a project or a date here gives each its own color that a later run finds again. Its complementary and grayscale come back too.

**Inputs**

- Seed (`seed`, text): Any text you like. The same seed always gives the same color, and a different seed almost always gives a different one. Leave empty for a fresh random color on every run.

**Outputs**

- `color` (object)
- `complementary` (object)
- `grayscale` (object)
- `seed` (text)

**Example output**

```json
{
  "color": {
    "alpha": 1,
    "blue": 192,
    "css_name": null,
    "green": 218,
    "hex": "#53DAC0",
    "hex_opaque": "#53DAC0",
    "hsl": "hsl(168, 65%, 59%)",
    "hue": 168,
    "hue_exact": 168.44444,
    "is_dark": false,
    "lightness": 59,
    "lightness_exact": 59.01961,
    "red": 83,
    "rgb": "rgb(83, 218, 192)",
    "saturation": 65,
    "saturation_exact": 64.5933,
    "text_color": "#000000"
  },
  "complementary": {
    "alpha": 1,
    "blue": 63,
    "css_name": null,
    "green": 37,
    "hex": "#AC253F",
    "hex_opaque": "#AC253F",
    "hsl": "hsl(348, 65%, 41%)",
    "hue": 348,
    "hue_exact": 348.44444,
    "is_dark": true,
    "lightness": 41,
    "lightness_exact": 40.98039,
    "red": 172,
    "rgb": "rgb(172, 37, 63)",
    "saturation": 65,
    "saturation_exact": 64.5933,
    "text_color": "#FFFFFF"
  },
  "grayscale": {
    "alpha": 1,
    "blue": 151,
    "css_name": null,
    "green": 151,
    "hex": "#979797",
    "hex_opaque": "#979797",
    "hsl": "hsl(168, 0%, 59%)",
    "hue": 168,
    "hue_exact": 168.44444,
    "is_dark": false,
    "lightness": 59,
    "lightness_exact": 59.01961,
    "red": 151,
    "rgb": "rgb(151, 151, 151)",
    "saturation": 0,
    "saturation_exact": 0,
    "text_color": "#000000"
  },
  "seed": "lodol-qa"
}
```

### Get the complementary color

Get a color's complementary: its negative, which Serialif Color makes by inverting each rgb channel, so the hue turns half way round the color wheel and the lightness is mirrored. Any alpha channel is kept. It comes back described in full, with its CSS name when it has one and the text color the service pairs with it.

**Inputs**

- Color (`color`, text, required): The color, as a CSS color name such as aquamarine, a hex code such as #7FFFD4 (3, 4, 6 or 8 digits, the last two an alpha), rgb(127, 255, 212), rgba(196, 65, 90, 0.47) or hsl(160, 100%, 75%). Three bare numbers are read as rgb, or as hsl when the second and third carry a percent sign. Wire in a value from an earlier step, or type one.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color` (object)
- `complementary` (object)
- `input` (text)
- `input_format` (text)

**Example output**

```json
{
  "color": {
    "alpha": 1,
    "blue": 0,
    "css_name": "lime",
    "green": 255,
    "hex": "#00FF00",
    "hex_opaque": "#00FF00",
    "hsl": "hsl(120, 100%, 50%)",
    "hue": 120,
    "hue_exact": 120,
    "is_dark": false,
    "lightness": 50,
    "lightness_exact": 50,
    "red": 0,
    "rgb": "rgb(0, 255, 0)",
    "saturation": 100,
    "saturation_exact": 100,
    "text_color": "#000000"
  },
  "complementary": {
    "alpha": 1,
    "blue": 255,
    "css_name": "fuchsia",
    "green": 0,
    "hex": "#FF00FF",
    "hex_opaque": "#FF00FF",
    "hsl": "hsl(300, 100%, 50%)",
    "hue": 300,
    "hue_exact": 300,
    "is_dark": true,
    "lightness": 50,
    "lightness_exact": 50,
    "red": 255,
    "rgb": "rgb(255, 0, 255)",
    "saturation": 100,
    "saturation_exact": 100,
    "text_color": "#FFFFFF"
  },
  "input": "lime",
  "input_format": "keyword"
}
```

### Get the grayscale version of a color

Get a color in grayscale: the same hue and lightness with the saturation taken to 0, the gray it prints as in black and white. Any alpha channel is kept. It comes back described in full, with its CSS name when it has one and the text color the service pairs with it.

**Inputs**

- Color (`color`, text, required): The color, as a CSS color name such as aquamarine, a hex code such as #7FFFD4 (3, 4, 6 or 8 digits, the last two an alpha), rgb(127, 255, 212), rgba(196, 65, 90, 0.47) or hsl(160, 100%, 75%). Three bare numbers are read as rgb, or as hsl when the second and third carry a percent sign. Wire in a value from an earlier step, or type one.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color` (object)
- `grayscale` (object)
- `input` (text)
- `input_format` (text)

**Example output**

```json
{
  "color": {
    "alpha": 1,
    "blue": 153,
    "css_name": "rebeccapurple",
    "green": 51,
    "hex": "#663399",
    "hex_opaque": "#663399",
    "hsl": "hsl(270, 50%, 40%)",
    "hue": 270,
    "hue_exact": 270,
    "is_dark": true,
    "lightness": 40,
    "lightness_exact": 40,
    "red": 102,
    "rgb": "rgb(102, 51, 153)",
    "saturation": 50,
    "saturation_exact": 50,
    "text_color": "#FFFFFF"
  },
  "grayscale": {
    "alpha": 1,
    "blue": 102,
    "css_name": null,
    "green": 102,
    "hex": "#666666",
    "hex_opaque": "#666666",
    "hsl": "hsl(270, 0%, 40%)",
    "hue": 270,
    "hue_exact": 270,
    "is_dark": true,
    "lightness": 40,
    "lightness_exact": 40,
    "red": 102,
    "rgb": "rgb(102, 102, 102)",
    "saturation": 0,
    "saturation_exact": 0,
    "text_color": "#FFFFFF"
  },
  "input": "hsl(270, 50%, 40%)",
  "input_format": "hsl"
}
```

### Get the text color for a background

Find out whether black or white text reads better on a color, for a badge, a button or a label whose background comes from data. Serialif Color decides by the color's perceived brightness: white on a dark color, black on a light one, judged without any alpha channel.

**Inputs**

- Background color (`color`, text, required): The color, as a CSS color name such as aquamarine, a hex code such as #7FFFD4 (3, 4, 6 or 8 digits, the last two an alpha), rgb(127, 255, 212), rgba(196, 65, 90, 0.47) or hsl(160, 100%, 75%). Three bare numbers are read as rgb, or as hsl when the second and third carry a percent sign. Wire in a value from an earlier step, or type one.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color` (object)
- `input` (text)
- `input_format` (text)
- `is_dark` (true/false)
- `text_color` (text)
- `text_color_name` (text)

**Example output**

```json
{
  "color": {
    "alpha": 1,
    "blue": 153,
    "css_name": "rebeccapurple",
    "green": 51,
    "hex": "#663399",
    "hex_opaque": "#663399",
    "hsl": "hsl(270, 50%, 40%)",
    "hue": 270,
    "hue_exact": 270,
    "is_dark": true,
    "lightness": 40,
    "lightness_exact": 40,
    "red": 102,
    "rgb": "rgb(102, 51, 153)",
    "saturation": 50,
    "saturation_exact": 50,
    "text_color": "#FFFFFF"
  },
  "input": "#663399",
  "input_format": "hex",
  "is_dark": true,
  "text_color": "#FFFFFF",
  "text_color_name": "white"
}
```

### Look up a color

Look up one color: its CSS name when it is one of the named colors, the same color in hex, rgb and hsl with its components, the black or white text that reads on it, and its complementary and grayscale, each described the same way. Give it the color as a name, a hex code, rgb or hsl, with an alpha channel if it has one. A malformed color is refused here with a message saying what a color looks like.

**Inputs**

- Color (`color`, text, required): The color, as a CSS color name such as aquamarine, a hex code such as #7FFFD4 (3, 4, 6 or 8 digits, the last two an alpha), rgb(127, 255, 212), rgba(196, 65, 90, 0.47) or hsl(160, 100%, 75%). Three bare numbers are read as rgb, or as hsl when the second and third carry a percent sign. Wire in a value from an earlier step, or type one.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color` (object)
- `complementary` (object)
- `grayscale` (object)
- `input` (text)
- `input_format` (text)

**Example output**

```json
{
  "color": {
    "alpha": 1,
    "blue": 212,
    "css_name": "aquamarine",
    "green": 255,
    "hex": "#7FFFD4",
    "hex_opaque": "#7FFFD4",
    "hsl": "hsl(160, 100%, 75%)",
    "hue": 160,
    "hue_exact": 159.84375,
    "is_dark": false,
    "lightness": 75,
    "lightness_exact": 74.90196,
    "red": 127,
    "rgb": "rgb(127, 255, 212)",
    "saturation": 100,
    "saturation_exact": 100,
    "text_color": "#000000"
  },
  "complementary": {
    "alpha": 1,
    "blue": 43,
    "css_name": null,
    "green": 0,
    "hex": "#80002B",
    "hex_opaque": "#80002B",
    "hsl": "hsl(340, 100%, 25%)",
    "hue": 340,
    "hue_exact": 339.84375,
    "is_dark": true,
    "lightness": 25,
    "lightness_exact": 25.09804,
    "red": 128,
    "rgb": "rgb(128, 0, 43)",
    "saturation": 100,
    "saturation_exact": 100,
    "text_color": "#FFFFFF"
  },
  "grayscale": {
    "alpha": 1,
    "blue": 191,
    "css_name": null,
    "green": 191,
    "hex": "#BFBFBF",
    "hex_opaque": "#BFBFBF",
    "hsl": "hsl(160, 0%, 75%)",
    "hue": 160,
    "hue_exact": 159.84375,
    "is_dark": false,
    "lightness": 75,
    "lightness_exact": 74.90196,
    "red": 191,
    "rgb": "rgb(191, 191, 191)",
    "saturation": 0,
    "saturation_exact": 0,
    "text_color": "#000000"
  },
  "input": "aquamarine",
  "input_format": "keyword"
}
```

### Look up several colors

Look up a list of colors in one step, up to 10 at a time, in the order given: a brand palette, the colors in a design file, the swatches in a spreadsheet column. Each is looked up as Look up a color does, one request each, and the hex codes, names and text colors come back as plain lists beside the full records. Every entry is checked before the first request is made, so a malformed one fails the step without spending requests on the good ones ahead of it.

**Inputs**

- Colors (`colors`, list, required): The colors to look up, one per entry, each a CSS color name, a hex code, rgb or hsl. Wire a list in from an earlier step, or type them one per line.
- Color format (`color_format`, text): Which format the color is written in. Leave empty to work it out from the value, which is right for anything but three bare numbers meant as hsl: 160,100,75 reads as rgb unless this says HSL. One of: `keyword` (CSS color name), `hex`, `rgb` (RGB or RGBA), `hsl` (HSL or HSLA).

**Outputs**

- `color_count` (number)
- `colors` (list)
- `css_names` (list)
- `hex_values` (list)
- `inputs` (list)
- `text_colors` (list)

**Example output**

```json
{
  "color_count": 3,
  "colors": [
    {
      "alpha": 1,
      "blue": 212,
      "css_name": "aquamarine",
      "green": 255,
      "hex": "#7FFFD4",
      "hex_opaque": "#7FFFD4",
      "hsl": "hsl(160, 100%, 75%)",
      "hue": 160,
      "hue_exact": 159.84375,
      "is_dark": false,
      "lightness": 75,
      "lightness_exact": 74.90196,
      "red": 127,
      "rgb": "rgb(127, 255, 212)",
      "saturation": 100,
      "saturation_exact": 100,
      "text_color": "#000000"
    },
    {
      "alpha": 1,
      "blue": 153,
      "css_name": "rebeccapurple",
      "green": 51,
      "hex": "#663399",
      "hex_opaque": "#663399",
      "hsl": "hsl(270, 50%, 40%)",
      "hue": 270,
      "hue_exact": 270,
      "is_dark": true,
      "lightness": 40,
      "lightness_exact": 40,
      "red": 102,
      "rgb": "rgb(102, 51, 153)",
      "saturation": 50,
      "saturation_exact": 50,
      "text_color": "#FFFFFF"
    },
    {
      "alpha": 1,
      "blue": 0,
      "css_name": "lime",
      "green": 255,
      "hex": "#00FF00",
      "hex_opaque": "#00FF00",
      "hsl": "hsl(120, 100%, 50%)",
      "hue": 120,
      "hue_exact": 120,
      "is_dark": false,
      "lightness": 50,
      "lightness_exact": 50,
      "red": 0,
      "rgb": "rgb(0, 255, 0)",
      "saturation": 100,
      "saturation_exact": 100,
      "text_color": "#000000"
    }
  ],
  "css_names": [
    "aquamarine",
    "rebeccapurple",
    "lime"
  ],
  "hex_values": [
    "#7FFFD4",
    "#663399",
    "#00FF00"
  ],
  "inputs": [
    "aquamarine",
    "#663399",
    "rgb(0, 255, 0)"
  ],
  "text_colors": [
    "#000000",
    "#FFFFFF",
    "#000000"
  ]
}
```