getColor

Extracts only the dominant color from an image. This is the fastest option if you do not need the blur placeholder.

Signature

getColor(url: string, options?: PlaceholderOptions): Promise<string>

Returns

Returns a Hex color string (e.g. #ffffff).

Example

// Server Component
const color = await getColor(
  "https://images.unsplash.com/photo-1619441207978-3d326c46e2c9?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
);

// Render
<div style={{ backgroundColor: color }}>
  <Image src="..." />
</div>

getColorRGB

If you need the raw RGB values instead of a Hex string, use getColorRGB.

import { getColorRGB } from 'next-image-placeholder';

const { r, g, b, a } = await getColorRGB('/image.jpg');