The tools behind colour education

Every concept in colour theory becomes tangible when the right tools are doing the work. Here is what powers the learning environment at Breloq.

See the learning program

Colour theory workspace showing design tools and colour swatches

CSS Custom Properties

HSL Colour Model

SVG Filters

Canvas API

What the curriculum runs on

The course uses a focused set of browser-native and widely supported tools. Students interact directly with the same technologies they will use on real projects — no abstraction layers between concept and execution.

Figma

Colour system construction, palette building, and real-time contrast checking across component states.

Browser DevTools

Live CSS editing, colour picker integration, and computed style inspection during every exercise.

OKLCH Playground

Perceptually uniform colour space exploration — students see how lightness and chroma actually behave.

Accessible Palette

WCAG contrast ratio auditing built directly into the workflow, not bolted on as an afterthought.

WCAG 2.2

Figma Tokens

P3 Colour

CSS Color Level 5

How colour logic gets written

Colour decisions embedded in code behave differently from colour decisions made in a GUI — and that gap is what this curriculum closes.

Students write actual CSS colour functions: oklch(), color-mix(), and relative colour syntax introduced in CSS Color Level 5. The theory connects directly to the output.

Each module pairs a visual concept — like simultaneous contrast or hue shift under different illuminants — with a coded exercise that makes the effect reproducible and measurable.

CSS Colour Functions covered

Accessibility Tools integrated

Design Token Workflows practised

palette.css

	
.palette {
--base: oklch(62% 0.18 200);
--light: oklch(
from var(--base)
calc(l + 0.22) c h
);
--muted: color-mix(
in oklch,
var(--base) 55%,
white
);
}

@layer audit {
.check-a11y {
background: var(--light);
color:      oklch(18% 0.04 200);
}
}
	