Guides & tutorials
Everything we know about choosing colours, testing them and getting them into your codebase — written for designers and front-end developers, free to read, no sign-up.
Most of what these guides describe is built into the tool itself: seed a palette from your own brand colour or an image, check it against WCAG, simulate colour-vision deficiencies, expand any colour into a 50–900 tonal scale, and export to CSS, OKLCH, SCSS, Tailwind or JSON. The guides explain the reasoning so the output is something you can defend, not just paste.
Start here
Colour theory basics
The colour wheel, the three dials of hue, saturation and lightness, and the five harmony patterns that reliably produce palettes which look deliberate.
Read the guide →HEX, RGB, HSL and OKLCH explained
Four ways of writing the same colour and what each set of numbers actually means — plus which one to use for editing, for scales and for print.
Read the guide →Accessibility
A practical guide to WCAG contrast
What a contrast ratio measures, the AA and AAA thresholds worth remembering, designing for colour blindness, and a two-minute testing workflow.
Read the guide →When a brand colour fails contrast
Five ways to keep a brand colour that cannot hold white text, from flipping the label colour to deriving a darker UI variant.
Read the article →Branding & design systems
How to choose a brand colour palette
A repeatable process: set the constraints, pick one anchor, build the supporting cast, apply 60-30-10, then run the five tests before you commit.
Read the guide →Colour in a design system
Turning five nice colours into tonal scales, semantic tokens and exportable variables your whole team can build against.
Read the guide →Designing a dark mode palette
Why inverting a light theme fails, how to build a dark surface ramp, and how to adjust a brand colour so it stops vibrating on near-black.
Read the guide →Gradients & code
CSS gradients explained
Linear, radial and conic gradients, how colour stops and hints behave, how to fix banding, and how to animate without hurting accessibility.
Read the guide →Colours and gradients in YOOtheme Pro
Getting a palette into YOOtheme Pro's style variables, and pasting gradient CSS into an element's custom CSS field with the right scoping.
Read the guide →Examples & inspiration
Palette and gradient examples
Ready-made palettes and gradients with hex codes and copyable CSS, grouped by the job each one does.
Browse examples →The blog
Longer reads on colour psychology, website schemes, gradient trends and the awkward problems that come up in real projects.
Read the blog →