{
  "slug": "css-color-converter",
  "name": "gizza-ai/css-color-converter",
  "version": "0.1.0",
  "title": "CSS Color Converter — hex, rgb, hsl, hwb, lab, oklch and app code — gizza.ai",
  "description": "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.",
  "tags": [
    "css color converter",
    "hex to rgb",
    "hex to hsl",
    "rgb to hex",
    "hex to oklch",
    "oklch converter",
    "hex to cmyk",
    "hex to flutter color",
    "hex to swiftui color",
    "color contrast checker"
  ],
  "category": "image",
  "urls": {
    "page": "https://gizza.ai/tools/css-color-converter/",
    "markdown": "https://gizza.ai/tools/css-color-converter/index.md",
    "descriptor": "https://gizza.ai/tools/css-color-converter/tool.json",
    "deep_link_example": "https://gizza.ai/tools/css-color-converter/?input=%233498db&syntax=legacy&precision=3&uppercase_hex=true"
  },
  "cli": "gizza tool css-color-converter \"#3498db\"",
  "tool": {
    "description": "Convert a single color from any common notation into every other notation for the SAME color. Pass the color in `input`: 3/4/6/8-digit hex (with or without `#`), the `0xAARRGGBB` integer form Flutter/Jetpack Compose/Android use (a pasted `Color(0xFF3498DB)` works too), `rgb()`/`rgba()`, `hsl()`/`hsla()`, `hwb()`, `oklch()`, `oklab()`, a bare `52, 152, 219` triple, any CSS color name, or `transparent`. Hue units (`deg`/`turn`/`rad`/`grad`) and 0-1-or-percentage alpha are understood, and both the legacy comma form and the CSS Color 4 space-and-slash form parse. The result is a plain-text block grouped into CSS (hex, hex+alpha, rgb, hsl, hwb, lab, lch, oklch, oklab, `color(display-p3 …)`, and the exact CSS color name or the nearest one by OKLab distance), Design (HSV/HSB and CMYK), App code (Flutter/Dart, Jetpack Compose, SwiftUI, Android XML `#AARRGGBB`, and the signed ARGB int) and Contrast (WCAG 2.1 ratio against white and against black, each with the grade it earns: AAA, AA, AA large text only, or fails WCAG). `syntax` switches rgb()/hsl() between the legacy comma form and the modern space-and-slash form, `precision` sets 0-8 decimals on the fractional components, and `uppercase_hex` prints hex digits in upper case. Channels are quantized to 8-bit sRGB once, up front, so every notation names exactly the same renderable color; a color outside the sRGB gamut is clamped to the nearest one and the output says so. Alpha is preserved throughout, including the CSS 8-digit hex (alpha LAST) versus the `0xAARRGGBB` integer (alpha FIRST). Pure text in, text out: no I/O and no clock, so the same input always gives the same output.",
    "parameters": {
      "additionalProperties": false,
      "properties": {
        "input": {
          "description": "The color to convert, in whatever notation you already have it in. Accepted: 3-, 4-, 6- and 8-digit hex with or without the leading # (#3498db, #f00, #3498db80, f00); the 0xAARRGGBB / 0xRRGGBB integer form Flutter, Jetpack Compose and Android use, including the pasted Color(0xFF3498DB) snippet; rgb()/rgba(), hsl()/hsla(), hwb(), oklch() and oklab() in either the legacy comma form or the CSS Color 4 space-and-slash form; a bare 52, 152, 219 triple; any of the 148 CSS color names; and transparent. Hue accepts deg, turn, rad and grad units, and alpha accepts 0-1 or a percentage. A color outside the sRGB gamut (an ambitious oklch(), typically) is clamped to the nearest sRGB color and the result says so.",
          "type": "string"
        },
        "precision": {
          "default": 3,
          "description": "Decimal places kept on the fractional components — HSL/HWB/CMYK percentages, the LAB/LCH/OKLCH/OKLab axes, and alpha. 3 by default, which round-trips oklch() back to the same 8-bit hex; 0 gives the short hsl(204, 70%, 53%) form designers paste. Trailing zeros are trimmed, so a whole number prints without a decimal point either way. The 0-1 fractions in the SwiftUI and display-p3 lines never drop below 3 places, since fewer would change the color. Values above 8 are capped at 8.",
          "maximum": 8,
          "minimum": 0,
          "type": "integer"
        },
        "syntax": {
          "default": "legacy",
          "description": "Which CSS function syntax the rgb() and hsl() lines are written in. \"legacy\" (default) is the comma-separated form every browser has supported for years, switching to rgba()/hsla() when the color has alpha: rgba(52, 152, 219, 0.5). \"modern\" is the CSS Color 4 form — space-separated channels with a slash before alpha, and no separate rgba()/hsla() names: rgb(52 152 219 / 0.5). This setting only changes rgb() and hsl(); hwb(), lab(), lch(), oklch(), oklab() and color(display-p3 …) exist only in the space-separated form, and HSV and CMYK are not CSS at all, so they always print comma-separated the way design tools show them.",
          "enum": [
            "legacy",
            "modern"
          ],
          "type": "string"
        },
        "uppercase_hex": {
          "default": false,
          "description": "Print hex digits in upper case: #3498DB, #3498DBFF and 0xFF3498DB instead of the lower-case default. Affects every hex-bearing line — the CSS hex, the 8-digit hex with alpha, the Android #AARRGGBB value and the Flutter/Compose 0xAARRGGBB integer. Purely cosmetic: hex colors are case-insensitive everywhere they are read.",
          "type": "boolean"
        }
      },
      "required": [
        "input"
      ],
      "type": "object"
    }
  }
}