Skip to content
QKQuickKit日本語
GeneralLOCALRuns in your browser

Color Format Converter

Convert a CSS color between hex, rgb(), and hsl() notation in the sRGB gamut, preserving alpha and following CSS Color 4 clamping.

This tool handles input and primary processing in your browser and is designed not to send the input to QuickKit’s server.

How it works

Enter a color as hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), one of the 16 basic HTML keywords, or transparent. Legacy comma syntax and modern space/slash syntax are validated separately per CSS Color Module Level 4 (checked 2026-09-02): legacy is comma-separated, may not mix numbers and percentages, and has no `none`; modern is whitespace-separated with an optional `/ alpha`, may mix units, and allows `none` (treated as 0). Percentage channels are accepted; the hue is a <number> or an <angle> (deg, grad, rad, turn) — a percentage, an unknown unit, or non-numeric text is rejected, never read as 0deg. Numbers are lexed to the CSS Syntax <number> grammar, so JS-only forms (0x10, 0b10, Infinity, NaN) and malformed decimals/exponents (1., 1.e2, 1e, 1e+) are rejected, and whitespace between a number and its % or angle unit (50 %, 10 deg) is invalid because they are separate tokens. A present-but-empty alpha slot (rgb(1 2 3 /), rgb(1, 2, 3,)) is invalid. Following the spec, out-of-range values are clamped rather than rejected — r/g/b to 0–255, saturation/lightness to 0–100%, alpha to 0–1 — and hue wraps into [0, 360). Output is hex, rgb(), and hsl(); an 8-digit hex and the rgba()/hsla() forms appear when alpha is below 1. Conversions stay in the sRGB gamut: wide-gamut and CIE functions (lab, lch, oklab, oklch, color(), hwb) are rejected rather than approximated. Output is rounded — r/g/b to integers, hue/saturation/lightness to two decimals, alpha to three — so a value can drift slightly on repeated round trips.