# Color Picker & Converter

> Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.

- URL: https://generate.now/color
- Category: color
- Price: free, no account required
- AI-powered: no
- Last updated: 2026-08-27

## What it does

A single-color workbench: enter any format, see all the others. Includes hex, RGB, HSL, OKLCH, CMYK, and the closest CSS named color. Pick from a native color picker or type a value. Conversions are deterministic and run entirely in the browser.

## When to use it

- Convert a hex code from a screenshot into RGB for a print spec
- Get the OKLCH equivalent of a Figma color for use in Tailwind v4
- Find the closest CSS named color for a hex value
- Sanity-check a CMYK value before sending to a printer

## Examples

### #ff7a59

```
rgb(255, 122, 89) · hsl(11, 100%, 67%) · oklch(73% 0.18 30)
```

Same color in three different formats.

### rgb(48, 209, 88)

```
#30d158 · hsl(135, 63%, 50%) · closest named: limegreen
```

Apple's system green, with its named-color neighbor.

### rebeccapurple

```
#663399 · rgb(102, 51, 153) · hsl(270, 50%, 40%)
```

A CSS named color resolved into the three most common notations.

### oklch(72% 0.19 30)

```
#ff7a59 · rgb(255, 122, 89) · hsl(11, 100%, 67%)
```

Going the other direction — a modern OKLCH value converted back to legacy formats.

## Frequently asked questions

### Is OKLCH lossless from sRGB?

Within the sRGB gamut, yes. Some OKLCH values lie outside sRGB (wide-gamut displays) — the tool flags those and shows the clamped sRGB equivalent.

### How accurate is the CMYK conversion?

CMYK is device-dependent and requires a color profile for true accuracy. The tool uses a naive sRGB→CMYK formula that's fine for screen reference but should not be used in place of a print-side conversion.

### What does 'closest named color' mean?

CSS defines about 150 named colors (red, dodgerblue, lavenderblush, etc). The tool finds the one with the smallest perceptual distance to your input using ΔE in OKLCH.

### Which color format should I actually use in CSS?

Hex is fine for one-off static values and is still the most portable. Use OKLCH for anything you generate a scale from — tints, shades, hover states — because equal lightness steps look equal to the eye. OKLCH has been supported in all major browsers since 2023.

### How is the contrast ratio calculated?

As (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and darker color. The result runs from 1:1 for identical colors to 21:1 for black on white. WCAG 2.2 asks for at least 4.5:1 for body text, and 3:1 for large text (24px regular or 18.66px bold) and for UI component boundaries.

### Can hex codes include transparency?

Yes — eight-digit hex adds an alpha byte, so #ff7a5980 is the same color at 50% opacity. It's supported in every current browser. Four-digit shorthand (#f7a8) works the same way as three-digit shorthand does for opaque colors.

## References

- [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) — W3C. Normative definitions for hex, rgb, hsl, oklch, and conversion between them.
- [<color> data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) — MDN Web Docs. Practical reference for every CSS color notation this tool converts between.
- [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C WAI. How the contrast ratio shown alongside each conversion is calculated.

## Related tools

- [Color Palette Generator](https://generate.now/palette): Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.
- [CSS Gradient Generator](https://generate.now/gradient): Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.
- [CSS Box Shadow Generator](https://generate.now/box-shadow): Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.