While you can add colors directly to theme.json, using the site editor’s styles interface can be easier, especially when starting out. This visual approach helps you see colors in context as you build your palette.
Navigate to Styles > Colors > Palette and use the “Custom” option to add your first color. Enter your hex code (like CC0000 for Bosco’s signature red) and the interface will add it to your theme’s color system.
Once you save and export using the Create Block Theme plugin, your colors automatically appear in theme.json with proper structure. You might need to clean up the slug names (removing “custom-” prefixes), but the foundation is solid.
Repeat this process for each color in your palette, or copy and paste the generated JSON structure in theme.json for efficiency. This method gives you both visual feedback and properly formatted code.