Color scheme generator

most palette generators hand you five beautiful colors and no idea which pairs are actually legible. this one shows the contrast ratio for every combination, because a palette that fails WCAG is a palette you have to redo later.

base color

harmony3 colors

the complement, split in two — the contrast without the clash.

output

base#a85fff
hsl(267 100% 69%)
on white3.7on black5.7
+150°#fff85f
hsl(57 100% 69%)
on white1.1on black18.8
+210°#66ff5f
hsl(117 100% 69%)
on white1.3on black16.0

every pair, checkedWCAG 2.1 · normal text

Aa#A85FFF on #FFF85F3.28:1AA Large
Aa#A85FFF on #66FF5F2.79:1fail
Aa#FFF85F on #66FF5F1.18:1fail

AA needs 4.5:1 for body text. AA Large (3:1) only applies at 24px+, or 19px+ bold. failmeans don't put these two together as text and background — they can still sit side by side as blocks.

split-complementary · css

/* split-complementary scheme — generated with koalia.design/tools/color-schemes */
:root {
  --color-base: #a85fff;
  --color-accent-1: #fff85f;
  --color-accent-2: #66ff5f;
}

frame 01 · the wheel

what each harmony is for

a harmony is just a rule for picking hues that are a fixed distance apart on the color wheel. the rule matters less than what you do with it — but the rules are a fast way to get somewhere defensible instead of nudging a color picker for an hour.

for product UI, start monochromatic or analogous and add exactly one complementary accent for the thing you want people to click. interfaces are mostly greys and one decision.

for brand work, triadic and tetradic give you enough range to build a system — but they need a clear dominant. three or four colors at equal weight always reads as a chart, not a brand.

frame 02 · the maths

how the contrast number is calculated

the ratio comes from WCAG 2.1 relative luminance: each channel is converted from sRGB to linear light, weighted 0.2126 R + 0.7152 G + 0.0722 B, then compared as (L1 + 0.05) / (L2 + 0.05). the green weighting is why a mid-green looks brighter than a mid-blue at the same “brightness”.

the common bug is averaging R, G and B and calling it brightness. that skips the linearisation step and is confidently wrong on saturated colors — usually in the dangerous direction, telling you a blue passes when it doesn't.

the thresholds

4.5:1 — AA, body text. the floor for anything people have to read.
3:1 — AA Large, but only at 24px+ or 19px+ bold. also the floor for UI components and focus indicators.
7:1 — AAA. worth hitting for long-form reading; rarely achievable for brand color on white.

a worked example: a warm brand gold like #FCB841 on white is 1.74:1 — it fails at every size. the same gold against near-black #2A2B2C is 8.15:1and passes AAA. the color isn't the problem; the pairing is. that's the whole reason this tool grades pairs instead of colors.

frame 03 · the caveats

what contrast doesn't tell you

passing isn't the same as readable. 4.5:1 is a legal floor, not a design target. thin weights, tight tracking and low-quality screens all eat into real-world legibility that the number can't see.
color blindness is a separate check. red and green can have identical luminance and perfect contrast, and still be indistinguishable to ~8% of men. test hue pairs separately.
never use color as the only signal. if the only difference between valid and error is red vs green, the state is invisible to some users. add an icon, a label, or a shape.
WCAG 3 will change these numbers. the draft APCA model weights contrast by text size and polarity, and it disagrees with 2.1 in places — especially on dark backgrounds. 2.1 is what's legally referenced today.

koalia · the bootcamp

tools are the easy half

these are references — they tell you what the rules are, not when to break them. that judgement is what the eight weeks are for.

apply for KO-2

tools are the easy half.

more tools.

tools are the easy half

more tools