Accent color
Also called brand color, primary color, or theme color
The one highlight color an interface uses for actions and selected states, and the CSS property that tints native form controls.
// One accent: accent-color tints the native controls, and the same variable
// colors the custom button.
export function NotificationSettings() {
return (
<form className='flex w-80 flex-col gap-4 rounded-2xl border p-6 text-sm accent-(--accent) [--accent:#7c3aed]'>
<label className='flex items-center gap-2'>
<input type='checkbox' defaultChecked />
Email me about mentions
</label>
<fieldset className='flex gap-4'>
<legend className='mb-2 font-medium'>Digest</legend>
<label className='flex items-center gap-2'>
<input type='radio' name='digest' defaultChecked />
Daily
</label>
<label className='flex items-center gap-2'>
<input type='radio' name='digest' />
Weekly
</label>
</fieldset>
<label className='flex flex-col gap-2'>
Sound volume
<input type='range' defaultValue={60} />
</label>
<button
type='submit'
className='rounded-lg bg-(--accent) px-4 py-2 font-medium text-white'
>
Save
</button>
</form>
);
}Make the app’s accent color themeable: define --accent as a CSS variable (default #7c3aed), apply it to primary buttons, links, switches, focus rings, and selected tabs, and set accent-color: var(--accent) on :root so native checkboxes, radios, range inputs, and progress bars match. Check that text on the accent keeps 4.5:1 contrast.
Paste into Layerwise or any AI coding tool.
What is Accent color?
An accent color is the single bright color that marks what is interactive or important: primary buttons, links, switches, selected tabs, focus rings, and progress. Everything else stays neutral, so the accent guides the eye. Most apps define it once as a CSS variable or theme token and reuse it everywhere.
CSS also has an accent-color property that tints native checkboxes, radio buttons, range sliders, and progress bars in one line, such as accent-color: #7c3aed. Custom components still need the variable, so set both from the same value.
Check contrast everywhere the accent appears: text on accent buttons, and the accent as link color on your backgrounds. Bright yellows and light greens usually need dark text on top, and a darker shade when used as text on white.
Related terms
All termsColor contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
Button variants
A set of button styles, such as primary, secondary, outline, ghost, destructive, and link, that shows which action on a screen matters most.
Dark mode
An alternate color theme with light text on dark backgrounds, chosen in settings or matched to the device’s system setting.
Checkbox
A small square you tick to turn an option on or select an item, with a dash in a parent box when only some items are checked.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.