PaletteDesk documentation
Guides on how the color engine works, how contrast is checked, how to export a palette into your project, and how to embed themes and animated patterns on your own site. It also covers previewing palettes on web design styles and product layouts, and how to test a palette on a real UI. Pick an article in the menu or start below.
Basics
Tools
Contrast checkerHow the contrast ratio is calculated, what AA and AAA levels mean, and how failing color pairs get auto-fixed.Export to TailwindWhat's included in the export, available formats - tailwind.config.js, CSS variables, JSON - and why named roles beat a flat list of hex codes.Type scale guideLearn how a type scale works, how to choose a ratio, and build h1-h6 and body sizes with rem, px and pt values - then try it live in the type scale generator.UI elements contrast guideLearn how the Elements preview tests a color palette on real buttons, inputs, badges and alerts, how to read the WCAG contrast summary, and how one-click fixes work.
Explore & styles
Explore Styles guideSee your color palette live inside web design style templates - Bauhaus, Swiss Style, Brutalism, Glassmorphism, Cyberpunk and more. Compare styles, check mobile, share a link.Explore Products guidePreview your color palette on real product layouts - dashboards, team chat, marketplaces, video feeds - before you build. See buttons, links and status colors in context.Web design styles guideA visual guide to web design styles - Bauhaus, Swiss Style, Art Deco, Brutalism, Glassmorphism, Cyberpunk and more - with typical color palettes and what each style suits.Test a palette on a real UISwatches hide contrast and proportion problems. Learn what to check when testing a color palette - text contrast, status colors, dark surfaces, mobile - and how to preview it live.
Guides
Reversible light/dark togglingHow to implement a light/dark theme toggle with the ability to revert to the previous theme. Detailed documentation and code examples.Animated patterns without restartsThree reasons a CSS-animated SVG background pattern restarts on its own - and how to avoid them when embedding a pattern in your own site.
Font styles
Cursive text generatorTurn plain text into elegant cursive Unicode fonts - free, instant, and copy-paste ready for Instagram, TikTok, Discord and more.Double struck text generatorTurn text into double struck (blackboard bold) Unicode letters - copy and paste into bios, names, and notes, free and with no download.Gothic text generatorCopy and paste gothic, fraktur, and blackletter letters instantly for Instagram, TikTok, and Discord - free, no download.Fancy text for TikTokHow to copy fancy Unicode text into your TikTok name and bio, plus why TikTok's real @username won't accept it.Stylish text for social mediaWhy stylish Unicode text stands out on TikTok, Instagram, Twitter/X, and Discord, and how to copy it into any profile.Aesthetic text for InstagramHow to use aesthetic bio templates, decorative symbols, and kaomoji in an Instagram bio, caption, or story, with pro tips.What is a Unicode font generator?How Unicode font generators turn regular text into stylish characters that work on any platform, and the most popular styles.Fancy username generatorTurn a name into a stylish Unicode username - bold, cursive, gothic, bubble and more - and see where it works, from Discord display names to games.