Live preview
Accent · Link · Muted text
Customize
Colors
Start with hue and chroma parameters. Override individual colors only when you need finer control.
Try a palette
Recolor the docs and examples live. Your palette is saved in this browser; Default clears it. Use the theme button to compare modes.
Check contrast in every mode before using your palette. Slider ranges are not an accessibility guarantee.
Load this CSS after tty.css; it works across all three modes.
Use your palette
<link rel="stylesheet" href="tty.css">
<link rel="stylesheet" href="my-palette.css">Save the generated CSS as my-palette.css. No component classes or JavaScript are required to use it.
How the parameters work
OKLCH separates lightness, chroma, and hue. Hue chooses the color; chroma sets its intensity. tty.css chooses lightness for each role and mode, making related shades easier to create.
Accent parameters control buttons, links, selection, and general focus. Neutral parameters control surfaces, text, borders, code, and control focus. Status colors and SVG icons remain independent.
High chroma may exceed your display's gamut, so the browser maps colors to what it can show.
See parameter defaults, all color tokens, and accessibility guidance.
Need finer control? Full overrides
If the parameters aren't enough, override individual tokens such as --tty-bg or --tty-accent. You can pin just one color or define a full palette, as Monokai does. Match the mode selectors in the variable reference.