Adding a Sepia Tone with CSS: The sepia() Function Explained

Syntax

filter: sepia(<value>);

• <value>: This is required and determines the intensity of the sepia effect. It can be specified in two ways:
  • Number
    A number between 0 and 1 (inclusive). 0 indicates no sepia tone (original colors), and 1 applies a full sepia effect.
  • Percentage
    A value between 0% and 100% (inclusive). Similar to the number, 0% means no effect, and 100% is full sepia tone.

Example

img.sepia-toned {
  filter: sepia(50%);  /* Applies a moderate sepia effect (50%) */
}

In this example, the img element with the class sepia-toned will have its colors converted to a sepia tone with a 50% intensity.

• Some CSS frameworks like Tailwind CSS provide pre-built classes for applying sepia tones (e.g., .sepia class).
• sepia() can be combined with other filter functions like grayscale() or hue-rotate() for more complex effects.
• Values outside the valid range (negative numbers, numbers greater than 1, percentages outside 0% to 100%) are not allowed.

---

Subtle Sepia Tone (20%)

<img src="image.jpg" alt="Image" class="subtle-sepia">

img.subtle-sepia {
  filter: sepia(20%);
}

This code applies a faint sepia effect (20%) to the image with the source "image.jpg".

Strong Sepia Tone (75%)

<img src="portrait.png" alt="Portrait" class="strong-sepia">

img.strong-sepia {
  filter: sepia(75%);
}

This code applies a more pronounced sepia effect (75%) to the image with the source "portrait.png".

Sepia with Grayscale (Combine sepia() with grayscale())

<img src="landscape.jpg" alt="Landscape" class="sepia-grayscale">

img.sepia-grayscale {
  filter: sepia(50%) grayscale(30%);
}

This code combines a moderate sepia effect (50%) with a slight grayscale filter (30%) on the "landscape.jpg" image.

Warmer Sepia Tone (Combine sepia() with hue-rotate())

<img src="vintage-photo.jpg" alt="Vintage Photo" class="warm-sepia">

img.warm-sepia {
  filter: sepia(80%) hue-rotate(10deg);
}

This code applies a strong sepia effect (80%) and then slightly shifts the hue by 10 degrees towards red, creating a warmer sepia tone on the "vintage-photo.jpg" image.

---

Grayscale Filter (grayscale())

• Adjust the percentage for a partial grayscale conversion.
• Use filter: grayscale(100%) for a complete grayscale effect.
• Converts the element to black and white, removing all color information.

Hue-rotate Filter (hue-rotate())

• Experiment with different angles for creative color manipulation.
• Specify an angle value (e.g., hue-rotate(90deg)) to shift the hues.
• Rotates the color wheel of the element, creating a different overall color scheme.

Invert Filter (invert())

• Lower percentages create a more subtle inversion effect.
• Use filter: invert(100%) for a complete inversion.
• Inverts the colors of the element, swapping light for dark and vice versa.

HSL Color Adjustments (Using hsl() function)

• This approach offers more granular control over color manipulation.
• You can adjust these channels to achieve various effects like color tinting or desaturation.
• CSS allows manipulating individual color channels (Hue, Saturation, Lightness) using the hsl() function.

CSS Blend Modes

• Modes like multiply or overlay can create vintage or duotone effects by blending the element's color with another color.
• Blend modes define how an element's colors interact with the underlying content.

• hsl() and blend modes provide more advanced color manipulation options.
• invert() creates a striking negative image effect.
• hue-rotate() allows for creative color shifts.
• grayscale() offers a classic black and white look.
• The best alternative depends on the desired effect.