website·Indexed 29 days ago
https://palettejson.orgAn open JSON schema for defining color palettes in a structured, machine-readable way. The documentation covers the schema specification for root objects, palettes, colors, and accessibility, as well as guides on color space selection, gamut mapping, and precision.
components array over the hex string for higher precision, using the colorRepresentation field to determine the color space.import Ajv from "ajv";
import addFormats from "ajv-formats";
import schema from "./palettejson.schema.json" assert { type: "json" };
import Color from "colorjs.io";
const ajv = new Ajv({ strict: false });
addFormats(ajv);
const validate = ajv.compile(schema);
const data = JSON.parse(fileContents);
if (validate(data)) {
const { colorRepresentation, colors } = data;
const extracted = colors.map((color) => {
if (color.components) {
return new Color(colorRepresentation.toLowerCase(), color.components);
} else if (color.hex) {
return new Color(color.hex);
}
});
}Verify if your decimal precision is sufficient by performing a round-trip conversion and calculating the perceptual difference (ΔE 2000). If the ΔE 2000 exceeds 1.0, increase the decimal precision by one place and test again.
Interpreting ΔE 2000 values:
import Color from "colorjs.io";
// Original sRGB color
const original = new Color("srgb", [0.9608, 0.8784, 0.8627]);
// Convert to Lab and back to sRGB
const lab = original.to("lab");
const roundTrip = lab.to("srgb");
// Calculate perceptual difference
const deltaE = original.deltaE(roundTrip, "2000");
console.log(`ΔE 2000: ${deltaE.toFixed(4)}`);When consuming PaletteJSON legibility data:
preferredText as a high-level recommendation for direct UI application.luminance and contrast ratios as numeric hints, as different consumers may calculate them differently.legibility object or its properties are absent, the consumer should calculate or infer the legibility values as needed.import Color from "colorjs.io";
function testRoundTrip(hexColor) {
const original = new Color(hexColor);
// Test via Lab
const viaLab = original.to("lab").to("srgb");
const labDelta = original.deltaE(viaLab, "2000");
// Test via OKLCH
const viaOKLCH = original.to("oklch").to("srgb");
const oklchDelta = original.deltaE(viaOKLCH, "2000");
return { labDelta, oklchDelta }; // Both should be < 1.0
}
testRoundTrip("#f5e0dc");# Color Conversion
npm install colorjs.io # JavaScript
pip install coloraide # Python
# Validation
npm install ajv ajv-formats # Node.js
pip install jsonschema # PythonWhen mapping PaletteJSON colors to external systems, follow these guidelines:
note property to document any uncertainties or special cases regarding the mapping.Avoid implementing color space mathematics from scratch due to complexity and error risk. Use established libraries to handle gamma correction and edge cases.
Recommended Libraries:
colorjs.io, Culoricoloraide, color-sciencepaletteSwiftColor// ✅ CORRECT: Use a library like colorjs.io
import Color from "colorjs.io";
const hsl = new Color("srgb", [r, g, b]).to("hsl");palettejson.schema.json using JSON Schema draft 2020-12. In Node.js, this is typically done using the ajv and ajv-formats libraries.// Install: npm i ajv ajv-formats
import Ajv from "ajv";
import addFormats from "ajv-formats";
import schema from "./palettejson.schema.json" assert { type: "json" };
const data = {
palettes: [
{
name: "Example",
slug: "example",
type: "categorical",
colors: [{ hex: "#FFFFFF" }, { hex: "#000000" }],
},
],
};
const ajv = new Ajv({ strict: false });
addFormats(ajv);
const validate = ajv.compile(schema);
const valid = validate(data);
if (valid) {
console.log("Valid!");
} else {
console.error("Validation errors:", validate.errors);
}PaletteJSON has specific constraints for high-dynamic-range and wide-gamut data:
sRGB-linear-extended with unbounded RGB values. Store HDR metadata externally as PaletteJSON does not natively support it.altRepresentations.notes field or reference external .icc files via the palette slug or id.PaletteJSON supports six color representations optimized for different workflows. Use the following decision logic to select the appropriate one: