Color Companion

Find a complementary colour

The opposite hue, rotated in OKLCH so the pair keeps the same perceived lightness instead of one looking washed out.

#e11d48

A mid-tone, vivid orange. Closest CSS name: `crimson`.

Hex
#e11d48
RGB
rgb(225 29 72)
HSL
hsl(346.8 77.2% 49.8%)
OKLCH
oklch(0.586 0.222 17.6)
CMYK
cmyk(0% 87.11% 68% 11.76%)
Nearest name
crimson

Readable text

White text

4.7:1

Black text

4.47:1

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

Worth knowing

  • Worth knowing

    11 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 4.7:1 — against white 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 white 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

    #009eaa

    clipped to sRGB

Analogous — neighbouring hues

  • analogous −30°

    #d12894

  • analogous +30°

    #dc3900

    clipped to sRGB

Triadic — evenly spaced

  • triadic +120°

    #1f9700

    clipped to sRGB

  • triadic +240°

    #0074fb

    clipped to sRGB

Split-complementary — softer opposites

  • split-complementary +150°

    #00a160

    clipped to sRGB

  • split-complementary +210°

    #008de0

    clipped to sRGB

Monochromatic — one hue, five lightnesses

  • lightness 0.25

    #670000

    clipped to sRGB

  • lightness 0.4

    #9d0013

    clipped to sRGB

  • lightness 0.55

    #d4003e

    clipped to sRGB

  • lightness 0.7

    #ff5069

    clipped to sRGB

  • lightness 0.85

    #ff8597

    clipped to sRGB

Try your own colour

Paste one on the home page — you can also pick a colour straight out of a photo there. This page is available as markdown.

Related examples