Qolorio turns a single color into a usable system. Keep this short glossary beside you while you choose colors, assign jobs, preview the result and export it. Every term starts with the practical meaning; follow the links for deeper reading.
Start with a color? Try the Palette Generator. Building a complete system? Open Color Studio.
Palette and base color
Palette: the set of colors you work with. A palette becomes a color system when each color has a clear purpose.
Base color: the starting color that guides the palette; you can keep its exact value while exploring companions. Explore palettes and color count.
Canvas foundation
Canvas foundation means the background and main text color behind your palette. Choose a light or dark foundation when your palette needs a readable place to live. In Studio, Palette only keeps your chosen colors as they are; a light or dark canvas can add a palette-tinted near-white or near-black background and matching text. Read the guide to text colors and backgrounds.
Semantic roles
Role = the job of a color. A page background, body text, primary button and warning are different roles. One palette color can do several jobs, but roles let Studio preview and export its use consistently.
Pin keeps a role assigned to the same palette slot;
Lock keeps the color value itself. In Color Studio, try Essential roles first, then expand All roles for the complete system.
Contrast and WCAG
Contrast ratio measures how different a foreground and background are in lightness, from 1:1 for identical colors to 21:1.
WCAG is a set of accessibility guidelines; text and interface parts have different contrast requirements in the finished design. A passing color pair does not prove that an entire interface is accessible. Test a color pair and read the full guidance.
Status colors and focus
Status colors show success, warning, error or disabled states. Check that each state stands apart from the page background and from other states. Keep visible words, icons, borders or shapes as well: meaning should not depend on hue alone.
Focus is the visible indicator that shows where keyboard navigation is. Review both in Studio Preview, even when all tested contrast pairs pass. Preview color-vision differences.
Perceptual color
Perceptual means closer to how people see differences between colors.
Lightness is how light or dark a color appears; chroma is how vivid it appears; hue is its color family, such as blue or orange. Qolorio uses these relationships to suggest companion colors. They help with harmony, while real text and controls still need contrast checks. Try these relationships in Color Match.
OKLab and OKLCH
OKLab is a color model for estimating visible differences between colors.
OKLCH expresses a related model as lightness, chroma and hue, which can be easier to adjust deliberately. Qolorio uses OKLab distance for design hints about colors that may appear too similar; it is not a WCAG test. Compare color formats in the Color Converter.
HEX, RGB and export
HEX (for example, #0068FF) and RGB (red, green, blue) describe digital color values.
Export means saving the results for use outside Qolorio: a palette image or PDF for sharing, or CSS and design tokens for implementation. The full Studio project can carry the palette and its roles into the next stage. Open Studio to preview, test and export.