Sepia converter — the sepia tone of any colour, at any strength

How to use the sepia converter

1. Enter the Colour as HEX, rgb(), hsl(), a CSS name or with the picker.
2. Set the Sepia amount from 0% (no change) to 100% (full sepia).
3. Read the Sepia HEX and RGB values and compare the two swatches.
4. Copy the CSS line if you want the browser to apply the same effect to a whole element, such as a photo.

What it does and when to use it

Sepia gives colours the warm brown cast of old photographs. Designers use it for vintage themes, historical timelines, “archive” sections and hover effects that tint images. When a page applies filter: sepia() to a photo, the text, borders and backgrounds around it often need matching flat colours. This tool gives you those colours exactly, so the frame matches the filtered image.

It also helps you predict what the filter will do to a brand colour before you apply it. For a neutral grey instead of a warm tone, use the grayscale converter. To shift a colour warmer by hand, try the HSL adjuster or pick a warm light colour with the colour temperature tool.

How it works

The Filter Effects specification defines sepia(1) as this matrix on the red, green and blue channels (0 to 1, gamma-encoded):

For a partial amount, each value is moved from the identity matrix toward these numbers in proportion to the amount. Results above 1 are clipped, which is why bright colours land on cream. Transparency is not changed.

Worked examples

These are the converter’s own outputs.

White at 100%. Sepia: #ffffef, rgb(255, 255, 239). Red and green clip at 255; blue is 0.937 × 255.

Blue #3b82f6 at 100%. Sepia: #aa9776, rgb(170, 151, 118), a mid tan. The bright blue becomes a brown of similar brightness.

Blue #3b82f6 at 50%. Sepia: #728db6, a faded, greyish blue halfway to the full effect.

Black at 100%. Stays #000000.

Limits and tips

• Sepia removes most of the original hue, so very different colours can end up as similar browns. Check that important pairs still contrast.
• For photos, use the CSS filter or an image editor; this tool converts single colours.
• The conversion runs in your browser.