Colors

Colors bring life and personality to your Rhyme apps. They help create visual hierarchy, convey meaning, and establish your app’s unique style.

Color Syntax

In Rhyme, colors are referenced using the hash symbol (#) followed by the color name:

// Using named colors
.text "Success!" -color:#green
.button "Delete" [confirm] -color:#red
.box -background:#blue

// Color variables
set $brand-color = #purple
.title "Welcome" -color:$brand-color

Built-in Colors

Rhyme includes a palette of carefully chosen colors:

Basic Colors

#red - Errors, warnings, important actions
#green - Success, confirmation, positive feedback
#blue - Information, links, primary actions
#yellow - Warnings, attention
#orange - Alerts, notifications
#purple - Special features, premium
#black - Text, high contrast
#white - Backgrounds, reverse text
#gray - Secondary text, disabled states

UI Colors

#primary - Main app color
#secondary - Supporting color
#success - Positive outcomes
#warning - Caution states
#error - Error states
#info - Informational

Using Colors

Colors can be applied to various elements:

// Text colors
.text "Important message" -color:#red

// Background colors
.card -background:#light-gray
  .text "Card content"

// Button colors
.button "Save" [save] -color:#green
.button "Cancel" [cancel] -color:#gray

// Border colors
.box -border:#blue
  .text "Highlighted content"

Color Best Practices

Use colors consistently throughout your app
Ensure sufficient contrast for readability
Don’t rely solely on color to convey information
Consider users with color vision differences

Learn More

Explore advanced color techniques and create beautiful, accessible color schemes for your Rhyme apps!

Color Sets

Color tags in Rhyme provide a simple and intuitive way to apply colors to your content using a hashtag-based syntax. Instead of remembering complex hex codes or CSS color names, you can use friendly color tags like #red1, #blue3, or #green2 directly in your Rhyme code.

How Color Tags Work

Color tags follow a simple pattern: #color-name followed by an optional intensity number. For example:

#red - Basic red color (equivalent to #red6)
#red1 - Lightest red variant
#red6 - Medium red variant
#red12 - Darkest red variant (near black)

The Rhyme lexer automatically recognizes these color tags during parsing and converts them into the appropriate color values. This happens at compile time, so there’s no runtime overhead for color processing.

Sets

All available Rhyme color sets. Click any color swatch to copy its Rhyme color tag to your clipboard.

Basic Colors

Modern Colors

Neutral Colors

Copied!

Color Tool

Enter a Rhyme color tag (e.g., #red, #primary, #blue-500)

Dynamic Theme

Pick Base Color

Generated Theme Colors

#color1

#color2

#color3

#color1b

#color2b

#color3b

#fill

#background

#card1

#card2

#card3

#card4

#card5

#error

#error2

Copied!

About Dynamic Themes

BeerCSS includes a powerful Material Design 3 color system that can generate a complete color palette from a single source color. When you select a color using the picker above, BeerCSS automatically: