Serialif Color
App · Images & Design · 8 actions
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.
Actions
| Action | What it does |
|---|---|
| Check service status | Check whether Serialif Color is answering, and how quickly. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
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
messagetextonlinetrue/falsereachabletrue/falseresponse_time_msnumberstatus_codenumber
Example output
{
"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
colortextRequired - 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
totextRequired - The format to convert the color into.One of:
hex,rgb,hsl. - Color format
color_formattext - 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
colorobjectinputtextinput_formattextopaque_valuetexttotextvaluetext
Example output
{
"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
seedtext - 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
colorobjectcomplementaryobjectgrayscaleobjectseedtext
Example output
{
"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
colortextRequired - 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_formattext - 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
colorobjectcomplementaryobjectinputtextinput_formattext
Example output
{
"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
colortextRequired - 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_formattext - 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
colorobjectgrayscaleobjectinputtextinput_formattext
Example output
{
"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
colortextRequired - 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_formattext - 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
colorobjectinputtextinput_formattextis_darktrue/falsetext_colortexttext_color_nametext
Example output
{
"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
colortextRequired - 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_formattext - 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
colorobjectcomplementaryobjectgrayscaleobjectinputtextinput_formattext
Example output
{
"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
colorslistRequired - 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_formattext - 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_countnumbercolorslistcss_nameslisthex_valueslistinputslisttext_colorslist
Example output
{
"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"
]
}