# Colour Palette File Maker

> Turn named opaque hex colours into collision-safe CSS custom properties and structured JSON, with WCAG relative luminance and the stronger of black or white text measured for every swatch.

Use it: https://tessalor.com/en/generators/color-palette-file-maker

This tool runs entirely in the browser. Nothing entered into it is uploaded.

## How it is done

1. Parse one name plus an opaque three- or six-digit hex colour per non-empty line, expanding shorthand to canonical lower-case six-digit RGB.
2. Normalise names and the prefix to lower-case ASCII kebab-case, adding -2, -3 and later suffixes rather than overwriting duplicate tokens.
3. Linearise each encoded sRGB channel, combine relative luminance with the WCAG weights and compare the resulting contrast against black and white.
4. Export one colour and suggested-text custom property per token in CSS and the same values, channels, luminance and ratio as structured JSON.

## Assumptions

- Every entered colour is opaque. Alpha colours are refused because their displayed contrast depends on an unstated surface underneath.
- The reported text choice compares only #000000 and #ffffff; it does not search every possible foreground colour.
- A higher measured ratio does not by itself make a complete component accessible; type size, weight, states, focus, non-text cues and actual rendered colours still matter.
- Hex values are interpreted as sRGB and no ICC profile or wide-gamut colour space is attached to the exported tokens.

## Inputs

| Name | Label | Type | Default | Range |
| --- | --- | --- | --- | --- |
| `palette` | Named colours | textarea | ink #1f2937
paper #f8fafc
accent #ea980e
success #16803a |  |
| `variablePrefix` | CSS variable prefix | text | brand |  |

## Outputs

- `colorCount` — Colours ready (integer), primary
- `minimumContrast` — Lowest best-text contrast (number)
- `lightTextCount` — Colours needing light text (integer)
- `renamedTokens` — Names de-duplicated (integer)

## Questions

### Is black or white always the better text colour?

One of them always has the higher ratio against an opaque colour, and the tool reports that measured winner. “Better” here means contrast only; brand constraints and the rest of the component still need review.

### Why not average the red, green and blue numbers?

Hex channels are gamma-encoded sRGB values, not proportional light. WCAG first converts each channel to a linear value and then applies different red, green and blue weights.

### What happens when two names become the same CSS token?

The first keeps the base name and later matches receive -2, -3 and so on. No declaration is silently replaced, and the table shows every final token before download.

### Why are eight-digit hex colours rejected?

Their alpha channel blends with a background before contrast exists. A reliable ratio would need that background as another explicit input, so this tool accepts only opaque #RGB and #RRGGBB values.

## Sources

- [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) — World Wide Web Consortium, applies to sRGB relative luminance and contrast ratio. Retrieved 2026-08-01.
- [Understanding Success Criterion 1.4.3 — Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — World Wide Web Consortium, applies to Text contrast interpretation and thresholds. Retrieved 2026-08-01.
- [CSS Custom Properties for Cascading Variables Module Level 1](https://www.w3.org/TR/css-variables-1/) — World Wide Web Consortium, applies to Author-defined properties beginning with two dashes. Retrieved 2026-08-01.

## Variants

- [How do I turn a list of hex colors into CSS variables?](https://tessalor.com/en/generators/color-palette-file-maker/turn-hex-colors-into-css-variables)
- [Should I use black or white text on a hex color?](https://tessalor.com/en/generators/color-palette-file-maker/black-or-white-text-on-hex-color)

---

Estimate, not advice. See https://tessalor.com/en/disclaimer.
Machine-readable catalogue: https://tessalor.com/api/tools.json