# CSS Color Converter

Paste any color — hex, rgb, hsl, hwb, oklch, oklab, a CSS name or 0xAARRGGBB — and get every other notation for it, plus CMYK, Display P3 and WCAG contrast.

## Run it

- **CLI:** `gizza tool css-color-converter "#3498db"`
- **Web:** https://gizza.ai/tools/css-color-converter/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/css-color-converter/tool.json

## Inputs

- `input` — Color (hex, rgb, hsl, hwb, oklch, oklab, a CSS name, or 0xAARRGGBB) _(field)_
- `syntax` — Write rgb() and hsl() in _(field)_
- `precision` — Decimal places on fractional values _(field)_
- `uppercase_hex` — Upper-case hex digits (#3498DB) _(field)_

## Output

- Every notation (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `input` — Color (hex, rgb, hsl, hwb, oklch, oklab, a CSS name, or 0xAARRGGBB)
- `syntax` — Write rgb() and hsl() in
- `precision` — Decimal places on fractional values
- `uppercase_hex` — Upper-case hex digits (#3498DB)

Example: `https://gizza.ai/tools/css-color-converter/?input=%233498db&syntax=legacy&precision=3&uppercase_hex=true`

---

## About this tool

CSS Color Converter takes one color value and prints the same renderable color in the formats frontend, design-system, and mobile-app work commonly needs: CSS hex, 8-digit hex with alpha, rgb()/hsl() in either legacy or modern syntax, hwb(), lab(), lch(), oklch(), oklab(), Display P3, HSV/HSB, CMYK, Flutter/Dart and Jetpack Compose `Color(0xAARRGGBB)`, SwiftUI, Android XML `#AARRGGBB`, signed ARGB integer, exact-or-nearest CSS color name, and WCAG contrast on white and black.

Paste `#3498db`, `#f00`, `rgba(52, 152, 219, 0.5)`, `hsl(204 70% 53% / 50%)`, `oklch(65.309% 0.135 242.687)`, `rebeccapurple`, `transparent`, `52, 152, 219`, or `Color(0xFF6750A4)`. The color picker stays linked to the text field for quick swatch picking, while still allowing named colors, transparent values, alpha hex, and app-code snippets that native color inputs cannot hold.

Worked example: `#3498db` with the default legacy syntax returns `#3498db`, `rgb(52, 152, 219)`, `hsl(204.072, 69.874%, 53.137%)`, `oklch(65.309% 0.135 242.687)`, `Color(0xff3498db)`, `#ff3498db`, and contrast ratings of `3.15:1 (AA large text only)` on white and `6.66:1 (AA)` on black.

Use **Write rgb() and hsl() in** to switch between old comma syntax and CSS Color 4 space/slash syntax. Use **Decimal places** to round fractional color-space values from 0 to 8 places. Turn on **Upper-case hex digits** when your codebase prefers `#3498DB` and `0xFF3498DB`.

Limits and edge cases: conversions are deterministic and local to your browser. Channels are quantized to 8-bit sRGB once so every printed notation refers to the same displayed color. OKLCH/OKLab inputs outside the sRGB gamut are clamped to the nearest sRGB color and the output includes a note. CMYK is the usual unmanaged web-tool approximation; print production still needs an ICC profile. WCAG contrast is computed from the opaque sRGB color; translucent colors keep their alpha in code formats, but contrast is not composited against a background.

## FAQ

<details>
<summary>Why are there two 8-digit hex formats?</summary>

CSS writes alpha last as `#RRGGBBAA`, while Flutter, Jetpack Compose, Android color integers, and Android XML often write alpha first as `0xAARRGGBB` or `#AARRGGBB`. This tool prints both forms and labels them so you do not accidentally paste a transparent color where an opaque one was intended.

</details>

<details>
<summary>Does the OKLCH value round-trip back to the same hex color?</summary>

Yes for in-gamut colors at the default precision. The core quantizes to one 8-bit sRGB color first and derives every notation from that value, so converting the emitted OKLCH or OKLab line back lands on the same hex unless you deliberately lower precision enough to throw information away.

</details>

<details>
<summary>Can I paste modern CSS color functions?</summary>

Yes. The parser accepts comma-separated legacy forms such as `rgba(52, 152, 219, 0.5)` and CSS Color 4 forms such as `rgb(52 152 219 / 50%)`, `hsl(204 70% 53% / 50%)`, `hwb(204 20% 14%)`, `oklch(65.309% 0.135 242.687)`, and `oklab(65.309% -0.062 -0.12)`.

</details>

<details>
<summary>Is CMYK color-managed for print?</summary>

No. The CMYK line is the simple device-independent approximation used by lightweight developer tools. It is helpful for estimates and handoffs, but final print work should convert through the printer or paper ICC profile in a color-managed app.

</details>

## Related tools

- [Color converter](https://gizza.ai/tools/color-format-convert/): Convert a color between HEX, RGB(A), HSL, HSV and CMYK, in your browser. Paste any notation and get them all. Nothing is uploaded.
- [Color Contrast Checker](https://gizza.ai/tools/color-contrast-checker/): WCAG colour contrast checker — get the contrast ratio and AA / AAA pass-fail for any text and background colour, plus an accessible suggestion. Free, in-browser.
- [Before / after image slider generator](https://gizza.ai/tools/before-after-slider/): Turn two images into an interactive before/after comparison slider: one self-contained HTML file with inline CSS + JS, no libraries.
- [Color palette generator](https://gizza.ai/tools/color-palette-generator/): Generate a color palette from any base color — complementary, analogous, triadic, tetradic, monochromatic, shades and tints. Free, runs in your browser.
- [Color shades generator](https://gizza.ai/tools/color-shades-generator/): Generate a ramp of tints, shades and tones from any base color, including a Tailwind-style 50-900 scale, in HEX, RGB and HSL. Runs in your browser, nothing is uploaded.