Color System
Color Primitives
NuvoUI includes a set of primitive colors that serve as the foundation for the design system. Each primitive generates a complete color scale from 50 (lightest) to 900 (darkest).
Configuration
The color primitive system is built on this configurable map:
Color Scales
Gray
.bg-gray-50
.text-on-gray-50
.text-on-gray-50
.bg-gray-100
.text-on-gray-100
.text-on-gray-100
.bg-gray-200
.text-on-gray-200
.text-on-gray-200
.bg-gray-300
.text-on-gray-300
.text-on-gray-300
.bg-gray-400
.text-on-gray-400
.text-on-gray-400
.bg-gray-500
.text-on-gray-500
.text-on-gray-500
.bg-gray-600
.text-on-gray-600
.text-on-gray-600
.bg-gray-700
.text-on-gray-700
.text-on-gray-700
.bg-gray-800
.text-on-gray-800
.text-on-gray-800
.bg-gray-900
.text-on-gray-900
.text-on-gray-900
red
.bg-red-50
.text-on-red-50
.text-on-red-50
.bg-red-100
.text-on-red-100
.text-on-red-100
.bg-red-200
.text-on-red-200
.text-on-red-200
.bg-red-300
.text-on-red-300
.text-on-red-300
.bg-red-400
.text-on-red-400
.text-on-red-400
.bg-red-500
.text-on-red-500
.text-on-red-500
.bg-red-600
.text-on-red-600
.text-on-red-600
.bg-red-700
.text-on-red-700
.text-on-red-700
.bg-red-800
.text-on-red-800
.text-on-red-800
.bg-red-900
.text-on-red-900
.text-on-red-900
blue
.bg-blue-50
.text-on-blue-50
.text-on-blue-50
.bg-blue-100
.text-on-blue-100
.text-on-blue-100
.bg-blue-200
.text-on-blue-200
.text-on-blue-200
.bg-blue-300
.text-on-blue-300
.text-on-blue-300
.bg-blue-400
.text-on-blue-400
.text-on-blue-400
.bg-blue-500
.text-on-blue-500
.text-on-blue-500
.bg-blue-600
.text-on-blue-600
.text-on-blue-600
.bg-blue-700
.text-on-blue-700
.text-on-blue-700
.bg-blue-800
.text-on-blue-800
.text-on-blue-800
.bg-blue-900
.text-on-blue-900
.text-on-blue-900
green
.bg-green-50
.text-on-green-50
.text-on-green-50
.bg-green-100
.text-on-green-100
.text-on-green-100
.bg-green-200
.text-on-green-200
.text-on-green-200
.bg-green-300
.text-on-green-300
.text-on-green-300
.bg-green-400
.text-on-green-400
.text-on-green-400
.bg-green-500
.text-on-green-500
.text-on-green-500
.bg-green-600
.text-on-green-600
.text-on-green-600
.bg-green-700
.text-on-green-700
.text-on-green-700
.bg-green-800
.text-on-green-800
.text-on-green-800
.bg-green-900
.text-on-green-900
.text-on-green-900
yellow
.bg-yellow-50
.text-on-yellow-50
.text-on-yellow-50
.bg-yellow-100
.text-on-yellow-100
.text-on-yellow-100
.bg-yellow-200
.text-on-yellow-200
.text-on-yellow-200
.bg-yellow-300
.text-on-yellow-300
.text-on-yellow-300
.bg-yellow-400
.text-on-yellow-400
.text-on-yellow-400
.bg-yellow-500
.text-on-yellow-500
.text-on-yellow-500
.bg-yellow-600
.text-on-yellow-600
.text-on-yellow-600
.bg-yellow-700
.text-on-yellow-700
.text-on-yellow-700
.bg-yellow-800
.text-on-yellow-800
.text-on-yellow-800
.bg-yellow-900
.text-on-yellow-900
.text-on-yellow-900
purple
.bg-purple-50
.text-on-purple-50
.text-on-purple-50
.bg-purple-100
.text-on-purple-100
.text-on-purple-100
.bg-purple-200
.text-on-purple-200
.text-on-purple-200
.bg-purple-300
.text-on-purple-300
.text-on-purple-300
.bg-purple-400
.text-on-purple-400
.text-on-purple-400
.bg-purple-500
.text-on-purple-500
.text-on-purple-500
.bg-purple-600
.text-on-purple-600
.text-on-purple-600
.bg-purple-700
.text-on-purple-700
.text-on-purple-700
.bg-purple-800
.text-on-purple-800
.text-on-purple-800
.bg-purple-900
.text-on-purple-900
.text-on-purple-900
pink
.bg-pink-50
.text-on-pink-50
.text-on-pink-50
.bg-pink-100
.text-on-pink-100
.text-on-pink-100
.bg-pink-200
.text-on-pink-200
.text-on-pink-200
.bg-pink-300
.text-on-pink-300
.text-on-pink-300
.bg-pink-400
.text-on-pink-400
.text-on-pink-400
.bg-pink-500
.text-on-pink-500
.text-on-pink-500
.bg-pink-600
.text-on-pink-600
.text-on-pink-600
.bg-pink-700
.text-on-pink-700
.text-on-pink-700
.bg-pink-800
.text-on-pink-800
.text-on-pink-800
.bg-pink-900
.text-on-pink-900
.text-on-pink-900
Usage Guidelines
These primitive colors serve different purposes in your UI:
- Gray - For neutral UI elements, text, and borders
- Red - For errors, destructive actions, and warnings
- Blue - For interactive elements, links, and focus states
- Green - For success states, positive indicators, and confirmations
- Yellow - For warnings, highlights, and attention-grabbing elements
- Purple - For premium features, selected states, and creative elements
- Pink - For marketing, highlighted content, and feminine-oriented interfaces
Utility Classes
You can use these colors with utility classes:
CSS Variables Reference
All colors are available as CSS variables:
Theme Colors
In addition to primitive colors, NuvoUI provides theme colors that represent semantic meaning:
primary
.bg-primary-50
.text-on-primary-50
.text-on-primary-50
.bg-primary-100
.text-on-primary-100
.text-on-primary-100
.bg-primary-200
.text-on-primary-200
.text-on-primary-200
.bg-primary-300
.text-on-primary-300
.text-on-primary-300
.bg-primary-400
.text-on-primary-400
.text-on-primary-400
.bg-primary-500
.text-on-primary-500
.text-on-primary-500
.bg-primary-600
.text-on-primary-600
.text-on-primary-600
.bg-primary-700
.text-on-primary-700
.text-on-primary-700
.bg-primary-800
.text-on-primary-800
.text-on-primary-800
.bg-primary-900
.text-on-primary-900
.text-on-primary-900
secondary
.bg-secondary-50
.text-on-secondary-50
.text-on-secondary-50
.bg-secondary-100
.text-on-secondary-100
.text-on-secondary-100
.bg-secondary-200
.text-on-secondary-200
.text-on-secondary-200
.bg-secondary-300
.text-on-secondary-300
.text-on-secondary-300
.bg-secondary-400
.text-on-secondary-400
.text-on-secondary-400
.bg-secondary-500
.text-on-secondary-500
.text-on-secondary-500
.bg-secondary-600
.text-on-secondary-600
.text-on-secondary-600
.bg-secondary-700
.text-on-secondary-700
.text-on-secondary-700
.bg-secondary-800
.text-on-secondary-800
.text-on-secondary-800
.bg-secondary-900
.text-on-secondary-900
.text-on-secondary-900
success
.bg-success-50
.text-on-success-50
.text-on-success-50
.bg-success-100
.text-on-success-100
.text-on-success-100
.bg-success-200
.text-on-success-200
.text-on-success-200
.bg-success-300
.text-on-success-300
.text-on-success-300
.bg-success-400
.text-on-success-400
.text-on-success-400
.bg-success-500
.text-on-success-500
.text-on-success-500
.bg-success-600
.text-on-success-600
.text-on-success-600
.bg-success-700
.text-on-success-700
.text-on-success-700
.bg-success-800
.text-on-success-800
.text-on-success-800
.bg-success-900
.text-on-success-900
.text-on-success-900
danger
.bg-danger-50
.text-on-danger-50
.text-on-danger-50
.bg-danger-100
.text-on-danger-100
.text-on-danger-100
.bg-danger-200
.text-on-danger-200
.text-on-danger-200
.bg-danger-300
.text-on-danger-300
.text-on-danger-300
.bg-danger-400
.text-on-danger-400
.text-on-danger-400
.bg-danger-500
.text-on-danger-500
.text-on-danger-500
.bg-danger-600
.text-on-danger-600
.text-on-danger-600
.bg-danger-700
.text-on-danger-700
.text-on-danger-700
.bg-danger-800
.text-on-danger-800
.text-on-danger-800
.bg-danger-900
.text-on-danger-900
.text-on-danger-900
warning
.bg-warning-50
.text-on-warning-50
.text-on-warning-50
.bg-warning-100
.text-on-warning-100
.text-on-warning-100
.bg-warning-200
.text-on-warning-200
.text-on-warning-200
.bg-warning-300
.text-on-warning-300
.text-on-warning-300
.bg-warning-400
.text-on-warning-400
.text-on-warning-400
.bg-warning-500
.text-on-warning-500
.text-on-warning-500
.bg-warning-600
.text-on-warning-600
.text-on-warning-600
.bg-warning-700
.text-on-warning-700
.text-on-warning-700
.bg-warning-800
.text-on-warning-800
.text-on-warning-800
.bg-warning-900
.text-on-warning-900
.text-on-warning-900
info
.bg-info-50
.text-on-info-50
.text-on-info-50
.bg-info-100
.text-on-info-100
.text-on-info-100
.bg-info-200
.text-on-info-200
.text-on-info-200
.bg-info-300
.text-on-info-300
.text-on-info-300
.bg-info-400
.text-on-info-400
.text-on-info-400
.bg-info-500
.text-on-info-500
.text-on-info-500
.bg-info-600
.text-on-info-600
.text-on-info-600
.bg-info-700
.text-on-info-700
.text-on-info-700
.bg-info-800
.text-on-info-800
.text-on-info-800
.bg-info-900
.text-on-info-900
.text-on-info-900
Color Scale Generation
NuvoUI generates color scales programmatically using the create-color-scale function:
Utility Reference Table
Color Primitive Utility Classes
| Class | Description |
|---|---|
.bg-{color}-{shade} | Sets background color to specified primitive color/shade |
.text-{color}-{shade} | Sets text color to specified primitive color/shade |
Where {color} can be:
grayredbluegreenyellowpurplepink
And {shade} can be:
50,100,200,300,400,500,600,700,800,900
Automatic Contrast Classes
| Class | Description |
|---|---|
.text-on-{color}-{shade} | Sets text color to either black or white depending on the background color's luminance |
SCSS Functions
| Function | Description | Parameters |
|---|---|---|
create-color-scale($color) | Creates a complete color scale (50-900) from a single color | $color: Base color |
luminance($color) | Calculates the luminance of a color according to WCAG standards | $color: Color to analyze |
find-text-color($color) | Returns black or white depending on which provides better contrast | $color: Background color |
is-valid-color($color) | Checks if a value is a valid color | $color: Value to check |