React Inline Style Colors and CSS Variable Examples
React projects should avoid scattering raw HEX codes across components. Keep colors in tokens, CSS variables or small palette objects.
React color object example
const colors = {
primary: '#2563eb',
text: '#111827',
surface: '#ffffff',
};
export function Badge() {
return (
<span style={{ color: colors.primary, background: '#eff6ff' }}>
New
</span>
);
}Developer checklist
- Avoid hard-coded colors in many components.
- Prefer CSS variables for theme switching.
- Keep interactive states readable in both modes.