Slate
The palette behind Diagrammo — built to be read, on a screen in a meeting. Free to use in your own work.
The whole palette
Click any swatch to copy its hex.Nine categorical hues, mutually distinct so neighbouring series never blur. The figure under each is its contrast against this background — 3:1 is the readability threshold for graphics.
Take Slate with you
The color values, plus the light themes shown above.Both modes, switching on the reader’s system setting.
/* Slate — the palette behind Diagrammo. Free to use. */
:root {
--slate-background: #ffffff;
--slate-surface: #f3f5f8;
--slate-overlay: #eaeef3;
--slate-border: #d4dae1;
--slate-text: #1f2933;
--slate-muted: #5b6672;
--slate-primary: #3b6ea5;
--slate-accent: #3a9188;
--slate-red: #c0504d;
--slate-orange: #cc7a33;
--slate-yellow: #c9a227;
--slate-green: #5b9357;
--slate-blue: #3b6ea5;
--slate-purple: #7d5ba6;
--slate-teal: #3a9188;
--slate-cyan: #4f96c4;
--slate-gray: #7e8a97;
--slate-black: #1f2933;
--slate-white: #f3f5f8;
}
@media (prefers-color-scheme: dark) {
:root {
--slate-background: #161b22;
--slate-surface: #202833;
--slate-overlay: #29323e;
--slate-border: #38424f;
--slate-text: #e6eaef;
--slate-muted: #9aa5b1;
--slate-primary: #5b9bd5;
--slate-accent: #45b3a3;
--slate-red: #e07b6e;
--slate-orange: #e0975a;
--slate-yellow: #d9bd5a;
--slate-green: #74b56e;
--slate-blue: #5b9bd5;
--slate-purple: #a585c9;
--slate-teal: #45b3a3;
--slate-cyan: #62b0d9;
--slate-gray: #95a1ae;
--slate-black: #202833;
--slate-white: #e6eaef;
}
}As a code theme
The spectrum, mapped to syntax.In your terminal
Nine hues into sixteen slots.On a light ground that does not invert — even the light spectrum leaves yellow at 2.42:1 against white — so each hue is walked toward black until it clears 4.5:1, and 7:1 for bright. Red, blue and purple already clear it and are untouched. A bright hue goes darker here, because more ink is what reads as emphasis on paper.
The whole palette
Click any swatch to copy its hex.Nine categorical hues, mutually distinct so neighbouring series never blur. The figure under each is its contrast against this background — 3:1 is the readability threshold for graphics.
Take Slate with you
The color values, plus the dark themes shown above.Both modes, switching on the reader’s system setting.
/* Slate — the palette behind Diagrammo. Free to use. */
:root {
--slate-background: #ffffff;
--slate-surface: #f3f5f8;
--slate-overlay: #eaeef3;
--slate-border: #d4dae1;
--slate-text: #1f2933;
--slate-muted: #5b6672;
--slate-primary: #3b6ea5;
--slate-accent: #3a9188;
--slate-red: #c0504d;
--slate-orange: #cc7a33;
--slate-yellow: #c9a227;
--slate-green: #5b9357;
--slate-blue: #3b6ea5;
--slate-purple: #7d5ba6;
--slate-teal: #3a9188;
--slate-cyan: #4f96c4;
--slate-gray: #7e8a97;
--slate-black: #1f2933;
--slate-white: #f3f5f8;
}
@media (prefers-color-scheme: dark) {
:root {
--slate-background: #161b22;
--slate-surface: #202833;
--slate-overlay: #29323e;
--slate-border: #38424f;
--slate-text: #e6eaef;
--slate-muted: #9aa5b1;
--slate-primary: #5b9bd5;
--slate-accent: #45b3a3;
--slate-red: #e07b6e;
--slate-orange: #e0975a;
--slate-yellow: #d9bd5a;
--slate-green: #74b56e;
--slate-blue: #5b9bd5;
--slate-purple: #a585c9;
--slate-teal: #45b3a3;
--slate-cyan: #62b0d9;
--slate-gray: #95a1ae;
--slate-black: #202833;
--slate-white: #e6eaef;
}
}As a code theme
The spectrum, mapped to syntax.In your terminal
Nine hues into sixteen slots.Nothing derived: normal comes from the light spectrum and bright from the dark, because a palette’s light values are its darker ones and its dark values its lifted ones. Purple stands in for magenta; teal takes cyan, because steel cyan sits too close to the blue it would keep landing beside.
Free to use · attribution appreciated, not required