SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🎨 Colors

📐 What are colors used for?

The color system is built on top of semantic theme colors and a full grayscale. It provides utility classes for backgrounds, borders, text, and components like badges, buttons, lists, tables, alerts, links, and navbars. All of them are driven by CSS variables to keep contrast and readability consistent.

You can work at two levels: directly with .bg-*, .text-*, .border-* utilities, or indirectly through component classes such as .btn-primary, .badge-success, .alert-danger, .link-info, and more.

🌈 Theme Colors

Theme colors are defined in the $colors map and exposed through .bg-{color}, .text-{color}, .border-{color}, .badge-{color}, .btn-{color}, and other component-specific variants.

primary
secondary
tertiary
success
danger
warning
info
neutral
light
dark
white
black

🩶 Grayscale

Grayscale is exposed through .bg-gray-{shade}, .text-gray-{shade}, and .border-gray-{shade}. Shades go from 0 (white) to 1000 (black), with regular steps.

.bg-gray-0
.bg-gray-100
.bg-gray-200
.bg-gray-400
.bg-gray-700
.bg-gray-1000

Use gray shades for backgrounds, borders, and typography when you need neutral hierarchy without adding semantic meaning.

🧩 Color Utilities

Color utilities can be applied directly to any element to set its background, text color, or border color using your theme palette or grayscale.

.bg-primary
Background + readable text.
.text-primary
Example text-primary
.border-all .border-primary
Themed border color.

🏷️ Badges & Buttons

Use .badge-{color} or .btn-{color} to set both background and text color consistently across the theme. Contrast is handled via --text-on-{color} variables.

.badge-primary
.badge-secondary
.badge-tertiary
.badge-success
.badge-danger
.badge-warning
.badge-info
.badge-light
.badge-dark
.badge-white
.badge-black

The same color set is available for buttons using .btn-{color} and outline variants with .outline-{color}.

🔗 Links, Alerts & Navbar

Color utilities are also integrated into higher level components: .link-{color}, .alert-{color}, and .navbar-{color}.

.alert-success
Success alert message.
.navbar-dark
Dark themed navbar container.

📋 Lists & Tables

Lists and tables have their own derived color tokens: .list-{color} and .table-{color}. These use adjusted background and text colors to keep content readable in dense layouts.

.list-primary
  • Item 1
  • Item 2
  • Item 3
.table-primary
Header 1 Header 2
Cell 1 Cell 2
Cell 3 Cell 4

💻 HTML Code

Primary background

Danger text

Success border
Light gray background

Dark gray text

Info badge Primary link
Danger alert
Success list item
Danger hover item
Cell A Cell B

📏 Color Utilities Reference

Color utilities follow a consistent pattern and are all generated from the same $colors and $grays maps.

.bg-{color}

Sets the background color using a theme color such as primary, secondary, tertiary, success, info, warning, danger, neutral, light, dark, white, or black.

.text-{color}

Sets the text color using the same theme palette as .bg-{color}, useful for inline emphasis and semantic text.

.border-{color}

Sets the border color using theme colors, usually combined with .border-all, .border-x, or .border-top.

.bg-gray-{shade}

Sets the background to a neutral gray shade, using steps like 0, 50, 100, …, 950, 1000.

.text-gray-{shade}

Applies grayscale to text, useful for muted labels, secondary text, or disabled states without semantic color.

.border-gray-{shade}

Sets border color to a specific gray shade, ideal for separators, outlines, or subtle containers.

.badge-{color}

Colors badge background and text using theme colors, with contrast handled by --text-on-{color}.

.btn-{color}

Colors buttons using theme colors and their matching --text-on-{color} for readable labels.

.outline-{color}

Creates an outline version of buttons and similar components: transparent background with colored border and text, and a filled state on hover/active.

.link-{color}

Styles links with themed color and matching underline. Hover states are generated using color-mix() for subtle emphasis.

.alert-{color}

Applies contextual background and text colors for alerts, using the same theme palette.

.navbar-{color}

Colors navbar containers with a themed background and readable text via --text-on-{color}.

.list-{color}

Applies derived list colors optimized for list backgrounds, borders, and hover states, through dedicated --list-* variables.

.table-{color}

Applies derived table colors optimized for dense tabular content, using --table-* and --table-text-on-* tokens.