Color Companion

Convert a colour, and find the ones that go with it

Every format, plus complementary, analogous, triadic and split-complementary colours — computed in OKLCH, so the pairs hold their perceived lightness instead of one looking washed out next to the other.

Pick a colour out of a photo

Choose an image, then click anywhere on it. The photo stays in your browser — only the colour you pick is sent.

#3b82f6

A light, moderately saturated violet. Closest CSS name: `dodgerblue`.

Hex
#3b82f6
RGB
rgb(59 130 246)
HSL
hsl(217.2 91.2% 59.8%)
OKLCH
oklch(0.623 0.188 259.8)
CMYK
cmyk(76.02% 47.15% 0% 3.53%)
Nearest name
dodgerblue

Readable text

White text

3.68:1

Black text

5.71:1

Use black text. Passes AA for normal text: yes · AAA: no · AA for large text: yes

Worth knowing

  • Worth knowing

    8 derived colours are outside sRGB

    Rotating hue at this chroma produces colours a normal screen cannot display, so they have been clipped to the nearest sRGB colour. The hex values shown are therefore not exactly what the maths asked for, and the harmony will look slightly less even than it should.

    Fix: Lower the chroma of the input colour before deriving harmonies, or accept the clipped values as an approximation.

  • Worth knowing

    A mid-tone: neither white nor black text reaches AAA

    The best this colour manages is 5.71:1 — against black text. That clears WCAG AA for normal text (4.5:1) but not AAA (7:1). Mid-tones look fine in a mockup and then fail review, because both text colours are only just adequate.

    Fix: Use black text on it, and move the lightness further from the middle if the text has to meet AAA.

  • Note

    CMYK here is a naive conversion

    CMYK has no fixed meaning without an output profile — the same numbers print differently on different presses and papers. The value shown is the standard arithmetic conversion, not a colour-managed one.

    Fix: For print work, convert in software with the press profile applied.

Complementary — the opposite hue

  • complementary

    #c17400

    clipped to sRGB

Analogous — neighbouring hues

  • analogous −30°

    #0097e1

    clipped to sRGB

  • analogous +30°

    #886cee

Triadic — evenly spaced

  • triadic +120°

    #e24956

  • triadic +240°

    #3ba01b

Split-complementary — softer opposites

  • split-complementary +150°

    #db5a00

    clipped to sRGB

  • split-complementary +210°

    #908e00

    clipped to sRGB

Monochromatic — one hue, five lightnesses

  • lightness 0.25

    #000079

    clipped to sRGB

  • lightness 0.4

    #003baa

    clipped to sRGB

  • lightness 0.55

    #246bdd

  • lightness 0.7

    #539bff

    clipped to sRGB

  • lightness 0.85

    #81ccff

    clipped to sRGB

Worked examples

Built for agents too

Colour-space arithmetic has no feedback signal — a wrong answer looks exactly like a right one until someone sees the colour. Worth delegating.

curl 'https://color-companion.gumballtools.com/api/v1/analyse?color=%233b82f6'

API and MCP setup · llms.txt

Questions people actually ask

Why do complementary colours from other tools look unbalanced?

Because most tools rotate hue in HSL, and HSL is not perceptual. Its "lightness" is a crude average of the RGB channels, so a yellow at 50% lightness looks far brighter than a blue at 50% lightness. Rotate the hue 180 degrees and you change how light the colour appears, not just its hue — so the pair reads as mismatched even though the numbers look symmetrical. Rotating in OKLCH holds perceived lightness constant, which is what you actually wanted.

What is OKLCH and why should I care?

OKLCH is a perceptual colour space: lightness, chroma, and hue, defined so that equal numeric steps look like equal visual steps. That makes it the right space for deriving palettes, building lightness ramps, and interpolating between colours — all things that go subtly wrong in HSL or RGB. It is supported in every current browser as the CSS oklch() function.

What does "clipped to sRGB" mean?

OKLCH can describe colours more vivid than a normal screen can show. When a derived colour falls outside that range there is no way to display it, so it gets pulled back to the nearest colour that fits. The hex you get is then not exactly what the maths produced. This tool tells you when that happened, because silently returning a different colour than the one you asked for is how palettes end up looking uneven.

Can I trust the CMYK numbers for printing?

No, and no tool that does not know your press can give you numbers you can trust. CMYK is device-dependent: the same values produce different colours on different presses, inks, and papers. What you get here is the standard arithmetic conversion, which is a reasonable starting point and nothing more. For real print work, convert in software with the output profile applied.

What contrast ratio do I actually need?

WCAG AA asks for 4.5:1 for normal text and 3:1 for large or bold text; AAA asks for 7:1 and 4.5:1. A useful thing to know: every solid colour clears AA against either white or black, because the worst case is around 4.58:1. So the real question is never "does it pass" but "which text colour, and is it comfortable" — which is why this tool flags the mid-tones where neither white nor black reaches AAA.

How does picking a colour from a photo work?

The image is loaded into a canvas in your browser and the pixel you click is read directly from it. The photo is never uploaded — only the resulting hex value is sent, and only when you choose to use it. That feature needs JavaScript; everything else on the site works without it.

Which colour formats can I paste in?

Hex with or without a leading # and with 3, 4, 6, or 8 digits; rgb() and rgba() with commas or spaces; hsl() and hsla(); oklch(); any of the CSS colour names; and "transparent". If it does not recognise what you pasted it says so and lists what it accepts, rather than guessing at a colour.

Can an AI agent call this directly?

Yes. There is a JSON API at /api/v1/analyse, an MCP server at /api/mcp exposing an analyse_color tool, an OpenAPI document at /.well-known/openapi.json, and a machine-readable index at /llms.txt. Every page is also available as markdown at the same URL with an Accept: text/markdown header. The free allowance is 250 calls per day per caller.