← Dev Tools

How to Use

1

Enter any colour

Type or paste a colour in any format — HEX (#ff6600), RGB, HSL, OKLCH, OKLab, LAB, or a named colour like rebeccapurple.

2

Convert instantly

Click Convert or press Enter. The colour preview and all format values update immediately.

3

Copy any format

Click the copy button next to any format to copy it to your clipboard for use in CSS, design tools, or code.

Supported colour formats

This tool supports conversion between six colour formats: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)), OKLCH (oklch(0.6281 0.2073 46.60)), OKLab (oklab(0.6281 0.1425 0.1505)), and CIE Lab (lab(63.70 55.98 57.13)). OKLab and OKLCH are perceptually uniform colour spaces — they are the modern standard for colour interpolation, gradients, and accessibility work. Named CSS colours like rebeccapurple, crimson, and steelblue are also recognised.

About Colour Converter

Colour values travel between design tools, code, and print in many different formats, and converting between them by hand invites mistakes. ILikePdf Colour Converter translates a single colour across HEX, RGB, HSL, OKLCH, OKLab, and LAB spaces instantly, with a visual picker and one-click copy for each format. It is the reliable bridge between Figma swatches, CSS variables, and print colour specs. Everything runs in your browser, so even full design-system conversions stay private.

How to convert colours Colour Converter

Step 1: Type or paste a colour value in any supported format — HEX, RGB, HSL, OKLCH, OKLab, or LAB.
Step 2: Pick a colour visually with the colour picker to start from any shade.
Step 3: The tool instantly converts it into every other colour space.
Step 4: Copy the format you need with one click.
Step 5: Use the eyedropper in the preview for quick sampling from an image.

Common use cases for Colour Converter

  • Convert HEX values to OKLCH for modern CSS.
  • Translate design system colours between Figma and CSS formats.
  • Check how a colour looks in different colour spaces.
  • Quickly generate LAB values for printing workflows.

Pro tips

  • OKLCH is the most perceptually uniform space for CSS gradients.
  • HEX to HSL is the most common conversion for CSS variables.
  • All conversions run instantly in your browser.

Was this tool helpful? Rate it

Tap a star to rate.