Electric chartreuse #CCFF00 can create a sharp focal accent on a dark interface. Its high relative luminance makes the tested pair with #0E1117 especially distinct. Against white, though, the same chartreuse is too light for text. A useful design system gives the role different values across themes instead of treating a swatch as universally accessible.
These are original sRGB tokens for screen design, not physical ink specifications or evidence that a particular product category has adopted chartreuse. For wider color context, see the Dark Mode Color Guide.
Give the bright accent a specific job
- Dark-theme emphasis: Use #CCFF00 sparingly for a selected indicator, badge or action fill where the surrounding surface is dark.
- Readable labels: Put a tested dark text color inside a bright chartreuse button, not white.
- Light-theme counterpart: Use deep #2D441E for text or action roles on a light surface; chartreuse can remain decorative when it is not required to convey information.
A five-color chartreuse UI palette
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-accent-neon | Electric Chartreuse | #CCFF00 | 204, 255, 0 | 72°, 100%, 50% | Dark-theme accent or fill with dark text |
| --color-canvas-dark | Obsidian Slate | #0E1117 | 14, 17, 23 | 220°, 24%, 7% | Dark canvas |
| --color-token-inverted | Deep Forest Olive | #2D441E | 45, 68, 30 | 96°, 39%, 19% | Light-theme text and action fill |
| --color-border-subtle | Muted Dark Slate | #262C36 | 38, 44, 54 | 218°, 17%, 18% | Decorative dividers; not an untested essential boundary |
| --color-canvas-light | Soft Off-White | #F8F9FA | 248, 249, 250 | 210°, 17%, 98% | Light canvas and cards |
Extract the colors from an existing interface or visual reference with Analyze, then compare the exact values with these starting tokens.
Contrast across light and dark themes
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #CCFF00 / #0E1117 | 16.08:1 | AAA | AAA | Exceeds 3:1 where required |
| #2D441E / #CCFF00 | 9.13:1 | AAA | AAA | Exceeds 3:1 where required |
| #2D441E / #F8F9FA | 10.18:1 | AAA | AAA | Exceeds 3:1 where required |
| #CCFF00 / #FFFFFF | 1.18:1 | Below AA | Below AA | Below 3:1 if essential |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
The failure case applies to chartreuse as text or an essential cue against white—not every possible use of chartreuse on a light page. A chartreuse button with #2D441E text is readable for the tested label pair. Test the fill, border, focus ring and nearby colors separately with the Contrast Checker; never rely on hue alone to identify a state.
Token inversion without a one-to-one color swap
In a light theme, start with #F8F9FA for the canvas and #2D441E for the primary action. In the dark theme, move to #0E1117 and use #CCFF00 as the bright action fill with dark text. The role stays consistent while its value changes with the surrounding surface.
CSS custom properties to start from
:root { --color-canvas: #F8F9FA; --color-brand-primary: #2D441E; --color-brand-on-primary: #FFFFFF; }for light mode.[data-theme="dark"] { --color-canvas: #0E1117; --color-brand-primary: #CCFF00; --color-brand-on-primary: #0E1117; }for dark mode.- Keep focus and boundary tokens separate from decorative dividers; check each against its adjacent surface.
Frequently asked questions
Why can chartreuse work as a dark-mode accent?
The tested #CCFF00 and #0E1117 pair measures 16.08:1, making the bright accent easy to distinguish on that dark surface. That measurement does not certify every component or state in a theme.
Can electric chartreuse be used in light mode?
Yes, but not as text on white: #CCFF00 against #FFFFFF measures only 1.18:1. It can still be a decorative accent or a button fill with a tested dark label; #2D441E works as a light-theme text or action token.
What text color works inside a chartreuse button?
Use a dark label. #2D441E on #CCFF00 measures 9.13:1, while white on that chartreuse fill measures only 1.18:1.
Where can I check a proposed token pairing?
Enter its foreground and background HEX codes in the ColorIndicator Contrast Checker, then inspect the actual component states separately.
Get RGB and HSL for any swatch in the HEX to RGB Converter. Validate actual component pairings with the Contrast Checker.