Drop an image,
paste a :root{}
upload  account  paywall

Color format syntax and export reference

Which color notation, Tailwind config shape, or design-token JSON should a palette land in once it leaves an image? This catalog answers that across hex, rgb(), hsl(), OKLCH and the wide-gamut formats, both Tailwind config generations, and the three competing token JSON shapes — the exact syntax for each, and when to reach for it.

CSS color formats at a glance

Hex notation forms

Hexroot’s CSS Variables export uses 6-digit uppercase hex (#RRGGBB). The full hex family:

Notes on hex:

• Short-form digits double rather than concatenate. #abc is #aabbcc, not #0a0b0c.
• Hex is case-insensitive; Hexroot exports uppercase for diff readability in code review.
• 8-digit alpha hex is in every modern engine, but older Sass releases (pre-1.10) and pre-3.3 Tailwind strip the alpha byte during parsing.

RGB syntax

CSS Color Module Level 4 accepts two valid syntaxes that coexist in the modern parser:

/* Legacy comma syntax */
color: rgb(255, 51, 204);
color: rgba(255, 51, 204, 0.5);

/* Modern space-separated with slash for alpha */
color: rgb(255 51 204);
color: rgb(255 51 204 / 0.5);

/* Modern percentage forms */
color: rgb(100% 20% 80%);
color: rgb(100% 20% 80% / 50%);

/* Modern number/percent mixing is disallowed */
color: rgb(255 20% 204);  /* parse error */

rgb() and rgba() are aliases in the modern parser, and both accept either alpha style. Pick one within a codebase.

HSL syntax

/* Legacy comma syntax */
color: hsl(316, 100%, 60%);
color: hsla(316, 100%, 60%, 0.5);

/* Modern space-separated */
color: hsl(316 100% 60%);
color: hsl(316 100% 60% / 0.5);

/* Hue units (CSS Color L4) */
color: hsl(316deg 100% 60%);
color: hsl(0.878turn 100% 60%);
color: hsl(5.514rad 100% 60%);

Saturation and lightness must be percentages. Hue accepts deg, turn, rad, grad, or unitless (interpreted as deg). HSL is sRGB; for perceptually uniform lightness use OKLCH instead.

OKLCH and wide-gamut formats

OKLCH is the recommended modern format for design-system tokens. Perceptually uniform lightness means a 50% L value reads as the same brightness across hues, which makes generating tint/shade scales mathematically clean.

/* OKLCH: L 0-1 or 0-100%, C 0-0.4+, H 0-360 */
color: oklch(0.7 0.18 316);
color: oklch(70% 0.18 316deg / 50%);

/* OKLAB: L 0-1 or 0-100%, a/b roughly -0.4 to 0.4 */
color: oklab(0.7 0.16 -0.09);

/* LAB / LCH: D50 reference, broader ranges */
color: lab(60 70 -40);
color: lch(60 80 316);

/* Display-P3 wide-gamut explicit */
color: color(display-p3 1 0.2 0.8);

/* color-mix interpolates in any color space */
color: color-mix(in oklch, #6ba8e8 60%, #e8c56b);

Generating tints in HSL: stepping L from 60 to 70 around yellow looks darker than the same step around blue. Generating tints in OKLCH: the steps are visually equal across hue.

Tailwind v3 color config

Hexroot’s Tailwind v3 export targets tailwind.config.js. The full shape it supports:

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        // Flat single-value token
        'palette-1': '#6BA8E8',

        // Nested scale (palette-50 through palette-900)
        brand: {
          50:  '#f0f6fc',
          100: '#dbe9f5',
          500: '#3D6FA3',
          900: '#0e2a44',
          DEFAULT: '#3D6FA3', // accessible as `bg-brand`
        },

        // CSS variable reference (runtime theming)
        accent: 'rgb(var(--accent-rgb) / <alpha-value>)',
      },
    },
  },
};

The <alpha-value> placeholder lets bg-accent/50 interpolate alpha at runtime. It requires the CSS variable to hold the bare space-separated RGB triple (--accent-rgb: 255 51 204), not the full rgb() call.

Tailwind v4 @theme syntax

Tailwind v4 collapses the JS config into CSS. The @theme block declares custom properties that compile into utility classes:

@import "tailwindcss";

@theme {
  /* Single token */
  --color-palette-1: #6BA8E8;

  /* Scale: --color-{name}-{step} generates bg-name-step utilities */
  --color-brand-50:  #f0f6fc;
  --color-brand-500: #3D6FA3;
  --color-brand-900: #0e2a44;

  /* OKLCH source token (recommended for v4) */
  --color-accent: oklch(0.65 0.22 28);

  /* Non-color tokens use other prefixes */
  --font-display: "Fraunces", serif;
  --radius-card: 4px;
}

What changed from v3:

• No JS config required; tokens live in CSS.
• All color tokens use --color- prefix. The suffix becomes the utility name, so --color-palette-1 produces bg-palette-1, text-palette-1, border-palette-1.
• The <alpha-value> placeholder is gone. Alpha goes through color-mix() automatically when a utility includes /N.
• Custom properties cascade into media queries, so dark-mode overrides work natively without a dark: prefix on every utility.

Design-token JSON formats

Hexroot’s JSON export emits a flat enriched shape. The wider design-token ecosystem has three competing shapes worth knowing before choosing where to paste a palette.

Hexroot enriched flat shape (Style Dictionary compatible with a transform):

{
  "color-1": {
    "hex": "#6BA8E8",
    "rgb": { "r": 107, "g": 168, "b": 232 },
    "hsl": { "h": 211, "s": 73, "l": 66 }
  }
}

W3C Design Tokens Community Group (DTCG, draft):

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#6BA8E8"
    }
  }
}

Tokens Studio (Figma plugin):

{
  "global": {
    "color": {
      "primary": {
        "value": "#6BA8E8",
        "type": "color"
      }
    }
  }
}

Style Dictionary v3:

{
  "color": {
    "primary": {
      "value": "#6BA8E8",
      "comment": "Brand primary"
    }
  }
}

Pick a shape early. Tooling assumes one, and converters between shapes are lossy: DTCG’s $value can hold a reference like {color.primary} that Style Dictionary v3’s value resolves at build time, while Tokens Studio’s nested value/type keys disagree with DTCG’s $value/$type keys on every level.

Common-failure patterns

Related concepts

• sRGB vs Display-P3 gamut. oklch() and color() notations open up the wider P3 gamut available on modern hardware; sRGB-only formats clip values outside the cube.
• Relative luminance. The WCAG 2.1 contrast formula weights G channel highest (0.7152), then R (0.2126), then B (0.0722); luminance is the input to the pairwise contrast ratio.
• CIE Lab color space. Perceptually uniform reference space designed in 1976; OKLab is a 2020 refinement that better predicts blue-region perception and is the basis for OKLCH.
• Tokens Studio plugin. Figma plugin for design-token management; uses its own JSON shape and supports value references via {group.subgroup.name} notation at build time.
• Design Tokens Community Group (DTCG). W3C draft standardizing token shape; uses $value, $type, $description prefixed keys for forward compatibility with future versions.