Color tokens er en type design tokens som brukes til å standardisere og organisere fargepaletten i et designsystem. I stedet for å bruke faste fargekoder (som HEX, RGB eller HSL) direkte i designfiler eller kode, defineres fargene som tokens med beskrivende navn. Dette gjør det enklere å vedlikeholde, oppdatere og bruke farger konsekvent på tvers av ulike flater og plattformer.

Color tokens struktureres ofte i flere nivåer. På det mest grunnleggende nivået finner vi kjernetokens som definerer råfarger, for eksempel #DF0000 som kan få navnet color.global.error. Deretter kan aliastokens brukes til å definere flere farger i samme palett, f.eks. color.error.95 . Ved å bruke aliastokens blir det enkelt å endre for eksempel merkevarefargen ved kun å oppdatere kjernetokenet som aliastokenet refererer til. Når fargene brukes i konkrete UI-komponenter, kommer komponenttokens og/eller semantiske tokens inn i bildet. For eksempel kan bakgrunnsfargen på et banner defineres med en semantisk tokens som color.error.surface