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

Color format syntax and export reference

Hexroot extracts color palettes from images and emits them in formats you paste into code. The reference below catalogs the color notations, Tailwind config variants, and design-token JSON shapes those exports build on. Use it when you need the exact syntax for a specific format, or when picking which export tab to copy.

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.