Color converter

Client-side only. Color math runs in this tab. Nothing is uploaded.

Input as HEX RGB HSL

Color HEX (#RRGGBB / #RGB), RGB (r, g, b or rgb(...)), or HSL (hsl(h, s%, l%)).

Live swatch

#C48B9F · dusty rose sample

HEX

RGB

HSL

RGBA

Hex vs RGB in one glance

Same solid colors, two common notations. Handy when a design doc lists one and your stylesheet expects the other:

Swatch	HEX	RGB
Dusty rose	`#C48B9F`	`rgb(196, 139, 159)`
Near black	`#111111`	`rgb(17, 17, 17)`
Sage	`#2F6F4E`	`rgb(47, 111, 78)`
Peach	`#F5C6A5`	`rgb(245, 198, 165)`
White	`#FFFFFF`	`rgb(255, 255, 255)`

How to paste from Figma, CSS, or design tokens

Figma’s color panel usually copies HEX with a leading #. Drop that into HEX mode and hit Convert (or just keep typing: conversion is live). CSS authors often copy rgb(196, 139, 159) or the bare 196, 139, 159 trio from a token file: switch to RGB mode and paste either form.

Design tokens sometimes ship HSL for theming (hsl(339 33% 66%) or comma form). Use HSL mode. Spaces or commas both parse. Percent signs on saturation and lightness are optional if you type the numbers yourself.

Worked convert: dusty rose step by step

Start with the sample #C48B9F (already loaded).

HEX parse: C4 → 196, 8B → 139, 9F → 159.
RGB output: rgb(196, 139, 159).
HSL: relative channels give hue ≈ 339°, saturation ≈ 33%, lightness ≈ 66%, so hsl(339, 33%, 66%).
RGBA: same RGB with alpha 1 → rgba(196, 139, 159, 1). This tool stays on solid colors; alpha editing is not a separate control.

Flip the input mode to RGB, paste 196, 139, 159, and you should land on the same HEX. That round-trip is the quick sanity check before you commit a token.

Gotchas

Three-digit HEX: #C8A expands to #CC88AA by doubling each digit. Output is always six digits.
Case: #c48b9f and #C48B9F are the same. Output HEX is uppercased for consistency.
Spaces in rgb(): rgb(196,139,159) and rgb(196, 139, 159) both work. Extra letters or a fourth channel without using RGBA notation fail cleanly.
Out-of-range channels: RGB values must be integers 0-255. HSL hue wraps 0-360; saturation and lightness clamp to 0-100%.
No upload, no save. Refresh clears the page unless you copied an output out.

FAQ

What color formats does this converter support?

Paste HEX (#RRGGBB or #RGB, with or without the hash), RGB as r, g, b or rgb(r, g, b), or HSL as hsl(h, s%, l%). Outputs are HEX, RGB, HSL, and RGBA with full opacity.

Does three-digit HEX work?

Yes. #C8A expands to #CC88AA by doubling each digit, the usual CSS shorthand rule. The HEX output always shows the six-digit form.

Are my colors uploaded?

No. Parsing and conversion run in JavaScript in this tab. ToolPetal has no server step for color conversion.

Why did my RGB value fail?

Each channel must be an integer from 0 to 255. Spaces are fine. Values outside that range, missing commas, or extra letters show a clear status error and leave the last valid swatch alone.