Template Color Highlighter & CSS Color Picker

AnkiWeb addon 1578859788

Adds real-time CSS/HTML color previews, click-to-pick color picker, syntax highlighting, and live card preview updates to Anki's Card Template Editor.
AI-generated summary; may contain mistakes.

formattingappearancecard-templates

Open on AnkiWeb Ask about alternatives

AnkiWeb

Rating
0 (👍 0 · 👎 0)
Updated
2026-09-18
Anki versions
2.1.66~
Description language
en

Maintenance

active

  • Last update or commit was 13 days before the snapshot (2026-09-18).

GitHub

No GitHub repository linked.

Will it work on my Anki?

Version branches
Min AnkiMax AnkiUpdated
2.1.502.1.66+2026-09-18
History across monthly snapshots

Loading…

Similar addons

VS Code For Anki

Upgrades Anki’s Cards template editor with Monaco-powered syntax highlighting, autocompletion, formatting, diagnostics, themes, and preserved live preview and save behavior.

formattingcard-templates

Rating 0 👍 0 · 👎 0 ⭐ 0 Anki 26.08.1~ Updated 2026-08-06

Description

🎨 Template Color Highlighter & CSS Color Picker Bring the power and beauty of a modern code editor into Anki's Card Template Editor ( Cards... / Card Types ). Never struggle to visualize colors or manually type hex codes again! ✨ Features 🎨 Real-time Inline Color Badges: Every color code in your CSS ( #3498db , #fff , #ff0080aa , rgb(...) , rgba(...) , hsl(...) ) is rendered with a live colored badge right in your code! Features dynamic luminance calculation so the text is always crisp and readable (white on dark colors, dark on light colors). ⚡ Interactive Color Picker (Click-to-Pick): Double-click (or Ctrl + Click ) directly on any color code to open the system color picker. Choose your new color, click OK, and the hex code is instantly replaced! 🔄 Live Card Preview: The moment you pick a color, Anki's live preview pane on the right updates instantaneously . No saving or reopening required! 🖌️ Clean & Beautiful Syntax Highlighting: Styling Tab (CSS): Classes ( .card-box ), IDs, properties ( font-size: , color: ), numbers & units ( px , rem , % ), strings, variables ( var(--...) ), and multi-line comments ( /* ... */ ). Front & Back Tabs (HTML & Mustache): HTML tags ( <div> , <span> ), attributes, and Anki template tags ( {{Front}} , {{Back}} , {{cloze:Text}} , {{#Tag}} ). 🖱️ Context Menu Integration: Right-click anywhere or on a color to access "🎨 Pick Color..." . 🧼 100% Native & Clean: No invasive buttons or bloated UI elements. Everything works seamlessly within Anki's native editor. ⌨️ How to Use In Anki Desktop, open any deck or the Card Browser and click Cards... (Card Types). Go to the Styling tab: notice all your CSS colors now have visual color previews! Double-click or Ctrl + Click on any hex code (e.g. #3498db ). Select your new color in the palette and click OK. Watch the card preview on the right update instantly! ⚙️ Configuration In Anki Desktop, go to Tools > Add-ons > Template Color Highlighter > Config to customize: enable_color_badges : Enable or disable colored backgrounds on color codes (default: true ). enable_double_click_color_picker : Open color picker on double click (default: true ). enable_ctrl_click_color_picker : Open color picker on Ctrl + Click (default: true ). enable_context_menu_color_picker : Enable right-click context menu option (default: true ). hex_format : Format output as "lowercase" (e.g. #3498db ) or "uppercase" (e.g. #3498DB ). enable_syntax_highlight : Enable syntax highlighting in the editor (default: true ). enable_html_highlight : Enable syntax highlighting for Front/Back HTML and Mustache (default: true ). 💡 Compatibility Compatible with Anki 2.1.50+ , Anki 23.x , Anki 24.x and Anki 25.x+ on Windows, macOS, and Linux. Works seamlessly with Anki's built-in Dark and Light themes. Developed by @alyxhard - https://github.com/alyxhard