Color Converter

The converter supports HEX (3-digit, 6-digit and 8-digit with alpha), RGB and RGBA (comma or space syntax), HSL and HSLA, OKLCH, and any valid CSS named color such as cornflowerblue, rebeccapurple or tomato. The format is auto-detected as you type, so you can paste any of these directly into the input field without selecting a mode first.

OKLCH is a perceptually uniform polar color space defined by lightness (L), chroma (C) and hue (H). Unlike HSL, where colors with identical lightness values can look visually very different in perceived brightness, OKLCH uses an underlying model that better matches how human vision perceives color differences. This makes it ideal for programmatically generating accessible color scales, consistent button palettes and design tokens. CSS natively supports oklch() in all modern browsers as of 2023, and major design systems have adopted it for this precision. You can pair OKLCH values directly with the CSS Gradient Generator for perceptually smooth gradients.

The contrast ratio uses the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from linearized sRGB channel values weighted as 0.2126 R + 0.7152 G + 0.0722 B. The tool checks your color against pure white (255, 255, 255) and near-black (15, 23, 42) and displays the ratio alongside the WCAG grade for both normal and large text.

WCAG 2.1 defines two conformance levels for text contrast. Level AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in many accessibility regulations including EN 301 549 and Section 508. AAA is recommended for documents or interfaces where maximum readability matters, such as medical or legal content.

The palette converts your color to HSL space, then generates five tints by interpolating the lightness toward 95% (near white) and five shades by interpolating toward 5% (near black), keeping hue and saturation constant. The result is an 11-swatch strip: 5 tints, your base color (outlined in the palette), and 5 shades. Clicking any swatch immediately loads that color into the input for further conversion or WCAG inspection.

No. All color parsing, conversion math and WCAG calculations run entirely in your browser using JavaScript. PureTools has no server endpoint for this tool and never receives the colors you enter. The last color you typed is saved in sessionStorage under a namespaced key so it persists on refresh, but sessionStorage is automatically cleared when you close the tab, so data is erased when you close the tab. Nothing is ever uploaded or stored remotely. Your data is never used to train AI models or improve machine learning systems.

Yes. Figma typically copies colors as HEX, HSL or RGB. Browser DevTools copy colors as hex, rgb() or hsl(). All of these are accepted directly. If you copy an oklch() value from a CSS file or a design token JSON, that is also supported. The tool auto-detects the format from the pasted string, so you do not need to select anything before pasting. You can also use the JSON Formatter to extract color values from design token JSON files before pasting them here.

Both HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) represent colors using a hue angle and two relative axes, but they define the third axis differently. In HSL, a lightness of 50% with maximum saturation gives the pure hue. In HSV, a value of 100% with maximum saturation also gives the pure hue, but value is conceptually closer to perceived brightness. HSL maps more intuitively to how designers think about tints and shades, while HSV is commonly used in color picker wheels and image editing applications.

sRGB and OKLCH cover similar but not identical gamuts. When you convert sRGB to OKLCH, the values are mathematically exact. When converting back, floating-point rounding in the intermediate matrix multiplications and the cube-root step can produce channel values that are 0 or 1 off in the 0–255 integer range, a difference that is visually imperceptible. If your input uses a very high-chroma OKLCH value that falls outside the sRGB gamut, the tool clamps the output channel to the nearest valid sRGB value rather than producing invalid CSS.

The native browser color picker (input type="color") always stores its value as hex. Whenever you type a valid color in the text field in any format, the tool converts it to hex and updates the picker's value programmatically. Conversely, picking a color from the swatch writes its hex value into the text field. This two-way sync means you can use the visual picker for exploration and the text field for precision, and both always reflect the same color.

Yes, within the same browser session. The tool saves the last valid input to sessionStorage so it persists on refresh. When you close the tab, sessionStorage is cleared automatically by the browser, so the color is erased and your data stays on your device only. The tool does not use localStorage for color data, only the theme preference is stored there.