Brand feel
Stays upbeat without looking playful or immature.
Theme Guide
Citrus Lab
A bright productivity palette that still reads like a serious product.
Citrus Lab mixes soft neutrals with green and amber energy. It works especially well for consumer dashboards, app landing pages, and lightweight utilities.
- Best for utility apps, productivity tools, and consumer SaaS.
- 15.41:1 text on background
- 7.80:1 primary button contrast
- Fresh
- Approachable
- Energetic
Suggested application
Best for utility apps, productivity tools, and consumer SaaS.
AAA AAA
background #fff9ee
surface #ffffff
text #1b2318
muted #6b7460
primary #84c441
secondary #ff9640
accent #247ba0
border #dbe7cb
Primary interface
Use the surface and border pair for cards, forms, and content blocks. The primary color should carry calls to action, while accent stays reserved for highlighted insight.
Interface benefit
Highlights actions clearly for onboarding flows.
Implementation note
Gives screenshots a lighter and more approachable tone.
Where Citrus Lab works best
- Onboarding flows, checklist surfaces, and productivity dashboards.
- Feature explainers, signup pages, and customer education screens.
- Empty states, success moments, and simple utility interfaces.
What to customize first
If the product needs a slightly more serious tone, mute the orange secondary before touching the neutral base so the palette keeps its friendliness without becoming noisy.
When to pick another direction
Move to a darker or more restrained system when the product handles dense finance data, heavy code workflows, or highly formal enterprise buying journeys.
Usage Notes
How to use Citrus Lab without losing clarity
Citrus Lab is designed as a practical starting point, not just a visual exercise. Best for utility apps, productivity tools, and consumer SaaS. Citrus Lab mixes soft neutrals with green and amber energy. It works especially well for consumer dashboards, app landing pages, and lightweight utilities.
What the contrast scores tell you
The current text and background pairing lands at 15.41:1, which scores as AAA in this preview. The primary action color reaches 7.80:1 with its readable button text, which gives you a quick check on whether the main CTA is likely to stay clear when the palette moves into production.
Where to focus your first customizations
If you adapt this preset to match a brand, start with the primary, secondary, and accent roles first. Keep the background, surface, and text relationship stable until the base readability still feels solid, then test muted text, borders, hover states, and empty states before launch.
Quick implementation checklist
- Use background and surface colors to create clear separation between the canvas and cards.
- Reserve the accent color for emphasis so the interface still has hierarchy.
- Retest body text, buttons, and form controls after any brand-driven color changes.
- Check the theme in your real typography and spacing system before shipping it.
Export Tokens
CSS variables for Citrus Lab
Use this as a starting point in Astro, Tailwind, or any other frontend stack that accepts CSS custom properties.
:root {
--theme-bg: #fff9ee;
--theme-surface: #ffffff;
--theme-text: #1b2318;
--theme-muted: #6b7460;
--theme-primary: #84c441;
--theme-secondary: #ff9640;
--theme-accent: #247ba0;
--theme-border: #dbe7cb;
--theme-on-primary: #102033;
} Related Guides
Learn when this palette style makes sense
These pages explain the broader decisions behind palettes like Citrus Lab, so visitors can compare this theme against a real project need instead of only reacting to the swatches.
Product UI Guide
App Color Schemes for SaaS Products, Utilities, and Product-Led Teams
How to choose an app palette that keeps interfaces readable, makes actions obvious, and scales from onboarding to settings screens.
- Protect the neutral structure first so cards, forms, and layout regions stay easy to scan.
- Limit bright accents to actions, status signals, or selective highlights instead of spreading them everywhere.
Website Color Palette Ideas That Feel Premium and Stay Easy to Read
Practical advice for choosing a website palette that supports trust, hierarchy, and conversion without leaning on noisy color decisions.
- Use one dominant background family so the page feels calm from hero to footer.
- Save the strongest contrast jumps for calls to action, navigation focus states, and proof moments.
Brand Color System Checklist for Turning a Palette Into a Real Design System
A practical checklist for moving from a promising palette to a repeatable brand color system that works across marketing and product surfaces.
- Name colors by role wherever possible so the system survives brand tweaks later.
- Decide how marketing and product surfaces should relate before the site and app drift apart.
More Themes
Explore other directions
If this palette is close but not exact, the broader theme library gives you more routes to compare without leaving the same design vocabulary.